Javascript Chartjs插件缩放插件不更改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

我正在使用chart.js模块来绘制一些数据,并且正在使用chartjs插件zoom来启用缩放和平移,但是,尽管缩放工作正常,但x轴上的标签不会因为任何原因而改变。 我看到过类似的问题,但它们都涉及时间序列数据,因此建议没有帮助

以下是缩小的绘图:

这里是放大的:

需要注意的关键问题是y轴上的标签如何更改,而x轴上的标签没有更改。以下是图表的相关配置变量:

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
}]