Chartjs-plugin-zoom 插件不改变 x 轴标签

Question

我正在使用 chart.js 模块来绘制一些数据，并使用 chartjs-plugin-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,

                            },

如果需要，我可以提供更多代码，但我想错误可能包含在配置中。我试着改变zoom.mode是'x'但那没有用。

Answer 1

万一其他人遇到这个问题，我想出了一个非常不直观的解决方案。第一个问题是标签在 chart.js 中的处理方式，因为它们被视为类别而不是我认为的 x 数据。因此，首先您必须以这种格式将数据作为坐标传递：（如本文档所示：https ://www.chartjs.org/docs/latest/charts/line.html ）data: [{    x: 10,    y: 20}, {    x: 15,    y: 10}]并删除标签变量。但是，尽管文档有说明，但这不适用于折线图。为了解决这个问题，您可以设置：type: 'scatter'并在数据集内写入showLine: true 这将生成一个线图，其中 x 标签是自动生成的，并且缩放效果很好。我还认为有一个性能提升，这是一个很好的奖励。