谷歌图表：AreaChart vAxis Gridlines 未绘制答案

【问题标题】：Google Chart: AreaChart vAxis Gridlines is Not Drawing谷歌图表：AreaChart vAxis Gridlines 未绘制
【发布时间】：2012-06-26 14:17:40
【问题描述】：

根据上面的标题，有人知道为什么吗？我的代码如下，顺便说一下，我正在使用 Google Chart Playground 对其进行测试，http://code.google.com/apis/ajax/playground/?type=visualization#area_chart。请指教，谢谢！

<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 = google.visualization.arrayToDataTable([
      ['Hour', 'Sales', 'Expenses'],
      ['0:00',  1000, 500],
      ['1:00',  1170, 604],
      ['2:00',  660, 302],
      ['3:00',  1030, 827],
      ['4:00', 1222, 86]
    ]);

    var options = {
      areaOpacity: 0.7,
      backgroundColor:{
        color: 'none',
        fill: 'none',
      },
      animation:{
        easing: 'inAndOut',
      },
      hAxis: {gridlines: {color: '#000000', count: 3}},
      vAxis: {gridlines: {color: '#DCDCDC', count: 5}},
      tooltipTextStyle: {color: '#444444', fontName: 'Tahoma', fontSize: 12},
      focusTarget: 'category',         
      series: {
        0:{color: '#207795', lineWidth: 4, pointSize: 10},
        1:{color: '#464A54', lineWidth: 4, pointSize: 10},
      },
      legend: 'none',
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

要获得垂直网格线，您必须设置 hAxis 网格线（完成）并将 x 轴数据类型更改为连续数据类型。请参阅Customizing Axes/Terminology 和面积图：配置选项：hAxis.gridlines 描述。

代替

var data = google.visualization.arrayToDataTable([
  ['Hour', 'Sales', 'Expenses'],
  ['0:00',  1000, 500],
  ['1:00',  1170, 604],
  ['2:00',  660, 302],
  ['3:00',  1030, 827],
  ['4:00', 1222, 86]
]);

您必须提供例如：

var data = google.visualization.arrayToDataTable([
  ['Hour', 'Sales', 'Expenses'],
  [0,  1000, 500],
  [1,  1170, 604],
  [2,  660, 302],
  [3,  1030, 827],
  [4,  1222, 86]
]);

注意小时数据不再是字符串。如果您将hAxis 的count 值更改为5，您将获得每小时的垂直线：

【讨论】：

【解决方案2】：

代码没有任何错误，您在标记中错过了chart_div..

    <div id="chart_div"></div>

查看演示

http://jsfiddle.net/rathoreahsan/LE7V3/

【讨论】：

我在你的 jsfiddle 中也看不到任何垂直网格线。你呢？