如何在谷歌图表中添加更多网格线？

Question

我尝试过使用  hAxis：{count：12}，

但它忽略了我的12个数，只给了我4个网格线。任何人都知道如何添加更多网格线？这是我的代码：

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' },
          hAxis: {count: 12},
        };

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

        chart.draw(data, options);
      }

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>

Answer 1

有两种方法可以实现这一目标（参考：Google Line Chart）。

1. 将vAxis.gridlines.count设置为行数。这是实现此目的的更好方法，因为它将自动调整图表中的最大值。检查以下示例：

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' },
          vAxis: {
            gridlines : {
              count : 12
            }
          },
        };

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

        chart.draw(data, options);
      }

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>

1. 通过设置vAxis.ticks提供要在图表中显示的值数组。仅当图表是静态时，这是首选。检查以下示例：

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' },
          vAxis: {
            ticks: [0, 100,200,300,400,500,600,700,800,900,1000,1100,1200,1200]
          },
        };

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

        chart.draw(data, options);
      }

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>