2017-07-13 18 views
0

私はxが日付文字列である(x、y)データのchart.jsに散布図を描画しようとしています。講師がサンプルチャートのタイムスタンプを生成する関数を使用する多くの例とチュートリアルをオンラインで見てきましたが、収集するような実際のデータを使用する例は見つかりませんでした。time scatter plot with chart.js

私はこの(クーロンから収集)のように見えるデータを持っている:私は(とデータ列の周りの「引用符」なしの両方)chart.jsでこのようなデータを試してみました

2017-07-08T06:15:02-0600,23.375 
2017-07-08T06:20:02-0600,23.312 
2017-07-08T06:25:02-0600,23.312 
2017-07-08T06:30:02-0600,23.25 

を:

data: [{ 
    x: 2017-07-08T06:15:02-0600, 
    y: 23.375 
},{ 
    x: 2017-07-08T06:20:02-0600, 
    y: 23.312 
},{ 
    x: 2017-07-08T06:25:02-0600, 
    y: 23.312 
},{ 
    x: 2017-07-08T06:30:02-0600, 
    y: 23.25 

}]、

何もレンダリングしません。私は間違って何をしていますか?散布図のdocumentationによれば

答えて

0

データは、2つの異なる形式で供給することができる折れ線グラフとは異なり、散乱チャートのみ小数点形式のデータを受け付けます。

したがって、2017-07-08T06:15:02-0600のような値は使用できません。日付を数値に変換してデータに使用することができます。あなたのケースでは

:あなたはxAxesラベルを変更するためにcallbackを使用できるように

data: [{ 
     x: 1499516102000, 
     y: 23.375 
    }, { 
     x: 1499516402000, 
     y: 23.312 
    }, { 
     x: 1499516702000, 
     y: 23.312 
    }, { 
     x: 1499517002000, 
     y: 23.25 
    } 
] 

今すぐあなたのxAxesは、数字となります。

0

このアドバイスは正しくありません。 javascriptのmoment.jsを使用すると、日付をx軸の値として使用してスキャッタデータを作成できます。何らかの理由でChart.bundle.jsのバンドル版が私のために働いていなかったので、私はmoment.jsを直接ダウンロードしました。私はセットアップにこれを使用しています:私のchart.jsデータの詳細について

<script src="js/moment.js"></script> 
<script src="js/Chart.min.js"></script> 

と、これを:それは素晴らしい働いて

data: [ 
    {x: moment("2017-07-08T06:15:02-0600"), y: 23.375}, 
    {x: moment("2017-07-08T06:20:02-0600"),y: 23.312}, 
    {x: moment("2017-07-08T06:25:02-0600"),y: 23.312}, 
    {x: moment("2017-07-08T06:30:02-0600"),y: 23.25} 
],