使用谷歌图表在x轴上绘制日期

Plotting date on x-axis using google charts

本文关键字：绘制 日期 谷歌      更新时间：2023-09-26

我的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数据有什么问题吗？

我认为您需要使用"date"而不是"Date"。

此外，您的v值似乎也无效。例如，它在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>

相关文章：