用谷歌图表json数据绘制简单的折线图，日期在x轴上

draw simple line chart with google chart json data with dates on x axis

本文关键字：折线图 日期 轴上 简单 谷歌 json 绘制 数据      更新时间：2023-09-26

我已经查看了SO的其他答案，但没有一个能满足我的需求。这是告诉如何在图表上绘制日期的文档。以下是示例json对象之一：

datetime: "2012-07-07"
hours: "0.6"
shop: "WalMart"
name: "Andrew"
__proto__: Object

我使用以下代码添加行和列：

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Hours');  
  $.each(hour_logs, function(key, value){// hour_logs is the collection of json objects, the sample is shown above.
    ymd = value.datetime.split("-");
    var dt = new Date(parseInt(ymd[0]), parseInt(ymd[1]), parseInt(ymd[2]));         
    data.addRow(dt, parseInt(value.hours));
  }); 
  console.log(data);
  var options = {
    title: 'Daily Logs',
    displayAnnotations: true,  
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

但我得到一个错误，未捕获错误：不是数组。如何修复。

添加行时不提供数组。

应为：

data.addRow([dt, parseInt(value.hours)]);

而不是：

data.addRow(dt, parseInt(value.hours));
相关文章：