Javascript Chartjs插件缩放插件不更改x轴标签
我正在使用chart.js模块来绘制一些数据,并且正在使用chartjs插件zoom来启用缩放和平移,但是,尽管缩放工作正常,但x轴上的标签不会因为任何原因而改变。 我看到过类似的问题,但它们都涉及时间序列数据,因此建议没有帮助 以下是缩小的绘图: 这里是放大的: 需要注意的关键问题是y轴上的标签如何更改,而x轴上的标签没有更改。以下是图表的相关配置变量:Javascript Chartjs插件缩放插件不更改x轴标签,javascript,chart.js,chartjs-plugin-zoom,Javascript,Chart.js,Chartjs Plugin Zoom,我正在使用chart.js模块来绘制一些数据,并且正在使用chartjs插件zoom来启用缩放和平移,但是,尽管缩放工作正常,但x轴上的标签不会因为任何原因而改变。 我看到过类似的问题,但它们都涉及时间序列数据,因此建议没有帮助 以下是缩小的绘图: 这里是放大的: 需要注意的关键问题是y轴上的标签如何更改,而x轴上的标签没有更改。以下是图表的相关配置变量: const config3 = { t
const config3 = {
type: 'line',
data: {
labels: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
datasets: [
{
label: "",
backgroundColor: '#'+Math.floor(Math.random()*16777215).toString(16),
borderColor: '#0071BC',
data: [I ran out of chars but this is just a very long list of numbers in this format: 1,2,3,4,5],
fill: false,
borderWidth: 1,
},
],
},
options: {
responsive: true,
title: {
display: true,
text: 'Peak: -1.2188'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Frequency (Hz)'
},
ticks:{
autoSkip: true,
maxTicksLimit: 20
},
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Amplitude'
}
}],
},
plugins:{
zoom: {
pan: {
enabled: true,
mode: 'xy',
speed: 20,
threshold: 10,
},
zoom: {
enabled: true,
drag: false,
mode: "xy",
speed: 0.1,
// sensitivity: 0.1,
}
}
},
elements: {
point:{
radius: 0
}
}
}
};
如果需要,我可以提供更多的代码,但我认为错误可能包含在配置中。我尝试将缩放模式更改为“x”模式,但没有成功。如果有其他人出现,我想出了一个非常不直观的解决方案 第一个问题是在chart.js中处理标签的方式,因为它们被视为类别,而不是我认为的x数据。因此,首先必须以以下格式将数据作为坐标传入: (如本文件所示:) 并删除labels变量 然而,不管文档中怎么说,这将不适用于折线图。要解决这个问题,您可以设置:
type:'scatter'
并在数据集中写入showLine:true
这将生成一个直线图,其中x标签是自动生成的,并且缩放将非常有效
我还认为有一个性能提升,这是一个不错的奖励。如果有其他人出现,我想出了一个非常不直观的解决方案 第一个问题是在chart.js中处理标签的方式,因为它们被视为类别,而不是我认为的x数据。因此,首先必须以以下格式将数据作为坐标传入: (如本文件所示:) 并删除labels变量 然而,不管文档中怎么说,这将不适用于折线图。要解决这个问题,您可以设置:
type:'scatter'
并在数据集中写入showLine:true
这将生成一个直线图,其中x标签是自动生成的,并且缩放将非常有效
我还认为这是一个不错的奖励
data: [{
x: 10,
y: 20
}, {
x: 15,
y: 10
}]