Highcharts饼图空时显示轮廓

Question

我目前在我的报告仪表板上成功显示饼图。但是，业务请求保留了图表轮廓，并在所有系列都为空时在中心显示“noData”消息。

当图表为空时，业务不喜欢页面上浮动标签的外观。使用现有的图表对象，是否有可能基本上制作图表轮廓并显示noData消息？

Answer 1

可以添加自定义形状，例如，如果没有数据，将会显示这个圈子。使用图表的事件加载和重绘，您可以更新形状以适合图表并置于中心位置，或在数据添加到图表时删除。

为renderer.circle API参考：http://api.highcharts.com/highcharts#Renderer.circle

实施例：http://jsfiddle.net/v8n1159o/1/

chart: { 
     events: { 
      load: function() { 
       var chart = this; 
       if (!chart.hasData()) { 
        var r = Math.min(chart.plotWidth/2, chart.plotHeight/2), 
         y = chart.plotHeight/2 + chart.plotTop, 
         x = chart.plotWidth/2 + chart.plotLeft; 
        chart.pieOutline = chart.renderer.circle(x, y, r).attr({ 
         fill: '#ddd', 
         stroke: 'black', 
          'stroke-width': 1 
        }).add(); 
       } 
      }, 
      redraw: function() { 
       var chart = this; 
       if (chart.pieOutline && chart.pieOutline.element) { 
        if (chart.hasData()) { 
         chart.pieOutline.destroy(); 
        } else { 
         var r = Math.min(chart.plotWidth/2, chart.plotHeight/2), 
          y = chart.plotHeight/2 + chart.plotTop, 
          x = chart.plotWidth/2 + chart.plotLeft; 
         chart.pieOutline.attr({ 
          cx: x, 
          cy: y, 
          r: r 
         }); 
        } 
       } else if(!chart.hasData()) { 
        var r = Math.min(chart.plotWidth/2, chart.plotHeight/2), 
         y = chart.plotHeight/2 + chart.plotTop, 
         x = chart.plotWidth/2 + chart.plotLeft; 
        chart.pieOutline = chart.renderer.circle(x, y, r).attr({ 
         fill: '#ddd', 
         stroke: 'black', 
          'stroke-width': 1 
        }).add(); 
       } 
      } 
     }, 
...