【发布时间】：2021-03-21 19:54:29
【问题描述】：
使用 Vue.js 3 在 Highcharts 中更新数据时遇到问题
我有一个带有 Vue.js 3 的小型 web 应用程序，它显示了一个 Highcharts 图表和一些统计数据，以及用于时间过滤器的全局按钮（全部、年、月、周）。
每当按下某个全局按钮时，我的 Highchart 图表的数据都需要更改。
我为 Highcharts 使用了这个 vue3 包装器：Wrappers Github
显示初始数据（全部）就像一个魅力，但在更新数据时，它真的很慢。这让我觉得我在更新数据方面做错了。
我在 YT 上上传了我的问题视频：https://youtu.be/GEjHqoAElgI
此外，我在代码和框上创建了一个最小可重现示例：https://codesandbox.io/s/blissful-goldwasser-zq8je?fontsize=14&hidenavigation=1&theme=dark
它由一个 Chart.vue 组件组成，当按钮更新时，它的属性“数据”会更新按下“更新数据”。该按钮可以多次切换，并且总是需要几秒钟才能更新图表。
尝试为我的组件与图表提供数据作为属性，并在该数据上设置一个观察者，以便在数据更改时更新图表。 这可行，但更新图表需要很长时间（3-5 秒）。 这样做的推荐方法是什么？
这是我的组件：
<template>
<VueHighcharts
class="hc"
:options="options"
:deepCopyOnUpdate="true"
:redrawOnUpdate="true"
:oneToOneUpdate="false"
:animateOnUpdate="false"
/>
</template>
<script>
import VueHighcharts from "vue3-highcharts";
export default {
name: "CoinChart",
components: {
VueHighcharts,
},
props: {
stats: [Object],
},
data() {
return {
options: {
title: {
text: "Coins",
},
series: [
{
name: "ETH",
data: [],
},
{
name: "BTC",
data: [],
},
],
},
};
},
watch: {
stats: {
immidiate: true, // as pointed out in the commments, this line does not do anything
handler: function (val) {
// create data for chart
const eth = new Array();
const btc = new Array();
this.options.series[0].data = [];
this.options.series[1].data = [];
for (let i in val) {
eth.push([val[i].time * 1000, val[i].coinsPerHour]);
btc.push([val[i].time * 1000, val[i].btcPerHour]);
}
// set to chart
this.options.series[0].data = eth;
this.options.series[1].data = btc;
},
},
},
};
</script>
这让我发疯，今天花了 4 个小时试图修复它，但没有成功。甚至考虑过切换到 Chart.js，但显然也没有真正支持 Vue.js 3。
【问题讨论】：
-
为了提高性能，必须能够调试和跟踪代码。我们无法调试或跟踪您在视频中展示的代码。考虑在codesanbox.io 或类似网站上创建minimal reproducible example，确保报告的问题是可重现的。另请注意
watch属性没有immidiate属性。如果您使用 IDE，它会突出显示错字。 -
@tao 谢谢你的回复。我在原始帖子中添加了一个最小的可重现示例：codesandbox.io/s/… 我认为我在有问题的组件中犯了一个小错误，并认为只发布上面的代码就足够了。该视频只是为了澄清问题，而不是在我的代码中追踪错误:)
-
导致问题的代码行是您在图表上设置数据时。所以，看起来图表的更新速度很慢，这可能只是 VueHighcharts 进行更新的方式，它确实有一些提高性能的选项，但似乎没有帮助。
-
是的，这就是我在穴居人 console.log 调试中发现的 ^^ 我想我可能只是错过了一些东西，因为我对 Vue 或 Highcharts 都不是很有经验。所以减少我放入图表的数据量可能更容易？如果 Chart.js 可以更好地处理这个问题，这里有没有人有经验？虽然我可能需要将我的项目降级到 Vue.js 2 for Chart.js，因为还没有对 Vue.js 3 的真正支持。
-
也许，但看起来很奇怪。不确定是否可能，但如果你可以隐藏和显示系列，也许你可以添加所有 4 个系列，然后将它们关闭和打开
标签： javascript vue.js charts highcharts vuejs3