jquery – HighCharts饼图 – 在每个切片中添加文本

我正在使用代表资产分配的HighCharts创建一个金融饼图.我的目标是创建一个表示每个切片中实际分配值的图表,但每张幻灯片内部将显示第二个数据标签,该标签显示各种投资工具的目标百分比.值得注意的是,当前的资产配置可能并不总是与目标分配值相匹配.

除了每张幻灯片中的Target标签外,我已经完成了所有工作.请参阅下图,了解我想要完成的任务：

这是我到目前为止：

var asset_allocation_pie_chart = new Highcharts.Chart({
            chart: { renderTo: 'asset_allocation_bottom_left_div' },title: { text: 'Current Asset Allocation',style: { fontSize: '17px',color: entity_color,fontWeight: 'bold',fontFamily: 'Verdana'} },subtitle: { text: '(As of ' + effective_date_formatted + ')',style: { fontSize: '15px',fontFamily: 'Verdana',marginBottom: '10px' },y: 40 },tooltip: { pointFormat: '{series.name}: <b>{point.percentage}%</b>',percentageDecimals: 0 },plotOptions: {
                pie: { allowPointSelect: true,cursor: 'pointer',dataLabels: { enabled: true,color: '#000000',connectorWidth: 1,connectorColor: '#000000',formatter: function() { return '<b>' + this.point.name + '</b>:<br/> ' + Math.round(this.percentage) + ' %'; } } }
            },series: [{
                type: 'pie',name: 'Asset Allocation',data: [['Investment Grade Bonds',InvestmentGradeBondPercentage],['High Yield Bonds',HighYieldBondPercentage],['Hedged Equity',HedgedEquityPercentage],['Global Equity',GlobalEquityPercentage],['Cash',CashPercentage]]
            }],exporting: { enabled: false },credits: { enabled: false }
       });

解决方法

这是用于此的 jsfiddle和用于显示内部和外部数据标签的代码.

为了达成这个

>你需要给出两个饼图系列.一个人会在前面看,另一个人在后面.
>如果你想模拟它然后改变大小：’80％’.
>距离：距离的使用是显示进出的数据标签,您可以根据自己想要的位置进行更改.
> allowPointSelect：默认值为false但如果使用此值,则单击前饼图切片时将显示后面的饼图.

码：

var asset_allocation_pie_chart = new Highcharts.Chart({
        chart: {
            renderTo: 'asset_allocation_bottom_left_div'
        },title: {
            text: 'Current Asset Allocation',style: {
                fontSize: '17px',color: 'red',fontFamily: 'Verdana'
            }
        },subtitle: {
            text: '(As of ' + 'dfdf' + ')',style: {
                fontSize: '15px',marginBottom: '10px'
            },y: 40
        },tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',percentageDecimals: 0
        },plotOptions: {
            pie: {
                size: '80%',data: [
                    ['Investment Grade Bonds',100],200],300],400],500]
                ]
            }
        },dataLabels: {
                    verticalAlign: 'top',enabled: true,distance: -30,formatter: function() {
                        return Math.round(this.percentage) + ' %';
                    }
                }
            },{
                type: 'pie',dataLabels: {
                    enabled: true,distance: 30,formatter: function() {
                        return '<b>' + this.point.name + '</b>:<br/> ' + Math.round(this.percentage) + ' %';
                    }
                }
            }],exporting: {
            enabled: false
        },credits: {
            enabled: false
        }
    });

饼图将如下所示：