chartjs多行数据集性能问题

e5nqia27 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(217)

我有散点图与许多线共享一个x与多个y，它看起来像图表与许多不同颜色的独立线。
考虑带有单点的图表数据，如{x：195年0月0日0年2月：0年3月：0 y 4：0 }，由单个阵列中的数千个这样的点组成。
对于chartj，我需要为每行添加每个数据集，并对其进行解析，以确定每行应使用的确切y

const datasets = [];

    for (let i = 0; i < yCount; i++) {
        datasets.push(
            {
                data: preparedData,
                showLine: true,
                borderColor: `${COLORS[i]}`,
                fill: false,
                borderWidth: 1,
                parsing: {
                    xAxisKey: 'x',
                    yAxisKey: `y${i}`
                }
            }
        )
    }

它是有效的，但是我们在数组的每一项中放入了大量的preparedData。这极大地影响了性能。有什么解决方案吗？例如，所有数据集的单一真实源？

chart.js

来源：https://stackoverflow.com/questions/72717066/chartjs-multiple-lines-datasets-perfomance-issue

1条答案

按热度按时间

aydmsdu91#

您可以自己解析preparedData，而不是让Chart.js解析preparedData。如果您只解析x值一次，然后使用Array.map()将其分配给data.labels，则会获得轻微的改进，如下所示。

labels: preparedData.map(o => o.x)

然后，您可以从数据对象中检测所有非x属性，并将它们Map到datasets。

datasets: Object.keys(preparedData[0])
  .filter(k => k != 'x')
  .map((k, i) => ({
    label: k,
    data: preparedData.map(o => o[k]),
    showLine: true,
    borderColor: colors[i],
    tension: 0.2
  }))

请看一下下面的可运行代码，看看它是如何工作的。
第一个

赞(0）回复(0）举报 2022-11-07

我来回答

chartjs多行数据集性能问题

1条答案

相关问题

热门标签

最新问答