如何使用 Chart.js 进行自动平移
[英]How to do automatic pan with Chart.js
问题描述
I'm using chart.js to plot data in real time.
我正在使用 chart.js 实时绘制数据。 Currently, as new data points come in and are drawn, the old ones remain which increases the amount of points chart.js has to plot every iteration.目前，随着新数据点的出现和绘制，旧的数据点仍然存在，这增加了 chart.js 必须在每次迭代中绘制的点数。 I'd like to have a maximum number of visible points, say 20 and after 20 points are on the graph, to pan every iteration.我想要最大数量的可见点，比如 20 个和 20 个点在图表上，以平移每次迭代。 I'm using the zoom and pan plugin.我正在使用缩放和平移插件。 Here's my code right now这是我现在的代码
if (ticks > 20) {
flukeChart.pan({x: 1, y: 0}, 'active');
flukeChart.update();
}
ticks is an integer that get's incremented every time new data comes in. Another thing to note, the X axis is timestamps. ticks是一个整数，每次新数据进入时都会增加。另一件要注意的事情，X 轴是时间戳。 I'm using the timestamp from the incoming data source and not calculating the current time in JS.我使用来自传入数据源的时间戳，而不是在 JS 中计算当前时间。 I have a feeling the delta in the .pan method shouldn't be 1 because the x axis isn't integers but timestamps.我感觉.pan方法中的 delta 不应该是 1，因为 x 轴不是整数而是时间戳。
1 个解决方案
解决方案1
0 2021-11-08 20:25:10
You can get the pixel for the values of the timestamps.您可以获得时间戳值的像素。 If you then subtract the first and second visable ones you can pan the chart with that amount of pixels.如果然后减去第一个和第二个可见的，则可以使用该像素量平移图表。
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>
Edit:编辑：
It is not exactly what you want but you can also use the streaming plugin that handles scolling and updating for you:这并不完全是您想要的，但您也可以使用为您处理滚动和更新的流媒体插件：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.