我使用chart.js实时绘制数据。目前，当新的数据点进入并绘制时，旧的数据点会保留下来，这增加了chart.js在每次迭代中必须绘制的点的数量。我希望有一个最大数量的可见点，比如说20个，在图上20个点之后，来平移每个迭代。我正在使用缩放和平移插件。这是我现在的代码
if (ticks > 20) {
flukeChart.pan({x: 1, y: 0}, 'active');
flukeChart.update();
}
ticks是一个整数，每次输入新数据时，get都会递增。另一件需要注意的事情是，X轴是时间戳。我使用来自传入数据源的时间戳，而不是在JS中计算当前时间。我有一种感觉，.pan方法中的delta不应该是1，因为x轴不是整数，而是时间戳。
您可以获取时间戳值的像素。如果你减去第一个和第二个可见的像素，你就可以用这个像素量平移图表。
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>