Question

我确实将我的代码与Google的示例代码进行了比较，但我找不到任何不同的代码。我不知道为什么我的图表只显示2个数据列而不是3个。是因为我的浏览器（我使用的是Chrome）？我尝试使用IE并遇到同样的问题。

Google的示例代码：Example

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Chart</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1', {packages: ['corechart']});</script>

<script type="text/javascript">
function drawVisualization2() {
var data = google.visualization.arrayToDataTable([
['Day', 'V5161.198', 'V5161.200', 'V5161.202'],
['27/09/2013', 4.0, 9.0, 4.0],
['29/09/2013', 5.0, 8.0, 4.0]
]);
var options = {title : 'Daily usage of heaters',
vAxis: {title: "Minutes"},
hAxis: {title: "day"},
seriesType: "bars",
series: {2: {type: "line"}} // This is not the root of the problem. If I change it to 3, the chart can be displayed normally but it will not have the average line anymore.
};
var chart = new google.visualization.ComboChart(document.getElementById('chart2_div'));chart.draw(data, options);}google.setOnLoadCallback(drawVisualization2);
</script>
</head>
<body>
<div id="chart2_div" style="width: 1100px; height: 500px;"></div>
</body>
</html>

任何人都可以给我一个建议吗？
非常感谢你。

Answer 1

您在此行的代码评论中说：series: {2: {type: "line"}}

这不是问题的根源。如果我将其更改为3，则图表可以正常显示，但不再具有平均线。

橙色线不三个字段的平均值。它是格式化为行（不是条形）的第三列数据。如果你想要一条平均线，这段代码可以工作：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Chart</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load('visualization', '1', {packages: ['corechart']});</script>

    <script type="text/javascript">
      function drawVisualization2() {
        var data = google.visualization.arrayToDataTable([
          ['Day', 'V5161.198', 'V5161.200', 'V5161.202'],
          ['27/09/2013', 4.0, 9.0, 4.0],
          ['29/09/2013', 5.0, 8.0, 4.0]
        ]);

        data.addColumn('number', 'Average');

        var average = 0;

        for (var i = 0; i < data.getNumberOfRows(); i++){
          average = 0;
          for (var j = 1; j < data.getNumberOfColumns(); j++){
            average = average + data.getValue(i, j);
          }
          average = average / 3;
          data.setValue(i,4,average);
        }

        var options = {title : 'Daily usage of heaters',
                       vAxis: {title: "Minutes"},
                       hAxis: {title: "day"},
                       seriesType: "bars",
                       series: {3: {type: "line"}} // This is not the root of the problem. If I change it to 3, the chart can be displayed normally but it will not have the average line anymore.
                      };
        var chart = new google.visualization.ComboChart(document.getElementById('chart2_div'));chart.draw(data, options);}google.setOnLoadCallback(drawVisualization2);
    </script>
  </head>
  <body>
    <div id="chart2_div" style="width: 1100px; height: 500px;"></div>
  </body>
</html>

使用Google图表API时缺少一列

1 个答案: