Question

我正在尝试用谷歌图表绘制注释图表。但是，我收到错误“第一列必须是日期或日期时间”。例如，如果我要将图表类型更改为区域或行，则可以正常工作。

以下是最终HTML页面的“查看页面来源”内容的javascript部分，我希望在其中绘制图表

<script type="text/javascript">
            google.load('visualization', '1', {'packages':['annotationchart']});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
            // Create our data table out of JSON data loaded FROM server.
            var data_1 = google.visualization.arrayToDataTable([['ACTIVITY DATE TIME','ACTIVITY DURATION'],['2015-10-31 02:00:00',503],['2015-11-01 09:26:00',4],['2015-11-01 11:30:00',2],['2015-11-01 19:33:00',2],['2015-11-02 01:15:00',2],['2015-11-02 03:09:00',2],['2015-11-02 07:04:00',2],['2015-11-02 09:47:00',2],['2015-11-02 11:10:00',2]]);

            var options = {
                displayAnnotations: true    
            };

            var chart_1 = new google.visualization.AnnotationChart(document.getElementById('plot1'));
            chart_1.draw(data_1, options);
            }
            ;
        </script>

我可以请求帮助，请找出问题所在吗？是否需要进行任何类型转换才能使其正常工作？

更新代码

<script type="text/javascript">
            google.load('visualization', '1', {'packages': ['annotationchart']});
            google.setOnLoadCallback(drawChart);

            function drawChart() {
            // Create our data table out of JSON data loaded FROM server.
            var data_1 = google.visualization.arrayToDataTable([<?php echo (implode(",", $chart_array_1)); ?>]);

            var options = {
                displayAnnotations: true
            };

            var chart_1 = new google.visualization.AnnotationChart(document.getElementById('plot1'));
            chart_1.draw(data_1, options);
            }
            ;

Answer 1

是的，您必须将这些strings投射为Dates。

var data = [
  ['ACTIVITY DATE TIME', 'ACTIVITY DURATION'],
  ['2015-10-31 02:00:00', 503],
  ['2015-11-01 09:26:00', 4],
  ['2015-11-01 11:30:00', 2],
  ['2015-11-01 19:33:00', 2],
  ['2015-11-02 01:15:00', 2],
  ['2015-11-02 03:09:00', 2],
  ['2015-11-02 07:04:00', 2],
  ['2015-11-02 09:47:00', 2],
  ['2015-11-02 11:10:00', 2]
];

// or var data = [<?php echo (implode(",", $chart_array_1)); ?>]

for(var i = 1; i < data.length; i++)
    data[i][0] = new Date(data[i][0]); // converting strings to Dates

google.load('visualization', '1', {
  'packages': ['annotationchart']
});
google.setOnLoadCallback(drawChart);

function drawChart() {
  // Create our data table out of JSON data loaded FROM server.
  var data_1 = google.visualization.arrayToDataTable(data);

  var options = {
    displayAnnotations: true
  };

  var chart_1 = new google.visualization.AnnotationChart(document.getElementById('plot1'));
  chart_1.draw(data_1, options);
};

JSFiddle

Googlecharts - 注释图表 - 第一列必须包含日期或日期时间

1 个答案: