Chart.jsはx軸の数値を修正する必要があります

Question

私はグラフを生成するためにchart.js JavaScriptライブラリを使用しています。

私のYaxisには浮動値があり、1秒ごとに更新しています。

私のXaxisにはタイムラインがありますが、実際にはデータが毎秒更新されているのでタイムラインが表示されていますので、Xaxisタイムを使用しません。

しかし、私のデータはn回の更新を続けます。データが増えるにつれて、私のグラフは読めなくなり不器用になります。

私は約100個のデータポイントを所定のポイントに表示することを制限したいと考えています。だから毎回、グラフは< = 100個のアイテムを一度に表示します。

簡単な折れ線グラフでchart.jsを使用してこれを行う方法。

Answer 1

ChartJSでtime軸タイプがminとmaxをサポートしています - あなたは、あなたがしたい最古の値は、それを表示してminとしてそのx値を設定するかを作業することができます。

let data = [/* some data */] 
data.sort((a, b) => a.x < b.x) 

const min = data.length > 100 ? data[99].x : data[data.length - 1].x 

var chart = new Chart(ctx, { 
    type: 'line', 
    data, 
    options: { 
     scales: { 
      xAxes: [{ 
       time: { 
        min 
       } 
      }] 
     } 
    } 
})