如何在Vue上下文中动态添加点到条形图/饼图?

时间:2018-03-30 08:39:28

标签: javascript highcharts vue.js

我想引导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;
&#13;
&#13;

我试图在Vue上下文中复制它,但图表永远不会更新

&#13;
&#13;
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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

看来调用Highlights.chart会立即查询DOM,因此在调用Vue的mounted回调之前这样做会失败,因为该元素尚未存在。那,或者它被Vue的渲染覆盖。相反,您希望在 Vue挂载后调用该函数

作为奖励,这是一个小小的演示(我有太多的乐趣),它展示了图书馆如何与Vue一起玩。当相应的属性发生变化时,它使用watcher重绘图表。

&#13;
&#13;
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;
&#13;
&#13;