1

根据上面的标题，有人知道为什么吗？我的代码如下，顺便说一句，我正在使用 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>

4

2 回答 2

3

要获得垂直网格线，您必须设置 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]
]);

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

在此处输入图像描述

于 2013-12-11T12:42:40.513 回答
1

代码没有任何错误，你错过chart_div了你的标记..

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

看演示

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

于 2012-06-25T10:26:11.477 回答