Chart.js立即在使用任何类型的缩放时完全放大到第一个点。

huangapple go评论62阅读模式
英文:

Chart.js zoom instantly zooms in fully on first point no matter what type of zoom used

问题

在将缩放添加到我的折线图后,无论我做什么,它都会立即缩放到第一个点,没有缩放回来的选项(除了重置缩放功能)。缩小功能也不起作用,放大功能会导致相同的问题。

正常
任何尝试缩放后

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,
                        threshold: 24
                    },
                    mode: 'x'
                }
            }
        },
        scales: {
            x: {
                reverse: true
            }
        },
        elements: {
            point: {
                radius: 0
            }
        }
    },
};
myChart = new Chart(ctx, config);
function resetZoom(){
    myChart.resetZoom();
}

我尝试了所有的缩放类型:zoom、drag和pan。即使在图表中间使用拖动也会使其最终变成像上面缩放的图像那样。控制台中没有任何错误。我还尝试将速度设置为0.001,但没有用。最奇怪的是当我在下面复制这个图表时,那个图表会按预期缩放。我不知道为什么会这样。

英文:

After adding zoom to my line chart no matter what I do it instantly zooms in to the first point without the option to zoom back out (outside of the reset zoom function). The zoom out function also doesnt work, zoom in function results in the same problem.

Normal
After any attempt to zoom

const pdmdata = JSON.parse(document.getElementById(&#39;div_pdmdata&#39;).dataset.chart);
const ctx = document.getElementById(&#39;canvasChart_1&#39;).getContext(&quot;2d&quot;);
const radars = {&#39;hidden&#39;: &#39;hidden&#39;};
let linechartData = {
    datasets: [{
        label: &#39;Constant&#39;,
        data: pdmdata[0],
        borderWidth: 1
    }]
};
for (let i = 0; i &lt; 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: &#39;line&#39;,
    data: linechartData,
    options: {
        maintainAspectRatio: false,
        interaction: {
            mode: &#39;index&#39;,
            intersect: false,
        },
        stacked: false,
        plugins: {
            title: {
                display: true,
                text: &#39;Mode S&#39;
            },
            zoom: {
                zoom: {
                    drag: {
                        enabled: true,
                        // mode: &#39;x&#39;,
                        threshold: 24
                    },
                    mode: &#39;x&#39;
                }
            }
        },
        scales: {
            x: {
                reverse: true
            }
        },
        elements: {
            point: {
                radius: 0
            }
        }
    },
};
myChart = new Chart(ctx, config);
function resetZoom(){
    myChart.resetZoom();
}

I've tried all the zoom types; zoom, drag and pan. Even using drag in the middle of the chart makes it end up like the zoomed image above. No errors in console whatsoever. I've also tried setting the speed to 0.001 but to no avail. Weirdest thing is when I make a duplicate of this chart below it that one does zoom as intended. I have no idea why it would though.

答案1

得分: 4

这个问题的原因是,chartjs-zoom 不支持将对象作为数据传递,而不手动设置标签。下面是一些示例代码:

这个是有效的:

    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 时,始终手动分配标签,而不是让数据对象自动分配标签。这对于普通图表而言没有问题,但对于带有缩放功能的图表就有问题。不清楚为什么如果创建一个具有完全相同配置的第二个图表,那个图表却能正常工作。

英文:

Okay so I found my issue, chartjs-zoom does not like objects as data without also setting labels yourself. Here's an example: (Only used 1 dataset while testing to make it easier to test)<br><br>
This works:

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

This does not work:

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

But this does:

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

So conclusion, when using chartjs-zoom always assign the labels beforehand instead of letting a dataset data object assign them automatically, which works just fine for normal charts without zoom. Never figured out why if I made a 2nd chart with the exact same config that chart did work though.

huangapple
  • 本文由 发表于 2023年2月8日 15:58:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/75382787.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定