2014-01-23 45 views
3

我正在繪製一個半甜甜圈餅圖(使用innersize和start-/endAngle)。但是我的數據標籤不在繪圖區域(中心點下方/ xAxis)之外,或者根本沒有顯示我的設置。Highcharts中的DataLabels在容器之外/不顯示


$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false 
      }, 
      title: { 
       text: '', 
       enabled: false 
      }, 
      tooltip: { 
       pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
       percentageDecimals: 1 
      }, 
      plotOptions: { 
       pie: { 
        startAngle: -90, 
        endAngle: 90, 
        center: ['50%', '100%'], 
        size: '140%', 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: true, 
         //crop: false, 
         //overflow: 'none', 
         //useHTML: true, 
         formatter: function() { 
          return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; 
         }, 
         style: { 
          width: '100px' // for line wrap on long dataLabels 
         } 
        } 
       } 
      }, 
    series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: [ 
       ['Firefox and this is very very very long name with some spaces etc.', 45.0], 
       ['IE',  26.8], 
       { 
        name: 'Chrome', 
        y: 12.8, 
        sliced: true, 
        selected: true 
       }, 
       ['Safari', 8.5], 
       ['Opera',  6.2], 
       ['Others', 0.7] 
      ] 
     }] 
     }); 
    }); 

}); 

在這裏看到:jsfiddle


使用useHTML:true, useHTML: true根本沒有任何積極的工作。

使用useHTML: true會渲染圖中的溢出dataLabels,但我的long dataLabels消失。

那麼我該如何做到這一點有以下幾點想法?

  • 我的半圓環應該總是在我的繪圖區域的底部,使用 空間(不能太小)。
  • 恰巧我有很長的數據標籤,所以定義了一個style.width,如果需要的話,似乎可以做一個換行。
  • DataLabels應該始終高於xAxis,並且不會低於我的半甜甜圈的底部。
  • DataLabels應始終顯示並使用連接器在圖表之外。

在此先感謝和問候。

回答