Chart.js는 x 축 번호를 수정해야합니다

Question

차트를 생성하기 위해 chart.js JavaScript 라이브러리를 사용하고 있습니다.

내 Yaxis에서 나는 float 값을 가지고 있으며 매초마다 업데이트하고 있습니다.

제 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 
       } 
      }] 
     } 
    } 
})