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

【问题标题】：vue2-highcharts - Cannot redraw chart to position piesvue2-highcharts - 无法重绘图表以定位饼图
【发布时间】：2018-07-13 03:47:51
【问题描述】：

我正在使用 VueJs 和 vue-highcharts 组件在可调整大小的容器中将 3 饼图绘制为单个 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>

highchart 选项：

{  
   "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)

它们都没有任何效果，我的馅饼被绘制成好像中心和大小是默认的（因此，相互重叠）。

有什么想法吗？

【问题讨论】：

我在您的选项中没有看到 pie.center。你需要告诉 Highcharts 饼图应该放在哪里，例如：type: 'pie', center: ['25%', '50%'] ...
这是在运行时在我的reflow() 方法上处理的。这正是问题所在：一旦处理完毕，它就不会用处理过的中心（也不是大小）重绘图表
哦，我明白了，很抱歉我错过了您代码中的评论。在reflow() 方法中，您应该使用：this.$refs.chart.chart.series[i].update({ center: [ ... ] });

标签： highcharts vue.js

【解决方案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);
        }

希望这会有所帮助！

【讨论】：