Javascript 谷歌图表：AreaChart vAxis网格线未绘制_Javascript_Charts_Google Visualization

Javascript 谷歌图表：AreaChart vAxis网格线未绘制

javascript charts google-visualization

Javascript 谷歌图表：AreaChart vAxis网格线未绘制,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,根据上面的标题，有人知道为什么吗？我的代码如下，顺便说一下，我正在使用谷歌图表操场进行测试。请告知，谢谢 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packa

根据上面的标题，有人知道为什么吗？我的代码如下，顺便说一下，我正在使用谷歌图表操场进行测试。请告知，谢谢

<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>

代码没有任何错误，您的标记中缺少了chart\u div

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

见演示

代码没有任何错误，您的标记中缺少了chart\u div

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

见演示

要获得垂直网格线，必须完成hAxis网格线设置，并将x轴数据类型更改为连续数据类型。请参阅和面积图：配置选项：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的计数值更改为5，则每小时将得到垂直线：

要获得垂直网格线，必须完成hAxis网格线设置，并将x轴数据类型更改为连续数据类型。请参阅和面积图：配置选项：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的计数值更改为5，则每小时将得到垂直线：

我在你的jsfiddle中也没有看到任何垂直网格线。是吗？我在你的JSFIDLE中也没有看到任何垂直网格线。你…吗？