Chart.js zoom无论使用哪种缩放类型,都会立即完全放大第一个点

c90pui9n  于 2023-02-12  发布在  Chart.js
关注(0)|答案(1)|浏览(195)

添加缩放到我的折线图后,无论我做什么,它都会立即放大到第一个点,而没有缩小的选项(在重置缩放功能之外)。缩小功能也不起作用,放大功能也会导致同样的问题。
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,但没有效果。最奇怪的是,当我复制下面的图表时,它确实按预期缩放。我不知道为什么会这样。

wi3ka0sx

wi3ka0sx1#

好了,我发现了我的问题,chartjs-zoom不喜欢没有自己设置标签的对象作为数据。这里有一个例子:(测试时仅使用1个数据集,以便于测试)
这是可行的:

let linechartData = {
        label: ['one', 'two', 'three', 'four', 'five'],
        datasets: [{
            label: 'Constant',
            data: [1, 2, 3, 4, 5],
            borderWidth: 1
        }]
    };

这是行不通的:

let linechartData = {
        datasets: [{
            label: 'Constant',
            data: {'one': 1, 'two': 2, 'three': 3, 'four': 4, 'five': 5},
            borderWidth: 1
        }]
    };

但这是:

let linechartData = {
        label: ['one', 'two', 'three', 'four', 'five'],
        datasets: [{
            label: 'Constant',
            data: {'one': 1, 'two': 2, 'three': 3, 'four': 4, 'five': 5},
            borderWidth: 1
        }]
    };

所以结论是,当使用chartjs-zoom时,总是预先分配标签,而不是让数据集数据对象自动分配,这对于没有缩放的普通图表来说工作得很好。从来没有弄清楚为什么如果我用完全相同的配置制作了第二个图表,图表确实工作。

相关问题