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(); 
       } 
      } 
     }, 
...