Question

这个奇怪的事情让我看到水平线上只有4个网格线。有人可以帮忙吗？

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Now');
  data.addColumn('number', 'Comparison');
  data.addRows([
    [new Date(2008, 1 ,1),  1264,      1477],
          [new Date(2008, 1 ,2),  1499,      1406],
          [new Date(2008, 1 ,3),  1322,       1105],
          [new Date(2008, 1 ,4),  1147,      1154],
          [new Date(2008, 1 ,5),  1309,      1227],
          [new Date(2008, 1 ,6),  1251,      1298],
          [new Date(2008, 1 ,7),  1238,      1264],
          [new Date(2008, 1 ,8),  1264,      1477],
          [new Date(2008, 1 ,9),  1499,      1406],
          [new Date(2008, 1 ,10),  1322,       1105],
          [new Date(2008, 1 ,11),  1147,      1154],
          [new Date(2008, 1 ,12),  1309,      1227],
          [new Date(2008, 1 ,13),  1251,      1298],
          [new Date(2008, 1 ,14),  1238,      1264],
          [new Date(2008, 1 ,15),  1789,      1256],
          [new Date(2008, 1 ,16),  1789,      1078],
          [new Date(2008, 1 ,17),  1965,      975],
          [new Date(2008, 1 ,18),  1654,      896],
          [new Date(2008, 1 ,19),  1478,      789],
          [new Date(2008, 1 ,20),  1278,      989],
          [new Date(2008, 1 ,21),  1078,      1009],
          [new Date(2008, 1 ,22),  1698,      1109],
          [new Date(2008, 1 ,23),  1398,      1209],
          [new Date(2008, 1 ,24),  1298,      1509],
          [new Date(2008, 1 ,25),  1298,      1009],
          [new Date(2008, 1 ,26),  1198,      1209],
        ]);
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 2000px; height: 1000px;"></div>
  </body>
</html>

Answer 1

图表的默认行为是使用5个网格线。请参阅hAxis.gridlines.count下的the documentation。

如果要增加网格线数，请在图表中设置选项。例如：

chart.draw(data, {vAxis: {gridlines: {count: 100}}})

这是一个包含大量网格线的示例（来自Google Playground并添加了上述选项）：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'],
    ['A',   1,       1,           0.5],
    ['B',   2,       0.5,         1],
    ['C',   4,       1,           0.5],
    ['D',   8,       0.5,         1],
    ['E',   7,       1,           0.5],
    ['F',   7,       0.5,         1],
    ['G',   8,       1,           0.5],
    ['H',   4,       0.5,         1],
    ['I',   2,       1,           0.5],
    ['J',   3.5,     0.5,         1],
    ['K',   3,       1,           0.5],
    ['L',   3.5,     0.5,         1],
    ['M',   1,       1,           0.5],
    ['N',   1,       0.5,         1]
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 500, height: 400,
                  vAxis: {maxValue: 10, gridlines: {count: 100}}
                 }
          );
}

由于您没有指定预期的网格线数量，请根据您的需要编辑以上内容。

谷歌图表 - 日期和时间网格线

1 个答案: