Question

正如标题所说。 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
        }]
    }],
}); 
});

Answer 1

要为单个饼图切片（切片外部的值和内部百分比）提供两个单独的值，您在图表定义中需要两个不同的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/

High Charts PieChart如何在

1 个答案: