Highcharts饼图数据标签内外

我想饼图里面和外面的数据标签饼图。我知道，它具有负距离，它显示了馅饼内的标签。但我想要它内外。外面我想显示的百分比，并在该点的总和内。Highcharts饼图数据标签内外

2012-11-21 Marcus Wolf

请显示一些代码。 – FrediWeber

这篇文章可能对你有用https://stackoverflow.com/questions/15235666/highcharts-pie-chart-add-text-inside-each-slice/29063822#29063822 – TechnoCrat

您不可能设置双倍的数据标签，但是您可以使用解决方法，这并不完美，但可能会有所帮助。所以你可以设置useHTML，然后在formater中返回两个div，第一个适当的datalabel（外部），第二个用inside。然后将id设置为counter，将每个div的id定义为唯一，那么只需要设置合适的CSS。位置的一个datalabel的实例是可在这里：http://jsfiddle.net/4RKF4/

$(function() { 
var chart, 
    counter = 0; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: 'Browser market shares at a specific website, 2010' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
      percentageDecimals: 1 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        useHTML:true, 
        formatter: function() { 
         counter++; 
         return '<div class="datalabel"><b>'+ this.point.name +'</b>: '+ this.percentage +' %</div><div class="datalabelInside" id="datalabelInside'+counter+'"><b>'+ this.point.name +'</b>: '+ this.percentage +' %</div>'; 
        } 
       } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: [ 
       ['Firefox', 45.0], 
       ['IE',  26.8], 
       { 
        name: 'Chrome', 
        y: 12.8, 
        sliced: true, 
        selected: true 
       }, 
       ['Safari', 8.5], 
       ['Opera',  6.2], 
       ['Others', 0.7] 
      ] 
     }] 
    }); 
});

}）;

CSS样式：

.datalabelInside { 
position:absolute; 
} 

#datalabelInside1 { 
color:#fff; 
left:-150px;

}

来源

2013-02-21 08:56:11

我测试了铬和你的小提琴不工作，实际上。只有在我身边？ –

有它

一个轻松的工作以防万一被你覆盖2馅饼diferent datalabels

http://jsfiddle.net/4RKF4/29/

$(function() { 


     // Create the chart 
     $('#container').highcharts({ 
      chart: { 
       type: 'pie', 
       backgroundColor: 'rgba(0,0,0,0)', 
       y:100 

      }, 
      title: { 
       text: 'sfs ' 
      }, 
      yAxis: { 
       title: { 
        text: ' ' 
       } 
      }, 
      plotOptions: { 
       pie: { 
//     y:1, 
        shadow: false, 
//     center: ['50%', '50%'], 
        borderWidth: 0, 
        showInLegend: false, 
        size: '80%', 
        innerSize: '60%' 
        , 

        data: [ 
         ['allo', 18], 
         ['asdad', 14], 
         ['asdad', 11], 
         ['asdasd', 10], 
         ['adad', 8], 
         ['asdada', 7], 
         ['adada ada', 7], 
         ['adad', 5], 
         ['asdas',7], 
         ['ada', 3] 

        ] 
       } 
      }, 
      tooltip: { 
       valueSuffix: '%' 
      }, 
      series: [ 
       { 
        type: 'pie', 
        name: 'Browser share', 

        dataLabels: { 
         color:'white', 
         distance: -20, 
         formatter: function() { 
          if(this.percentage!=0) return Math.round(this.percentage) + '%'; 

         } 
        } 
       }, 
       { 
        type: 'pie', 
        name: 'Browser share', 

        dataLabels: { 
         connectorColor: 'grey', 
         color:'black', 
//       y:-10, 
         softConnector: false, 
         connectorWidth:1, 
         verticalAlign:'top', 
         distance: 20, 
         formatter: function() { 
          if(this.percentage!=0) return this.point.name; 

         } 
        } 
       } 
      ] 
     }); 
    });

来源

2013-11-28 07:06:14 user3044742

Highcharts饼图数据标签内外

回答

相关问题