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

问题描述

我想引导Highcharts条形图，然后在其中添加一些点(在Vue容器中).该文档提到 addPoint() ， setData() 和update()作为实现此目标的方法，但我尝试过的所有方法均无济于事

I would like to bootstrap a Highcharts bar chart and later add some points to it (in a Vue container). The documentation mentions addPoint(), setData() and update() as means to achieve that, but none of the incantations I tried worked.

演示(用于更新后的饼图)可以轻松使用setData():

The demo for a post-updated pie chart makes it simple to use 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上下文中复制它，但是图表从未更新

I tried to replicate this in a Vue context but the chart is never updated

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>

推荐答案

看来，调用Highlights.chart会立即查询DOM，因此在调用Vue的mounted回调之前这样做会失败，因为该元素不存在然而.那样，或者被Vue的渲染所覆盖.相反，您需要在Vue挂载后调用 函数.

It appears that calling Highlights.chart queries the DOM immediately, so doing so before Vue's mounted callback is called will fail, since the element doesn't exist yet. That, or it gets overwritten by Vue's rendering. Instead, you'll want to call that function after Vue has mounted.

作为奖励，这是一个小演示(我对此非常有意思)，显示了库如何与Vue一起播放.当相应的属性更改时，它使用 watcher 重绘图表.

As a bonus, here's a little demo (that I had way too much fun with) which shows how the library can play along with Vue. It uses a watcher to redraw the chart when the corresponding property is changed.

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>

这篇关于如何在Vue上下文中向条形图/饼图动态添加点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！