这是我的VueJS代码,我使用这个库https://www.npmjs.com/package/highcharts-vue,所以我不知道如何在绘制图形之前获取数据并将其设置为系列。或者如果这是不可能的,我如何才能正确地重新绘制图形?因为现在我设置了一些默认数据,然后从页面获取数据,并重新绘制图形,但当它完成后,我看到我的图形,滚动条移到左边,范围很小。2那么如何设置选项而不改变滚动条和范围选择器呢?
<template>
<highcharts :constructor-type="'stockChart'" :options="options" :updateArgs="[true, false]" ref="linerchart"></highcharts>
</template>
<script>
import {Chart} from 'highcharts-vue'
import Highcharts from 'highcharts'
import stockInit from 'highcharts/modules/stock'
stockInit(Highcharts)
export default {
data: () => ({
obj: [],
names: ['CAFF'],
options: {
credits: { enabled: false },
rangeSelector: {
selected: 1,
inputEnabled: false,
buttonTheme: {
visibility: 'visible'
}
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent',
showCheckbox: false,
events: {
checkboxClick: function (event) {
if (event.checked) {
this.show();
} else {
this.hide();
}
}
}
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> USD<br/>',
split: true
},
series: [{
name: "CAFF",
data: [1,2,3,4,5,6]
}]
}
}),
methods: {
linerGraph() {
var that = this;
this.names.forEach(function(name, i){
axios.get('/test/account/CAFF')
.then(response => {
console.log(response.data)
that.obj.push({name: name, data: response.data});
});
});
this.options.series = that.obj
},
},
components: {
highcharts: Chart
},
mounted() {
console.log(this.$refs.linerchart)
this.linerGraph();
}
}
</script>
1条答案
按热度按时间lvmkulzt1#
您应该使用其他VueJS生命周期挂钩点来运行
axios
请求,因为您试图在组件已经是mounted()
的情况下下载它,所以请尝试使用该挂钩点之前的一个挂钩点,例如created()
。以下是Vue常规文档中的生命周期图: