我想引导Highcharts条形图,然后向它添加一些点(在Vue容器中)。该文档提到addPoint()
,setData()
和update()
是实现这一目标的手段,但我尝试过的咒语都没有。
更新后的饼图的demo使其易于使用setData()
:
var chart = Highcharts.chart('container', {
chart: {
type: 'pie'
},
series: [{
data: []
}]
});
// the button action
$('#button').click(function() {
chart.series[0].setData([129.2, 144.0, 176.0]);
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Set new data</button>
&#13;
我试图在Vue上下文中复制它,但图表永远不会更新
var chart = Highcharts.chart('container', {
chart: {
type: 'pie'
},
series: [{
data: []
}]
});
new Vue({
el: "#app",
data: {},
mounted() {
chart.series[0].setData([129.2, 144.0, 176.0]);
chart.redraw()
}
})
&#13;
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div id="container" style="height: 400px"></div>
</div>
&#13;
答案 0 :(得分:2)
看来调用Highlights.chart
会立即查询DOM,因此在调用Vue的mounted
回调之前这样做会失败,因为该元素尚未存在。那,或者它被Vue的渲染覆盖。相反,您希望在 Vue挂载后调用该函数。
作为奖励,这是一个小小的演示(我有太多的乐趣),它展示了图书馆如何与Vue一起玩。当相应的属性发生变化时,它使用watcher重绘图表。
function createChart() {
return Highcharts.chart('container', {
chart: {
type: 'pie'
},
series: [{
data: []
}]
})
}
new Vue({
el: "#app",
data: {
chartData: []
},
mounted() {
this.chart = createChart()
this.setData([100, 100, 100])
},
methods: {
setData(data){
this.chartData = data
}
},
watch: {
chartData(data) {
this.chart.series[0].setData(data)
this.chart.redraw()
}
}
})
&#13;
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<button @click="setData([129.2, 144.0, 176.0])">Show First Dataset</button>
<button @click="setData([180, 100.0, 20.0])">Show Second Dataset</button>
<div id="container" style="height: 400px"></div>
</div>
&#13;