Google Chart:AreaChart vAxis网格线未绘制

时间:2012-06-25 10:19:03

标签: javascript

按照上面的标题,有人知道为什么吗?我的代码如下,顺便说一下,我正在使用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>

          

2 个答案:

答案 0 :(得分:3)

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

而不是

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]
]);

注意小时数据不再是字符串。如果您将count的{​​{1}}值更改为5,则每小时都会显示垂直线:

enter image description here

答案 1 :(得分:1)

代码没有任何错误,您在标记中遗漏了chart_div ..

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

参见演示

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