[enter image description here][1]〉我正在使用Laravel Vue JS。我可以获取数据并将其分配到chartOptions.series中。主要问题是图表无法重绘。我全局声明了highcharts,这是一个将导入到 Jmeter 板中的子组件。以下是我的代码。
<template>
<div>
<highcharts :options="chartOptions"></highcharts>
</div>
</template>
<script>
export default {
data(){
return{
data:{
males: '',
females: '',
},
chartOptions: {
title:{
text: 'Applicants Account by Gender'
},
chart:{
type: 'column'
},
yAxis: {
title: {
text: 'Number of Applicant Accounts'
},
tickInterval: 2,
crosshair: true,
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside:true,
}
}
},
series: [{
name: 'Male',
data: [],
},
{
name: 'Female',
data: [],
color: 'pink',
}]
}
}
},
methods:{
async loadApplicantsPerGender(){
await axios.get("/api/dashboard/applicantsPerGender").then(res =>{
this.data.males = res.data.males;
this.data.females = res.data.females;
})
},
},
created(){
this.loadApplicantsPerGender();
setTimeout(function(){
this.chartOptions.series[0].data = this.data.males;
this.chartOptions.series[1].data = this.data.females;
}.bind(this), 3000);
}
}
</script>
输出只是一个空的图表,如下所示。[1]:https://i.stack.imgur.com/Vgxma.png
我已经尝试在highchart标记中添加:updatedArgs,但仍然不起作用,尝试使用watch()更新系列数据。
2条答案
按热度按时间64jmpszr1#
您是否尝试过 highcharts 重绘API
hmmo2u0o2#
您需要将数据调整为Highcharts所需的格式。在您的情况下,它将是:
现场演示:https://codesandbox.io/s/highcharts-vue-demo-fork-chudkw?file=/src/components/Chart.vue
API引用:https://api.highcharts.com/highcharts/series.column.data