添加缩放到我的折线图后,无论我做什么,它都会立即放大到第一个点,而没有缩小的选项(在重置缩放功能之外)。缩小功能也不起作用,放大功能也会导致同样的问题。
NormalAfter any attempt to zoom
const pdmdata = JSON.parse(document.getElementById('div_pdmdata').dataset.chart);
const ctx = document.getElementById('canvasChart_1').getContext("2d");
const radars = {'hidden': 'hidden'};
let linechartData = {
datasets: [{
label: 'Constant',
data: pdmdata[0],
borderWidth: 1
}]
};
for (let i = 0; i < Object.keys(pdmdata[1]).length; i++) {
linechartData.datasets.push({
label: radars[Object.keys(pdmdata[1])[i]],
data: pdmdata[1][Object.keys(pdmdata[1])[i]],
borderWidth: 1,
tension: 0.1
});
}
const config = {
type: 'line',
data: linechartData,
options: {
maintainAspectRatio: false,
interaction: {
mode: 'index',
intersect: false,
},
stacked: false,
plugins: {
title: {
display: true,
text: 'Mode S'
},
zoom: {
zoom: {
drag: {
enabled: true,
// mode: 'x',
threshold: 24
},
mode: 'x'
}
}
},
scales: {
x: {
reverse: true
}
},
elements: {
point: {
radius: 0
}
}
},
};
myChart = new Chart(ctx, config);
function resetZoom(){
myChart.resetZoom();
}
我试过所有的变焦类型;缩放,拖动和平移。即使在图表中间使用拖动也会使它像上面的缩放图像一样结束。控制台中没有任何错误。我也尝试过将速度设置为0.001,但没有效果。最奇怪的是,当我复制下面的图表时,它确实按预期缩放。我不知道为什么会这样。
1条答案
按热度按时间wi3ka0sx1#
好了,我发现了我的问题,chartjs-zoom不喜欢没有自己设置标签的对象作为数据。这里有一个例子:(测试时仅使用1个数据集,以便于测试)
这是可行的:
这是行不通的:
但这是:
所以结论是,当使用chartjs-zoom时,总是预先分配标签,而不是让数据集数据对象自动分配,这对于没有缩放的普通图表来说工作得很好。从来没有弄清楚为什么如果我用完全相同的配置制作了第二个图表,图表确实工作。