HighCharts饼图 - 在每个切片内添加文本 [英] HighCharts Pie Chart - Add text inside each slice
本文介绍了HighCharts饼图 - 在每个切片内添加文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用代表资产分配的HighCharts创建财务饼图。我的目标是创建一个图表，表示每个切片中的实际分配值，但每张切片内将显示基本上显示各种投资工具的目标百分比的第二个数据标签。请注意，目前的资产配置可能并不总是与目标分配值相匹配。
除了每张幻灯片中的Target标签外，我已经完成了所有工作。看到下面的图片，我想完成：
这是我到目前为止：
<$> c $ c> 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>'，percentDecimals：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）+'％'; }}}
系列：[{
类型：'pie'，
名称：'资产分配'，
data：[['Investment Grade Bonds '，'高收益债券'，高收益债券百分比]，['对冲股票'，对冲等于百分比]，['全球股票'，GlobalEquityPercentage]，['现金'，CashPercentage]]
}]，
导出：{enabled：false}，
credits：{enabled：false}
}）;
解决方案
这里是 jsfiddle ，以便显示内部和外部的数据标签。
- 你需要给出两个饼图系列。一个会在前面看，另一个会在后面。
- 如果您想模拟它，请将
size改为<80％>。 li>距离：距离的使用是显示数据标签的输入和输出，您可以根据自己的需要更改数据标签的位置。 - allowPointSelect：这是默认值，但如果这样如果使用了饼图，则会在点击前面饼图片时显示饼图。
代码：
var asset_allocation_pie_chart = new Highcharts.Chart（{
图表：{
renderTo：'asset_allocation_bottom_left_div'
}，
title：{
text：'Current Asset Allocation'，
style：{
fontSize：'17px'，
color：'red'，
fontWeight ：'bold'，
fontFamily：'Verdana'
}
}，
字幕：{
text：'（As '+'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％'，
光标：'指针'，
数据：[
['投资级债券'，100]，
['高收益债券'，200]，
[ 'Hedged Equity'，300]，
['Global Equity'，400]，
['Cash'，500]
]
}
}，
系列：[{
类型： 'bie'，
name：'Asset Allocation'，
dataLabels：{
verticalAlign：'top'，
enabled：true，
color：'＃000000' ，
connectorWidth：1，
distance：-30，
connectorColor：'＃000000'，
formatter：function（）{
return Math.round（this。百分比）+'％';
}，{
类型：'pie'，
名称：'资产分配'，
dataLabels：{
启用：true，
color：'＃000000'，
connectorWidth：1，
distance：30，
connectorColor：'＃000000'，
formatter：function（） {
return'< b>'+ this.point.name +'< / b>：< br /> '+ Math.round（this.percentage）+'％';
}]，
导出：{
已启用：false
}，
学分：{
已启用：假
}
}）;
饼图将如下所示：
I am creating a financial pie chart using HighCharts that represents asset allocation. My goal is to create a chart that represents the actual allocation values in each slice but inside each slide will show essentially a second data label that displays the target percentage for various investment vehicles. It is important to note that the current asset allocation may not always match up with the targeted allocation value.
I have gotten everything working except for the Target labels inside each slide. See the image below for what I would like to accomplish:
Here is what I have thus far:
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 }
});
解决方案
Here is the jsfiddle for this and code to show datalabels inside and outside.
To achieve this
- you need to give two pie chart series. one will be looking at front and other will be at back.
- if you want to simulate it then make changes into
size: '80%'. - distance : use of distance is to show datalabels in and out which you can change according to you which you want position of it.
- allowPointSelect: default value of this is false but if this is used then pie chart resides behind will be shown upon clicking on slice of front pie chart.
Code:
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
}
});
Pie chart will be looked like below :
这篇关于HighCharts饼图 - 在每个切片内添加文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
