设置饼图标签确切地在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切片中心高图

回答

相关问题