javascript - Google图表将vAxis设置为0.25个间隔

在折线图上，我的数据始终以0.25为间隔。我永远不会有100.14这样的观点。它始终是数字，例如100、100.25、100.75、500、680.50

但是，当经常绘制图表时，我会得到vAxis编号（例如1.1或2.4），而这些值永远不会成为图形上的“点”。

我只想显示0.25的倍数...或只显示vAxis上的实际点，而不是两点之间的“填充”点。

我目前有这些选择

  var options = {"title":"#{chart_title}",
                 "colors":["#0088cc"],
                 "titleTextStyle": {
                     color: "#0088cc",
                     fontName: "Verdana",
                     fontSize: 24,
                     bold: true,
                     italic: false
                  },
                  "hAxis": {
                             "textStyle": {
                               "fontSize": 14,
                               bold: true
                             }

                            },
                  "vAxis": {
                             "textStyle": {
                               "fontSize": 18,
                               bold: true
                             }

                            }

                 };

是否可以强制Google图表在vAxis上始终显示0.25的倍数？

甚至vAxis仅需要折线图上实际点的标签。那可能吗？

最佳答案

您可以使用vAxis.ticks选项设置特定的轴标签...

vAxis: {
  ticks: [0, 0.25, 0.50, 0.75, 1, ...]
}

要动态构建标签，请在数据表上使用getColumnRange方法，

var dataRange = data.getColumnRange(1);

返回具有min和max属性的对象

使用值构建ticks数组...

var vTicks = [];
for (var i = dataRange.min; i <= dataRange.max + interval; i = i + interval) {
  vTicks.push(i);
}

（将interval添加到max以便在顶部留出一些额外的空间）



请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'x');
    data.addColumn('number', 'y');
    data.addRows([
      [0, 0],
      [1, 0.25],
      [2, 1.25],
      [3, 2.75],
      [4, 3.50],
      [5, 2.25],
      [6, 1.75],
      [7, 0.50]
    ]);

    var interval = 0.25;
    var dataRange = data.getColumnRange(1);

    var vTicks = [];
    for (var i = dataRange.min; i <= dataRange.max + interval; i = i + interval) {
      vTicks.push(i);
    }

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.LineChart(container);

    var options = {
      chartArea: {
        top: 12,
        right: 12,
        bottom: 48,
        left: 48,
        height: '100%',
        width: '100%'
      },
      height: 800,
      legend: {
        position: 'bottom'
      },
      vAxis: {
        ticks: vTicks
      }
    };

    drawChart();
    window.addEventListener('resize', drawChart, false);
    function drawChart() {
      chart.draw(data, options);
    }
  },
  packages:['corechart', 'table']
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

关于javascript - Google图表将vAxis设置为0.25个间隔，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43742729/