設置餅圖標籤確切地在PIE切片中心高圖

我在我的一個項目中使用了highcharts。 Highcharts JQuery版本正在使用，下面是參考：設置餅圖標籤確切地在PIE切片中心高圖

http://code.highcharts.com/highcharts.js

代碼用於繪製圖表如下：

$(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type:'pie' 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr'] 
     }, 

     plotOptions: { 
      series: { 
       dataLabels: { 
        enabled: true, 
        formatter: function() { 
         return Math.floor(this.percentage*100)/100 + ' %'; 
        }, 
        distance: 20, 
        connectorWidth : 0, 
        color: 'rgb(0, 127, 209)' 
       } 
      } 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2,29.9, 71.5, 106.4, 
        129.2,29.9, 71.5, 106.4, 129.2]   
     }] 
    }); 
});

的問題在這裏，我面臨着片標籤到處跑。我希望每個切片的中心都有精確的標籤。

JS小提琴鏈接，演示是PIE Chart JSFiddle

來源

2015-04-16 Gags

如果數據標籤是太大，不適合在片應該怎麼辦？ – user2345998

它應該保持在切片的中間甚至...... – Gags

最簡單的，但不是精確的方法是設置負的距離爲dataLabels。距離值與圖表大小有關，因此可以更新負載（啓動正確位置）和重繪（更改圖表大小後）事件的序列（使用dataLabels的新距離）。

將每個dataLabel放置在切片中心的精確解決方案可以基於獲取切片的中心並在其中放置標籤。爲了保持圖表響應，應該在每次更改圖表大小後執行標籤位置的調整 - 在圖表的加載和重繪事件中。

例子：http://jsfiddle.net/mo8dfztx/2/

function redrawDatalabels() { 
    var chart = this, 
     cX = chart.series[0].center[0], 
     cY = chart.series[0].center[1], 
     shapeArgs, ang, posX, posY, bBox; 

    Highcharts.each(chart.series[0].data, function (point, i) { 
     if (point.dataLabel) { 
      bBox = point.dataLabel.getBBox(); 
      shapeArgs = point.shapeArgs; 
      ang = (shapeArgs.end - shapeArgs.start)/2 + shapeArgs.start; 
      posX = cX + (shapeArgs.r/2) * Math.cos(ang); 
      posY = cY + (shapeArgs.r/2) * Math.sin(ang); 

      point.dataLabel._pos.x = posX + ((point.labelPos[6] == "right" ? (1) : (-1)) * bBox.width/2); 
      point.dataLabel._pos.y = posY - bBox.height/2; 
     } 
    }); 
    chart.series[0].placeDataLabels(); 
} 

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false, 
      events: { 
       load: redrawDatalabels, 
       redraw: redrawDatalabels 
      } 
     }, 
     title: { 
      text: 'Browser market shares at a specific website, 2014' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        connectorWidth: 0, 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
        style: { 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
        } 
       } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: [ 
       ['Firefox', 50], 
       ['IE', 50], 
       ['Safari', 25], 
       ['Opera', 25] 
      ] 
     }] 
    }); 
});

來源

2015-04-16 10:46:21

它看起來像，有沒有內置的功能來做到這一點。我認爲您必須使用負距離，並且如果圖表大小發生變化，則必須計算新距離以使標籤位於切片的中心。

你可以在加載事件中處理這個。這裏有一個簡單的例子，你可以細化，以滿足您的需求是什麼：

http://jsfiddle.net/uhydP/317/

events: { 
     load: function(e) { 
      this.options.plotOptions.series.dataLabels.distance = (this.chartHeight/5.5) * -1; 
      this.series[0].update(this.options); 
     } 
    }

來源

2015-04-16 10:19:39 user2345998

設置餅圖標籤確切地在PIE切片中心高圖

回答

相關問題