chart.js v3 -不使用缩放插件的数据抽取
chart.js v3 -不使用缩放插件的数据抽取
提问于 2022-04-22 02:05:18
在chart.js v3中，当通过缩放插件放大时，数据抽取不起作用。
起初，数据抽取是100%的，但是如果我放大它不再工作(即显示所有的点)
如果我再次放大到100%，那么数据抽取就会再次工作。
有什么办法解决这个问题吗？在变焦事件发生后，我需要调用什么来触发数据抽取吗？
回答 1
Stack Overflow用户
发布于 2022-05-11 12:08:38
我怀疑它实际上是正确的。
一些可能的解释之前的代码示例：
var ctx = document.getElementById("myChart");
var nbPoints = 1000;
var samplesPoints = 100;
var thresholdsPoints = 900;
var dataArr = []
for (let i = 0; i < nbPoints; i++) {
dataArr.push({x: i, y: Math.floor(Math.random() * 100)})
}
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: dataArr
}]
},
options: {
parsing: false,
normalized: true,
animation: false,
responsive: false,
plugins: {
decimation: {
enabled: true,
samples: samplesPoints,
threshold: thresholdsPoints,
algorithm: 'lttb'
},
zoom: {
limits: {
x: { min: 0, max: nbPoints }
},
pan: {
enabled: true,
mode: 'x'
},
zoom: {
wheel: {
enabled: true
},
pinch: {
enabled: true
},
mode: 'x'
}
}
},
scales: {
x: {
type: 'linear'
}
}
}
});
function resetZoom() {
myChart.resetZoom();
}.myChartDiv {
max-width: 600px;
max-height: 400px;
}<script src="https://npmcdn.com/chart.js@3.7.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://npmcdn.com/chartjs-plugin-zoom@1.2.1/dist/chartjs-plugin-zoom.min.js"></script>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
<div class="myButton">
<button onclick="resetZoom()">Reset Zoom</button>
</div>
这是由于一段时间前提出的修改:这个想法是在每次缩放时重新执行抽取，以获得“最高分辨率”(对于历史：https://github.com/chartjs/Chart.js/issues/8833)。
但是您可能忽略的(我想)是抽取插件(https://www.chartjs.org/docs/master/configuration/decimation.html#configuration-options)的以下属性：
decimation
- Threshold:样本:在decimation
- Threshold:之后希望有多少个点，大于哪个点，要抽取的点数。通常，您可能需要示例=阈值，但这不是强制性的。
“问题”可能是其中每一个的默认值：
pixel.
- threshold:示例:默认为每个的画布宽度为1，默认为画布宽度的4倍。
这意味着对于800 on图，你将有800点，只有当你在当前范围内有超过800*4点时，抽取才会发生。
因此，我认为正在发生的事情是:假设在200 is图上显示了1000个点。一开始一切都很好，但是一旦你放大，你就有750点，也就是不到200*4，所以死亡不会发生，事实上你会有750点(而你期望200点)。
最后，您可能需要更新您的抽取插件配置，如下所示：
decimation: {
enabled: true,
algorithm: 'lttb',
samples: 800,
threshold: 800
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71962693
复制相关文章
相似问题
腾讯云开发者
