高圖餅圖我如何在片段和標籤名稱外顯示點值

正如標題所示。 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 
     }] 
    }], 
}); 
});

來源

2016-08-02 Barry Hamilton

爲了有一個餅圖切片（切片和百分比內之外的值）兩個獨立的價值，您需要在您的圖表定義兩個不同的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/

來源

2016-08-02 18:55:21

謝謝醫生酷派，在的jsfiddle中心值的背景顏色是不見了。。當我把它添加中央價值標籤消失。 –

是的，我修好了。 ''series''數組中有3個項目。中間的「總」圓不能是第一個，因爲灰色被其他項隱藏。只需將它移動到數組的第二或第三個索引處即可。 –

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

高圖餅圖我如何在片段和標籤名稱外顯示點值

回答

相關問題