如何在 Vue 上下文中向條形圖/餅圖動態添加點？

Question

我想引導一個 Highcharts 條形圖，然后向它添加一些點（在 Vue 容器中）。 文檔提到addPoint() 、 setData()和update()作為實現這一目標的手段，但我嘗試的所有咒語都沒有奏效。

更新后餅圖的演示使使用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>

我試圖在 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() } })

 <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>

Answer 1

似乎調用Highlights.chart會立即查詢 DOM，因此在調用 Vue 的mounted回調之前這樣做會失敗，因為該元素尚不存在。 那，或者它被 Vue 的渲染覆蓋。 相反，您需要在 Vue 掛載后調用該函數。

作為獎勵，這里有一個小演示（我玩得太開心了），它展示了該庫如何與 Vue 一起使用。 當相應的屬性發生變化時，它使用觀察器重繪圖表。

 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() } } })

 <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>

Answer 2

您可以使用 highcharts-vue，它是 highcharts 庫的包裝器。 以下是依賴項：“highcharts”：“6.1.0”、“highcharts-vue”：“1.0.4”、“vue”：“^2.5.2” Demo - https://codesandbox.io/s/ highcharts-vue-demo-forked-ewn4n