如何使用 Chart.js 进行自动平移

Question

我正在使用 chart.js 实时绘制数据。 目前，随着新数据点的出现和绘制，旧的数据点仍然存在，这增加了 chart.js 必须在每次迭代中绘制的点数。 我想要最大数量的可见点，比如 20 个和 20 个点在图表上，以平移每次迭代。 我正在使用缩放和平移插件。 这是我现在的代码

if (ticks > 20) {
    flukeChart.pan({x: 1, y: 0}, 'active');
    flukeChart.update();
}

ticks是一个整数，每次新数据进入时都会增加。另一件要注意的事情，X 轴是时间戳。 我使用来自传入数据源的时间戳，而不是在 JS 中计算当前时间。 我感觉.pan方法中的 delta 不应该是 1，因为 x 轴不是整数而是时间戳。

Answer 1

您可以获得时间戳值的像素。 如果然后减去第一个和第二个可见的，则可以使用该像素量平移图表。

 const options = { type: 'line', data: { datasets: [{ label: '# of Votes', data: [], borderColor: 'pink' }] }, options: { scales: { x: { type: 'time' } }, } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); const chart = new Chart(ctx, options); let dataPointsCounter = -1; const interVal = setInterval(() => { chart.data.datasets[0].data.push({ x: new Date(), y: Math.random() }); dataPointsCounter++; if (dataPointsCounter > 20) { const diff = chart.scales.x.getPixelForValue(chart.data.datasets[0].data[dataPointsCounter - 21].x) - chart.scales.x.getPixelForValue(chart.data.datasets[0].data[dataPointsCounter - 20].x) chart.pan({ x: diff }, undefined, 'default'); } chart.update(); }, 500)

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.1.1/chartjs-plugin-zoom.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script> </body>

编辑：

这并不完全是您想要的，但您也可以使用为您处理滚动和更新的流媒体插件：

 const options = { type: 'line', data: { datasets: [{ label: '# of Votes', data: [], borderColor: 'pink' }] }, options: { scales: { x: { type: 'realtime', realtime: { duration: 7500, refresh: 1000, delay: 2000, onRefresh: (chart) => { chart.data.datasets[0].data.push({ x: new Date(), y: Math.random() }) } } } }, } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); const chart = new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.1.1/chartjs-plugin-zoom.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0"></script> </body>

如何使用 Chart.js 进行自动平移

问题描述

1 个解决方案

解决方案1
0 2021-11-08 20:25:10

如何使用 Chart.js 进行自动平移

问题描述

1 个解决方案

解决方案1 0 2021-11-08 20:25:10

解决方案1
0 2021-11-08 20:25:10