4

これは初心者の質問ですが、Google チャートの折れ線グラフで x 軸に日付を使用するにはどうすればよいですか?

new Date( ... ) を使用すると、「Uncaught Error: Date and datetime column types are not supported」というエラー メッセージが表示されます。

      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);
      }

(文字列を使用すると、x 軸に均等にスペースを使用できますが、文字列を使用しようとすると、「軸 #0 のデータ列は文字列型にすることはできません」)

4

2 に答える 2

8

日付を文字列に変換し、以下のように使用しDateないnewでください:

      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);
      }

編集: このリンクの例に従うことができます:

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

編集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);
    }

これが役立つことを願っています。

于 2012-12-20T00:43:14.890 に答える
0

これは、arrayToDataTable() を使用しているためです。DataTable() を使用すると、エラー メッセージは表示されなくなります。この投稿を参照してください:日付軸を含む縦棒グラフが機能しない

于 2013-08-20T20:37:46.767 に答える