使用Google圖表在X軸上繪制日期

Question

我的JSON數據是：

{ "cols": [ {"id":"","label":"Duration Time","pattern":"","type":"Date"}, {"id":"","label":"Idle Time","pattern":"","type":"timeofday"} ], "rows": [ {"c":[{"v": "2015-02-06" ,"f": null}, {"v": [00,00,10] ,"f": "00:00:10"}]}, {"c":[{"v": "2015-02-06" ,"f": null}, {"v": [00,00,07] ,"f": "00:00:07"}]}, {"c":[{"v": "2015-02-13" ,"f": null}, {"v": [00,00,04] ,"f": "00:00:04"}]}, {"c":[{"v": "2015-02-13" ,"f": null}, {"v": [00,00,18] ,"f": "00:00:18"}]} ]

每當我在時間或數字的x軸上繪制其他任何內容時，我都可以這樣做。 但是當我繪制日期時，它什么也沒顯示。

我的腳本的一部分是：

    var piechartdata = new google.visualization.DataTable(jsonPieChartData);

    // Instantiate and draw our pie chart, passing in some options.
    var chart = new      google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(piechartdata, {
  width: 800,
  height: 600,
  pointSize:5,
  chartArea: { left:"10%",top:"10%",width:"80%",height:"80%" },
  legend: {position:'top'},

 hAxis: {
                title: "Date" 
         }
});
 }

我也嘗試過此JSON數據：

{ "cols": [{"id":"","label":"Date2","pattern":"","type":"Date"}, {"id":"","label":"Duration Time","pattern":"","type":"timeofday"} ], "rows": [ {"c":[{"v": "15,04,09","f": null },{"v": [00,00,10] ,"f": "00:00:10"}]}, {"c":[{"v": "15,04,10","f": null },{"v": [00,00,07] ,"f": "00:00:07"}]}, {"c":[{"v": "15,04,11","f": null },{"v": [00,00,44] ,"f": "00:00:44"}]}, {"c":[{"v": "15,04,20","f": null },{"v": [00,00,18] ,"f": "00:00:18"}]} ] }

誰能告訴我我的腳本或json數據出了什么問題？

Answer 1

我相信您需要使用"date"而不是"Date" 。

同樣，您的v值也似乎無效。 例如，date列期望v值中的Date對象，但是要提供字符串。

更改這兩項似乎可以與第二組數據一起使用：

 google.load("visualization", "1", { packages: ["corechart"] }); google.setOnLoadCallback(drawChart); function drawChart() { var jsonPieChartData = { "cols": [{ "id": "", "label": "Date2", "pattern": "","type": "date"}, { "id": "", "label": "Duration Time", "pattern": "", "type": "timeofday" }], "rows": [{ "c": [{ "v": new Date(2015, 3, 9), "f": null }, { "v": [00, 00, 10], "f": "00:00:10"}]}, { "c": [{ "v": new Date(2015, 3, 10), "f": null }, { "v": [00, 00, 07], "f": "00:00:07"}]}, { "c": [{ "v": new Date(2015, 3, 11), "f": null }, { "v": [00, 00, 44], "f": "00:00:44"}]}, { "c": [{ "v": new Date(2015, 3, 20), "f": null }, { "v": [00, 00, 18], "f": "00:00:18"}]}] }; var piechartdata = new google.visualization.DataTable(jsonPieChartData); // Instantiate and draw our pie chart, passing in some options. var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(piechartdata, { width: 800, height: 600, pointSize: 5, chartArea: { left: "10%", top: "10%", width: "80%", height: "80%" }, legend: { position: 'top' }, hAxis: { title: "Date" } }); } 

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div" style="width: 900px; height: 300px;"></div>