javascript - 如何在 Vue 上下文中动态向条形图/饼图添加点？

Question

我想引导一个 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>

我尝试在 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 一起使用。它使用 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()
    }
  }
})

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