Highchart 饼图不能与系列一起正常工作
Highchart Pie Chart not working properly with series
示例代码
JsFiddle Example 以下代码。
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [
{
"name": "Display",
"y": 0.1,
"value": 5
},
{
"name": "Paid Social",
"y": 0,
"value": 0,
sliced: true,
selected: true
},
{
"name": "Direct",
"y": 14.5,
"value": 559
},
{
"name": "Referral",
"y": 2,
"value": 77
},
{
"name": "Email",
"y": 4,
"value": 152
},
{
"name": "Other",
"y": 0,
"value": 1
},
{
"name": "Organic Search",
"y": 23.4,
"value": 901
},
{
"name": "Meta Search",
"y": 0.2,
"value": 5
},
{
"name": "Organic Social",
"y": 2.4,
"value": 93
},
{
"name": "Directory",
"y": 0.2,
"value": 9
},
{
"name": "Other Advertising",
"y": 0.1,
"value": 3
},
{
"name": "OTA Referral Traffic",
"y": 0.7,
"value": 26
},
{
"name": "Paid Search",
"y": 27.8,
"value": 1068
},
{
"name": "Local",
"y": 24.5,
"value": 941
}]
}]
});
场景
我想显示 dataLabels 对于所有偶数 y 值是 zero.
在上面的代码中我们有 "name": "Display"
y=0.1 但它仍然没有显示在饼图中不知道为什么。如果有人知道这个问题,请告诉我。
dataLabels
由于缺少 space 和重叠而被隐藏。作为解决方案,您可以设置:padding: 0
plotOptions: {
pie: {
...,
dataLabels: {
padding: 0,
...
}
}
}
现场演示: https://jsfiddle.net/BlackLabel/g5s27tyb/
API参考:https://api.highcharts.com/highcharts/plotOptions.pie.dataLabels.padding
示例代码
JsFiddle Example 以下代码。
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [
{
"name": "Display",
"y": 0.1,
"value": 5
},
{
"name": "Paid Social",
"y": 0,
"value": 0,
sliced: true,
selected: true
},
{
"name": "Direct",
"y": 14.5,
"value": 559
},
{
"name": "Referral",
"y": 2,
"value": 77
},
{
"name": "Email",
"y": 4,
"value": 152
},
{
"name": "Other",
"y": 0,
"value": 1
},
{
"name": "Organic Search",
"y": 23.4,
"value": 901
},
{
"name": "Meta Search",
"y": 0.2,
"value": 5
},
{
"name": "Organic Social",
"y": 2.4,
"value": 93
},
{
"name": "Directory",
"y": 0.2,
"value": 9
},
{
"name": "Other Advertising",
"y": 0.1,
"value": 3
},
{
"name": "OTA Referral Traffic",
"y": 0.7,
"value": 26
},
{
"name": "Paid Search",
"y": 27.8,
"value": 1068
},
{
"name": "Local",
"y": 24.5,
"value": 941
}]
}]
});
场景
我想显示 dataLabels 对于所有偶数 y 值是 zero.
在上面的代码中我们有 "name": "Display"
y=0.1 但它仍然没有显示在饼图中不知道为什么。如果有人知道这个问题,请告诉我。
dataLabels
由于缺少 space 和重叠而被隐藏。作为解决方案,您可以设置:padding: 0
plotOptions: {
pie: {
...,
dataLabels: {
padding: 0,
...
}
}
}
现场演示: https://jsfiddle.net/BlackLabel/g5s27tyb/
API参考:https://api.highcharts.com/highcharts/plotOptions.pie.dataLabels.padding