高图饼图我如何在片段和标签名称外显示点值
问题描述:
正如标题所示。 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
}]
}],
});
});
答
为了有一个饼图切片(切片和百分比内之外的值)两个独立的价值,您需要在您的图表定义两个不同的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/
谢谢医生酷派,在的jsfiddle中心值的背景颜色是不见了。 。当我把它添加*价值标签消失。 –
是的,我修好了。 ''series''数组中有3个项目。中间的“总”圆不能是第一个,因为灰色被其他项隐藏。只需将它移动到数组的第二或第三个索引处即可。 –
https://jsfiddle.net/bb83f2by/5/ –