Question

我有一个Chartjs时间（x轴）折线图呈现的图表，需要绘制2000多个点才能平移。图表已正确设置以及平移，当我有一个小的数据集时，一切工作正常。问题是，当我的得分超过500时，摇摄变得“缓慢”。应该注意的是，工具提示对鼠标悬停事件的响应准确。

所以我的问题是，随着我添加的数据点增加，平移变得越来越慢。我相信我的问题实际上不是所有点的呈现，而是启用平移的插件（使用chartjs-plugin-zoom.js）。

到目前为止，我已经尝试使用@ neon-dev在发现的here所报告的问题上说了什么。尽管这似乎可以处理大量的多个数据集，但对于单个数据集中的许多数据点并没有什么影响（我尝试使用2k点进行测试）。

我已经花了很多时间来按照我所需的方式来设置图表，并且我并不特别喜欢离开Chartjs，但是如果找不到解决方法，可能最终不得不这样做。绝对欢迎任何可以解决此问题的js图表库建议。

我的主图表呈现如下：

    var cfg = {
    data: {
        datasets: [{
            label: chart_title,
            backgroundColor: window.chartColors.blue,
            borderColor: window.chartColors.blue,
            data: data_ar,
            type: 'line',
            pointRadius: 0,
            fill: false,
            lineTension: 0,
            borderWidth: 2
        }]
    },
    options: {
    pan: {
        enabled: true,
        mode: 'xy'
    },

    scales: {
        xAxes: [{
            type: "time",
            time: {
                unit: 'day',
                displayFormats: {
                    day: 'MMM DD',
                },
            },
            ticks: {
                fontColor: "black",
                fontSize: 12,
                fontStyle: "normal",
                fontFamily: "Segoe UI",
            },
        }],
        yAxes: [{
            scaleLabel: {
                display: false
            }
        }]
    },
        tooltips: {
            mode: 'index', //interpolate
            intersect: false
        },
        plugins: {

        },
    }
};

请注意，data_ar是一个包含所有2,000点的数组。任何帮助都将受到赞赏。

ChartJS：在使用大量数据点（> 2k）进行平移时，如何阻止图表变慢？

0 个答案: