Highcharts - 我怎樣才能得到名稱顯示在餡餅楔子？

Question

我已經創建了一個餅圖並且正在運行，並且我正在處理的客戶端正在請求顯示在工具提示懸停中的名稱位於餅形楔中，以便在打印出名稱時出現。我已經使用PNG疊加圖表，沒有運氣嘗試，試圖distance: -60和

dataLabels: {inside: true,} 

但沒有人迴應。我昨天在這裏問過，有人提到highcharts-more.src.js文件中有一行代碼：「列對齊列數據標籤＃1199」。 - 無論如何，我可以在下面的JS中指定數據標籤或名稱在這種情況下出現在餅圖片中？

JS：

$(function() { 

     $('#container').highcharts({ 

      chart: { 
       polar: true 
      }, 

      title: { 
       text: 'Chart' 
      }, 

      pane: { 
       startAngle: 0, 
       endAngle: 360 

      }, 
      xAxis: { 
       tickInterval: 45, 
       min: 0, 
       max: 360, 
       labels: { 
        formatter: function() { 
         return; 
        } 
       } 
      }, 



      yAxis: { 
       min: 0 
      }, 

      plotOptions: { 
       series: { 
        pointStart: 0, 
        pointInterval: 45, 
        dataLabels: { 
         inside: true, 
         offset: -100, 
         formatter: function() { 
          if(this.y !== 0) { 
           return this.y.toFixed(1); 
          } 
         } 
        } 
       }, 
       column: { 
        grouping: false, 
        pointPadding: 0, 
        groupPadding: 0 
       } 
      }, 

      colors: [ 
       '#FFD700', 
       '#458B00', 
       '#0099CC'], 

      series: [ 

      { 
       type: 'column', 
       name: 'Behaviour', 
       shadow: true, 
       data: [ 
         {y:0}, 
         {y:0}, 
         {y:0}, 
         {y: 78, name: 'Be Deliberate', inside: true}, 
         {y: 82, name: 'Consistent, reliable', inside: true}, 
         {y:0}, 
         {y:0}, 
         {y:0} 
        ], 
       dataLabels: {     
        enabled: true, 
        inside: true, 
        verticalAlign: 'top', 
        color: '#333333' 
       } 
      }, { 
       type: 'column', 
       name: 'Communication', 
       shadow: true, 
       data: [ 
        {y:0}, 
        {y:0}, 
        {y:0}, 
        {y:0}, 
        {y:0}, 
        {y: 80, name: 'Listen empathy'}, 
        {y: 76, name: 'Communicate clear'}, 
        {y: 88, name: 'Be honest transparent'}], 
       dataLabels: { 
        enabled: true, 
        inside: true, 
        color: '#333333' 
       } 
      }, { 
       type: 'column', 
       name: 'Action', 
       data: [ 
         {y: 60, name: 'Act in clients best interests'}, 
         {y: 70, name: 'Commit to do right thing'}, 
         {y: 68, name: 'Deliver on promise'}, 
         {y:0}, 
         {y:0}, 
         {y:0}, 
         {y:0}, 
         {y:0} 
        ], 
       shadow: true, 
       groupPadding: 0, 
       pointPlacement: 'on', 
       dataLabels: { 
        enabled: true, 
        inside: true, 
        distance: -60, 
        color: '#333333' 
       } 
      }] 

     }); 
    }); 

HTML：

<div id="container" style="min-width: 810px; max-width: 900px; height: 900px; margin: 0 auto"></div> 

這裏有一個fiddle，任何人都可以幫忙嗎？

Answer 1

您擁有正確的位置，但您的return從未包含您需要的文字。 嘗試：

dataLabels: { 
    inside: true, 
    offset: -100, 
    formatter: function() { 
     if (this.y !== 0) { 
      return this.key + ' - ' + this.y.toFixed(1); 
     } 
    } 
} 

如果添加return修改，你會看到在工具提示相同的文字出現在dataLabel ......你現在還看怎麼說也是比較難看給你試圖文本的長度渲染。整個地方都有重疊。你可以嘗試通過讓dataLabels進一步移出酒吧（這是一個酒吧，而不是一個餅形圖，因爲這是一個極座標圖而不是餅圖）來減輕這種影響。你可以嘗試更多的格式，但我認爲這會變得更快。