高图饼图我如何在片段和标签名称外显示点值

问题描述：

正如标题所示。 https://jsfiddle.net/4wrLampu/5/高图饼图我如何在片段和标签名称外显示点值

我有一个简单的一系列数据饼图和一个中央饼显示总数。

我希望数据名称和值保持原样位于段外，但我也希望显示段中心的段的百分比值。

这是可能的高图表，这将是最直接的路线来实现这一目标？

对于那些不想查看jsfiddle的人来说，这是当前图表的代码。

$(document).ready(function($) { 
$('#pieChart').highcharts({ 
    credits: { 
    enabled: false 
    }, 
    chart: { 
     renderTo: 'container', 
     type: 'pie', 
     marginTop: 20, 
      marginRight: 10, 
      marginLeft: 10, 
      marginBottom: 20, 
     spacingTop: 0, 
     spacingBottom: 0, 
     spacingLeft: 0, 
     spacingRight: 0, 
    }, 
     plotOptions: { 
      pie: { 
       size:'100%', 
       center: ['50%', '50%'], 
       borderWidth: 0, 
      dataLabels: { 
       enabled: true, 
       distance: 0, 
        color: '#333333', 
        formatter: function() { 
          return '<b>'+ this.point.name +'</b>: <br/>'+  this.point.y; 
         } 
      }, 
      } 
     }, 

    title: { 
     text: 'Your Repayment' 
    }, 
    series: [{ 
     type: 'pie', 
     name:'Total', 
     size: '39%', 
     dataLabels: { 
      enabled: true, 
      distance: -30, 
      y: -50, 
      color: '#ccc', 
     style: { 
     fontSize: "18px", 
     fontFamily: "Arial, sans-serif", 
     fontWeight: "normal" 
     }, 
     labelFormatter:function() { 
    return '<span style="margin-top:-30px;">'+this.name+'<span>'+' $'+this.y; 
} 
     }, 
     data:[{ 
      name: 'Total', 
      color:'#B2B2B2', 
      y:1309 
     }] 
    }, 
    { type: 'pie', 
     name: 'My Pie Chart', 
     colorByPoint: true, 
     size: '80%', 
    innerSize: '50%', 
     data:[{ 
      name: 'Value Name 1', 
      color:'#72BB32', 
      y: 984 
     },{ 
      name:'Value Name 2', 
      color:'#F1E52B', 
      y: 250 
     },{ 
      name:'Value Name 3', 
      color:'#A67461', 
      y: 75 
     }] 
    }], 
}); 
});

答

为了有一个饼图切片（切片和百分比内之外的值）两个独立的价值，您需要在您的图表定义两个不同的series对象。每个人都会有不同的dataLabels。

基本上，你会想这个额外的对象添加到series阵列：

{ 
    type: 'pie', 
    name: 'My Pie Chart', 
    size: '90%', 
    dataLabels: { 
    distance: -50, 
    formatter: function() { 
     if (this.percentage != 0) return Math.round(this.percentage) + '%' 
    } 
    } 
}

见的jsfiddle的工作版本：https://jsfiddle.net/bb83f2by/

谢谢医生酷派，在的jsfiddle中心值的背景颜色是不见了。。当我把它添加中央价值标签消失。 –

是的，我修好了。 ''series''数组中有3个项目。中间的“总”圆不能是第一个，因为灰色被其他项隐藏。只需将它移动到数组的第二或第三个索引处即可。 –

https://jsfiddle.net/bb83f2by/5/ –

高图饼图我如何在片段和标签名称外显示点值

相关推荐