javascript Google Charts 折线图中 a 轴上的日期

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13963550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 20:19:50  来源:igfitidea点击:

Dates on a-axis in Google Charts line chart

javascriptgoogle-visualization

提问by C. E.

Here's a newbie question, but how do I use dates for the x-axis in a Google Charts line chart?

这是一个新手问题,但如何在Google Charts 折线图中使用 x 轴的日期?

When I use new Date( ... ) I get the error message "Uncaught Error: Date and datetime column types are not supported"

当我使用 new Date( ... ) 时,我收到错误消息“未捕获的错误:不支持日期和日期时间列类型”

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
['Datum','Person1','Person2','Person3'],
[new Date(2012, 12, 19, 0, 0, 0),'5072.0537223002','5072.0537223002','5074.2809630567'],
[new Date(2012, 12, 20, 0, 0, 0),'5072.0537223002','5072.0537223002','5074.2809630567'],
]);

        var options = {};

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

(Using strings evenly spaces across the x-axis would be acceptable, but when I try with strings "Data column(s) for axis #0 cannot be of type string")

(在 x 轴上均匀使用字符串是可以接受的,但是当我尝试使用字符串时“轴 #0 的数据列不能是字符串类型”)

回答by Mehdi Karamosly

What about to convert the date to a string and just use Datewithout newlike below :

将日期转换为字符串并使用Datenew如下所示:

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
['Datum','Person1','Person2','Person3'],
[Date(2012, 12, 19, 0, 0, 0).toString(),'5072.0537223002','5072.0537223002','5074.2809630567'],
[Date(2012, 12, 20, 0, 0, 0).toString(),'5072.0537223002','5072.0537223002','5074.2809630567'],
]);

        var options = {};

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

Edit:You can follow their example in this link :

编辑:您可以在此链接中按照他们的示例进行操作:

https://google-developers.appspot.com/chart/interactive/docs/customizing_axes

https://google-developers.appspot.com/chart/interactive/docs/customizing_axes

Edit 2:

编辑2:

This is what I was able to do: http://jsfiddle.net/ANC9H/2/

这就是我能够做的:http: //jsfiddle.net/ANC9H/2/

    google.load("visualization", "1", {packages:["LineChart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
    var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'persone1');
        data.addColumn('number', 'persone2');
        data.addColumn('number', 'persone3');
        data.addRows([
                       [new Date(2008, 1 ,1),0.7,0.8,0.6],
                       [new Date(2008, 1 ,7),0.5,0.55,0.9] ]);
    var options = {};

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

I hope this helps.

我希望这有帮助。

回答by jim collins

That's because you're using arrayToDataTable(). If you use DataTable() the error message will go away. See this post : Column Chart with date axis not working

那是因为您使用的是 arrayToDataTable()。如果您使用 DataTable() 错误消息将消失。请参阅此帖子:带有日期轴的柱形图不起作用