vue2-无法重绘图表以定位饼图

Question

我将一个 3 饼图绘制为一个带有 VueJs 和 vue-highcharts 组件的可调整大小的容器中的单个 Highchart。为此，我需要在调整容器大小时重新定义我的饼图位置和大小。在我改变我的系列位置和大小后，我在重新绘制馅饼方面遇到了巨大的困难。下面是一些代码：

<template>
    <div class="multiple-pie-wrapper" ref="root">
        <vue-highcharts style="height: 100%; width: 100%;" :Highcharts="Highcharts" :options="options" ref="chart"></vue-highcharts>
    </div>
</template>
<script>
    import VueHighcharts from 'vue2-highcharts';
    import Highcharts from 'highcharts';
    export default {
        props: {
            options: { type: Object, required: true }
        },
        data: function () {
            return {
                Highcharts: Highcharts
            };
        },
        components: {
            VueHighcharts
        },
        methods: {
            reflow: function() {
                var series = this.options.series;
                //... Calculate the new positions and sizes and set it to
                // series[i].size and series[i].center
                // HERE IS WHERE I SHOULD REDRAW IT
            }
        },
        mounted() {
            this.reflow();
        }
    }
</script>

高图表选项：

{  
   "title":{  
      "text":"3 Pies"
   },
   "credits":{  
      "enabled":false
   },
   "exporting":{  
      "enabled":false
   },
   "series":[  
      {  
         "type":"pie",
         "data":[  
            {  
               "name":"Firefox",
               "y":45.0
            },
            {  
               "name":"IE",
               "y":26.8
            },
            {  
               "name":"Chrome",
               "y":12.8
            },
            {  
               "name":"Safari",
               "y":8.5
            },
            {  
               "name":"Opera",
               "y":6.2
            },
            {  
               "name":"Others",
               "y":0.7
            }
         ],
         "dataLabels":{  
            "enabled":false
         },
         "showInLegend":true
      },
      {  
         "type":"pie",
         "data":[  
            {  
               "name":"Firefox",
               "y":45.0
            },
            {  
               "name":"IE",
               "y":26.8
            },
            {  
               "name":"Chrome",
               "y":12.8
            },
            {  
               "name":"Safari",
               "y":8.5
            },
            {  
               "name":"Opera",
               "y":6.2
            },
            {  
               "name":"Others",
               "y":0.7
            }
         ],
         "dataLabels":{  
            "enabled":false
         },
         "showInLegend":false
      },
      {  
         "type":"pie",
         "data":[  
            {  
               "name":"Firefox",
               "y":45.0
            },
            {  
               "name":"IE",
               "y":26.8
            },
            {  
               "name":"Chrome",
               "y":12.8
            },
            {  
               "name":"Safari",
               "y":8.5
            },
            {  
               "name":"Opera",
               "y":6.2
            },
            {  
               "name":"Others",
               "y":0.7
            }
         ],
         "dataLabels":{  
            "enabled":false
         },
         "showInLegend":false
      }
   ]
}

我尝试了以下方法但没有成功：

• this.$refs.chart.chart.redraw()
• this.$refs.chart.chart.reflow()
• series[i].setData(series)

它们都没有任何影响，我的馅饼被绘制得好像中心和大小是默认的(因此，彼此重叠(。

有什么想法吗？

Answer 1

我创建了一个重新设计图形的方法。

reloadTypeSeries(){
            let pizzaCharts = this.$refs.pizzaCharts;
            let updateSeries = JSON.parse(this.updateoptions);
            let concatJson = [];
            $.each(updateSeries, function(key, value) {
                concatJson = concatJson.concat([[updateSeries[key].name, updateSeries[key].y]]);
            });
            pizzaCharts.chart.series[0].setData(concatJson, true);
        }

希望这有帮助！