2016-06-15 12 views
0

timeseriesでデバイス情報を表示するためにc3を使用します。 ここに私のjsonデータがあります。C3j timeseriesは連続した行を表示できません

json: [ 
      {datetime: '2016-01-02 12:00:01.001', wifi: 1}, 
      {datetime: '2016-01-02 12:00:01.999', wifi: 0}, 
      {datetime: '2016-01-02 12:00:03.000', GPS: 0}, 
      {datetime: '2016-01-02 12:00:04.003', wifi: 1}, 
      {datetime: '2016-01-02 12:00:05.959', GPS: 1}, 
      {datetime: '2016-01-02 12:00:06.006', wifi: 0}, 
     ], 

私はそれが各無線LAN/gpsの連続した回線を表示することはできません。 バグですか、それとも連続した行を表示できる方法ですか?

The line what I expected

var chart = c3.generate({ 
    data: { 
     xFormat: '%Y-%M-%d %H:%M:%S.%L', 
     json: [ 
      {datetime: '2016-01-02 12:00:01.001', wifi: 1}, 
      {datetime: '2016-01-02 12:00:01.999', wifi: 0}, 
      {datetime: '2016-01-02 12:00:03.000', GPS: 0}, 
      {datetime: '2016-01-02 12:00:04.003', wifi: 1}, 
      {datetime: '2016-01-02 12:00:05.959', GPS: 1}, 
      {datetime: '2016-01-02 12:00:06.006', wifi: 0}, 
     ], 
     keys: { 
      x: 'datetime', 
      value: ['wifi','GPS'], 
     }, 
     types: { 
      wifi: 'line', 
      GPS:'line', 
     }, 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
       tick: { 
        format: '%Y-%m-%d %H:%M:%S' 
      } 
     }, 
    }, 
    zoom: { 
     enabled: true 
    }, 
}); 

Source Code

答えて

1

私はそれが古い問題であり、解決策は "connectNull:true"であることがわかりました。

var chart = c3.generate({ 
    data: { 
     xFormat: '%Y-%M-%d %H:%M:%S.%L', 
     json: [ 
      {datetime: '2016-01-02 12:00:01.001', wifi: 1}, 
      {datetime: '2016-01-02 12:00:01.999', wifi: 0}, 
      {datetime: '2016-01-02 12:00:04.003', wifi: 1}, 
      {datetime: '2016-01-02 12:00:06.006', wifi: 0}, 
      {datetime: '2016-01-02 12:00:03.000', GPS: 0}, 
      {datetime: '2016-01-02 12:00:05.959', GPS: 1}, 
     ], 
     keys: { 
      x: 'datetime', 
      value: ['wifi','GPS'], 
     }, 
     types: { 
      wifi: 'step', 
      GPS:'step', 
     }, 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
       tick: { 
        format: '%Y-%m-%d %H:%M:%S' 
      } 
     }, 
    }, 
    zoom: { 
     enabled: true 
    }, 
line: { 
    connectNull: true 
} 
}); 

SourceCode

0

私は、C3を使用したことがないが、これは私の推測です:あなたはすべてのあなたの日時のwifiGPSの値を指定する必要があります。

値がないところに0を追加しました。何が起こったのか、今度は折れ線グラフがあります:https://jsfiddle.net/gerardofurtado/oshujxux/

+0

ありがとう、私たちはすべてのタイムスタンプのためのすべての値を追加することはできません。ブラウザにはパフォーマンス上の問題があります。私はちょうど解決策を見つける:https://github.com/c3js/c3/issues/563 –

関連する問題