时间戳

首页 > 解决方案 > 无法使用 Vue.js 在 Highchart 中动态设置工具提示和图例

javascript - 无法使用 Vue.js 在 Highchart 中动态设置工具提示和图例

问题描述

我已经在 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，这只是一个测试）我在上一个函数中尝试了更新，但这没有用，知道吗？谢谢。

标签： javascriptvue.jshighcharts

解决方案

您的所有问题都是由于您的代码执行不正确而发生的。首先，设置图表类别根本不会影响图表。默认情况下，每个切片的适当“类别”取自每个点name属性，因此您的实现方式将不起作用。您需要更改point值而不是类别。

实现它的最简单方法看起来（逐步）如下： -challenge_categories通过axios获取您的。- 在您的函数中使用新数据创建新series数组。setOccurence()- 获取每个接收到的类别对象，并将其解析为新系列中的新点。之前定义的对象。- 查看组件中字段的所有更改，并在更改时 - 使用新对象series更新图表。series

我准备了简化的例子来展示它应该如何实现。这是链接：http: //jsfiddle.net/b2yLc1m3/1/

PS 我们有 Highcharts 的官方 Vue 包装器，这使得图表实现过程比使用原生方法更容易。我建议你看看那个。我希望它会对你有很大帮助。这是npm包的链接：https ://www.npmjs.com/package/highcharts-vue

推荐阅读