無法使用Vue.js在Highchart中動態設置工具提示和圖例

Question

我已經在Vue.js中創建了此代碼（由於此答案 ），在其中我使用來自get請求的數據創建了一個餅圖，這是代碼。

HTML

<template v-if="this.challenge_categories.length>0">                        
  <template v-if="setOccurrences()">
    <div id="pie-container" style="min-width: 200px; height: 300px; margin: 0 auto"></div>
  </template>
</template>
<template v-else>
    <div id="pie-container" v-bind="setData([0])" style="min-width: 200px; height: 300px; margin: 0 auto"></div>
</template>

腳本VUE.JS

var app= new Vue({
    el:'#root',
    data(){
        return{
            challenge_categories:[],
            chartData: [],
            categories:[],
            teams:[],
        }
    },
    mounted(){
        this.fetchCategories();
        this.chart = this.createChart()
    },
    methods:{
        fetchCategories(){
            axios.get("/getallcategories").then(function(response){
                this.challenge_categories= response.data;
            }.bind(this));
        },

        setData(data){
              this.chartData = data
         },

         setCategories(categories){
              this.categories = categories
         },

         setOccurrences(){
             //console.log(this.challenge_categories);
             var categories_occurrences=[];
             var categories_labels=[];
             for(i=0; i<this.challenge_categories.length;i++){
                 categories_occurrences[i]= this.challenge_categories[i].occurrences;
                 categories_labels[i]= this.challenge_categories[i].category_name;
             }
             //console.log(categories_occurrences);
             //console.log(categories_labels);
             this.setData(categories_occurrences);
             this.setCategories(categories_labels);
             return true;
         },

        createChart() {
              return Highcharts.chart('pie-container', {
                  chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                  },
                  title: {
                      text: ''
                  },
                 tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                   },
                  plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.categories}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },

                   xAxis:{
                    categories:[]
                   },
                series: [{
                  data: []
                }]
              })
            }   
    },
    watch: {
        chartData(data) {
          this.chart.series[0].setData(data);
          console.log(this.chart.series[0].name);
          this.chart.redraw()
        },
        categories(categories ) {
          this.chart.axes[0].setCategories(categories);
          this.chart.redraw()
        }
      }

});

這可行，但是我無法使用添加的類別設置圖例和工具提示。 我可以看到此圖表 （不要介意50/50，這只是一個測試），我在上一個函數中嘗試過更新，但沒有任何效果嗎？ 謝謝。

Answer 1

由於代碼執行不正確，因此會發生所有問題。 首先，設置圖表類別完全不會影響圖表。 默認情況下，從每個點name屬性獲取每個切片的適當“類別”，因此您的實現方式將行不通。 您需要更改point值而不是類別。

實現它的最簡單的方法，看起來像（一步一步） -讓您的challenge_categories由愛可信 。 -在setOccurence()函數中使用新數據創建新的series數組。 -接收每個收到的類別對象，並將其解析為新系列中的新點。 之前定義的對象。 -觀察組件中series字段上的所有更改，並在更改時-用新的series對象更新圖表。

我准備了簡化的示例，顯示了應如何實施。 這里是鏈接： http : //jsfiddle.net/b2yLc1m3/1/

PS：我們有用於Highcharts的官方Vue包裝器，與使用本機方法相比，它使圖表實現過程更加容易。 我建議您看一下。 希望對您有所幫助。 這是npm軟件包的鏈接： https : //www.npmjs.com/package/highcharts-vue