如何在vuejs中拥有多个不同系列数据的highcharts而不重复代码
如何在vuejs中拥有多个不同系列数据的highcharts而不重复代码
提问于 2020-05-27 15:08:27
我希望在我的页面中有多个不同数据的highchart，而不必重复highchart代码。
下面是我如何定义我的高度表
chartOptions: {
chart: {
type: "pie"
},
title: {
text: ""
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: "pointer",
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [
{
name: 'Comparison',
data: [],
},
]
},我把它叫做html，就像这样-
<highcharts :options="chartOptions" id="chart1"></highcharts>我使用事件总线侦听器将数据发送到highchart系列
EventBus.$on("btn-clicked", data => {
this.chartOptions.series[0].data = data.newData;
});因为我使用的是highchart-vuejs包装器，所以我可以重复highchart，但是所有的图表都会得到相同的data.Is，这样我就可以把数据发送到一个特定的图表，这样它就不同于其他图表了？
回答 1
Stack Overflow用户
发布于 2020-05-27 16:12:01
您正在将chartOptions传递给highcharts组件。如果您已经在父组件上定义了此数据，Vue将使其具有响应性，因此当您更改数据时，图表将自动更新。
下面是一个基本的例子，说明了它是如何工作的：
<template>
<div>
<highcharts :options="chartOptions[0]"></highcharts>
<highcharts :options="chartOptions[1]"></highcharts>
<button @click="changeData">Change data for first chart</button>
</div>
</template>
<script>
import { Chart } from "highcharts-vue";
export default {
components: {
highcharts: Chart
},
data() {
return {
chartOptions: [
{
series: [
{
data: [1, 2, 3]
}
]
},
{
series: [
{
data: [4, 5, 6]
}
]
},
]
}
},
methods: {
changeData() {
this.chartOptions[0].series[0].data = [4, 8, 1];
}
}
};
</script>编辑：
要创建具有相同选项的多个图表，您可以创建自定义图表组件，并仅将数据系列作为属性进行传递：
<template>
<highcharts :options="chartOptions"></highcharts>
</template>
<script>
import { Chart } from "highcharts-vue";
export default {
name: 'CustomPie',
components: {
highcharts: Chart
},
props: ['data'],
data() {
return {
chartOptions: {
chart: {
type: "pie"
},
title: {
text: ""
},
credits: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: "pointer",
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [
{
name: 'Comparison',
data: this.data,
},
]
},
}
},
watch: {
data(newVal) {
this.chartOptions.series[0].data = newVal;
}
}
};
</script>请注意，您必须在data属性上设置一个监视器，以便在数据更改时更新组件chartOptions。
而您的父组件(显示图表的位置)将如下所示：
<template>
<div>
<CustomPie :data="chartData1" />
<CustomPie :data="chartData2" />
<button @click="changeData">Change data for first chart</button>
</div>
</template>
<script>
import CustomPie from "./CustomPie";
export default {
components: {
CustomPie
},
data() {
return {
chartData1: [1,2,3],
chartData2: [4,5,6]
}
},
methods: {
changeData() {
this.chartData1 = [4, 8, 1];
}
}
};
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62037322
复制相关文章
相似问题
腾讯云开发者
