Jquery HighCharts饼图-在每个切片内添加文本

我正在使用代表资产配置的高图创建一个财务饼图。我的目标是创建一个图表，表示每个部分中的实际分配值，但在每张幻灯片中，基本上会显示第二个数据标签，显示各种投资工具的目标百分比。需要注意的是，当前资产配置可能并不总是与目标配置值相匹配

除了每张幻灯片内的目标标签外，我已使所有内容正常工作。请参见下图，了解我想要完成的任务：

以下是我迄今为止所做的：

            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', color: entity_color, 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 }
       });

var资产分配图=新的Highcharts.chart({
图表：{renderTo:'资产分配\底部\左侧\部门}，
标题：{text:'Current Asset Allocation'，样式：{fontSize:'17px'，颜色：entity_color，fontwweight:'bold'，fontflasmily:'Verdana'}，
副标题：{text:'（截至“+生效日期”\u格式+”），样式：{fontSize:'15px'，颜色：实体颜色，fontfamine:'Verdana'，marginBottom:'10px'，y:40}，
工具提示：{pointFormat:'{series.name}:{point.percentage}%'，percentageDecimals:0}，
打印选项：{
饼图：{allowPointSelect:true，cursor:'pointer'，dataLabels:{enabled:true，color:'000000'，connectorWidth:1，connectorColor:'000000'，formatter:function（）{return'+this.point.name+'：
'+Math.round（this.percentage）+'%；}
},
系列：[{
键入“pie”，
名称：'资产分配'，
数据：[[投资级债券，投资级债券百分比]，“高收益债券”，高收益债券百分比]，“对冲股权”，对冲基金百分比]，“全球股权”，全球基金百分比]，“现金”，现金百分比]]
}],
正在导出：{enabled:false}，
信用证：{已启用：错误}
});

以下是此和代码显示内部和外部数据标签的方法

要做到这一点,

您需要给出两个饼图系列。一个在前面，另一个在后面

如果要模拟它，请更改为

大小：“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',
                fontWeight: 'bold',
                fontFamily: 'Verdana'
            }
        },
        subtitle: {
            text: '(As of ' + 'dfdf' + ')',
            style: {
                fontSize: '15px',
                color: 'red',
                fontFamily: 'Verdana',
                marginBottom: '10px'
            },
            y: 40
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 0
        },
        plotOptions: {
            pie: {
                size: '80%',
                cursor: 'pointer',
                data: [
                    ['Investment Grade Bonds', 100],
                    ['High Yield Bonds', 200],
                    ['Hedged Equity', 300],
                    ['Global Equity', 400],
                    ['Cash', 500]
                ]
            }
        },
        series: [{
                type: 'pie',
                name: 'Asset Allocation',
                dataLabels: {
                    verticalAlign: 'top',
                    enabled: true,
                    color: '#000000',
                    connectorWidth: 1,
                    distance: -30,
                    connectorColor: '#000000',
                    formatter: function() {
                        return Math.round(this.percentage) + ' %';
                    }
                }
            }, {
                type: 'pie',
                name: 'Asset Allocation',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorWidth: 1,
                    distance: 30,
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>' + this.point.name + '</b>:<br/> ' + Math.round(this.percentage) + ' %';
                    }
                }
            }],
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        }
    });

var资产分配图=新的Highcharts.chart({
图表：{
renderTo:'资产分配\底部\左侧\部门'
},
标题：{
文本：“当前资产配置”，
风格：{
fontSize:'17px'，
颜色：“红色”，
fontWeight:'粗体'，
fontFamily:“Verdana”
}
},
副标题:{
文本：'（截至'+'dfdf'+'），
风格：{
fontSize:'15px'，
颜色：“红色”，
fontFamily：“Verdana”，
marginBottom：“10px”
},
y:40
},
工具提示：{
pointFormat:“{series.name}:{point.percentage}%”，
百分比小数：0
},
打印选项：{
馅饼：{
大小：“80%”，
光标：“指针”，
数据：[
[“投资级债券”，100]，
[“高收益债券”，200]，
[‘对冲股权’，300]，
[“全球股权”，400]，
[现金，500]
]
}
},
系列：[{
键入“pie”，
名称：'资产分配'，
数据标签：{
垂直排列：“顶部”，
启用：对，
颜色：'#000000'，
连接器宽度：1，
距离：-30，
连接器颜色：'#000000'，
格式化程序：函数（）{
返回Math.round（this.percentage）+'%'；
}
}
}, {
键入“pie”，
名称：'资产分配'，
数据标签：{
启用：对，
颜色：'#000000'，
连接器宽度：1，
距离:30,，
连接器颜色：'#000000'，
格式化程序：函数（）{
返回'+this.point.name+'：
'+Math.round（this.percentage）+'%；
}
}
}],
出口：{
已启用：false
},
学分：{
已启用：false
}
});

饼图如下所示：

---

我们可以将

数据标签

中的

距离

属性设置为负值，这将显示

片段内的文本

plotOptions: {
        pie: {
            dataLabels: {
                distance: -30
            }
        }
}

输出：

---

我建议熟悉类似的主题