在谷歌折线图中设置两个轴的间隔

Question

我正在使用Google Line Charts（Material）并希望指定具有固定间隔（增量为1）的Y轴和X轴。参考图表，我希望我的Y轴值为1,2,3。我无法弄清楚为图表设置的选项有哪些。感谢任何帮助 - 谢谢

Answer 1

我认为Material LineCharts还不支持滴答声。 但您可以尝试插入选项 - vAxis并尝试更改值max：

var options = {
   vAxis: {
      viewWindow: {
              max: 5
          },
     ...

并调用convertOptions：

chart.draw(data, google.charts.Line.convertOptions(options));

就像JSFiddle上的this示例一样。

Answer 2

首先，Material Charts仍在测试版中，材料图表尚不支持许多支持的选项 corecharts。

关于明确设置ticks选项，看起来尚未支持 。如果您想要corecharts的材质样式（至少是字体和颜色），可以添加：

option: { theme: 'material' }

示例

    google.load('visualization', '1.1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');

      data.addRows([
        [1,  7.8],
        [2,  3.9],
        [3,  2.4],
        [4,  1.7],
        [5,  1.9],
        [6,   8.8],
        [7,   7.6],
        [8,  2.3],
        [9,  6.9],
        [10, 2.8],
        [11,  5.3],
        [12,  6.6],
        [13,  4.8],
        [14,  4.2]
      ]);

      var options = {
        title: 'Box Office Earnings in First Two Weeks of Opening',
        width: 900,
        height: 500,
        vAxis: {
              viewWindow: {
                  min: 0,
                  max: 10
              },
              ticks: [0,1,2,3,4,5,6,7,8,9,10]
        },
        hAxis: {
              viewWindow: {
                  min: 1,
                  max: 14
              },
              ticks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
        },
        theme: 'material'
      };

      var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
      chart.draw(data, options);
    }

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<div id="linechart_material"></div>