Question

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

{  
   "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)
@PropertySource(value = {"classpath:local.properties", "classpath:${ENVX}.properties"}, ignoreResourceNotFound = true)

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

有什么想法吗？

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);
        }

希望这会有所帮助！

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

1 个答案: