Highcharts 如何在图表上设置格式化程序值
我有一个highchart插件的piechart,这里的值显示在图表的外部,但根据我的要求,外部值应该被删除,并且每个特定部分上方只显示值(2.6%等)。我尝试使用格式化程序,但它不起作用。下面是我的代码 HTMLHighcharts 如何在图表上设置格式化程序值,highcharts,Highcharts,我有一个highchart插件的piechart,这里的值显示在图表的外部,但根据我的要求,外部值应该被删除,并且每个特定部分上方只显示值(2.6%等)。我尝试使用格式化程序,但它不起作用。下面是我的代码 HTML JAVASCRIPT Highcharts.chart('container'{ 图表:{ plotBackgroundColor:null, plotBorderWidth:null, 影子:错, 键入:“馅饼” }, 标题:{ 文字:“2018年1月浏览器市场份额” }, 工
JAVASCRIPT
Highcharts.chart('container'{
图表:{
plotBackgroundColor:null,
plotBorderWidth:null,
影子:错,
键入:“馅饼”
},
标题:{
文字:“2018年1月浏览器市场份额”
},
工具提示:{
pointFormat:“{series.name}:{point.percentage:.1f}%”
},
打印选项:{
馅饼:{
allowPointSelect:true,
光标:“指针”,
数据标签:{
启用:对,
格式:“{point.name}:{point.percentage:.1f}%”,
风格:{
颜色:(Highcharts.theme&&Highcharts.theme.ContractTextColor)| |“黑色”
}
}
}
},
系列:[{
名称:'品牌',
colorByPoint:对,
数据:[{
名称:“Chrome”,
y:61.41,
切碎:是的,
所选:真
}, {
名称:“Internet Explorer”,
y:11.84
}, {
名称:“Firefox”,
y:10.85
}, {
名称:'边缘',
y:4.67
}, {
名称:“Safari”,
y:4.18
}, {
名称:'搜狗探险家',
y:1.64
}, {
名字:'歌剧',
y:1.6
}, {
姓名:“QQ”,
y:1.2
}, {
名称:'其他',
y:2.61
}]
}]
});
数据标签。距离属性是您要查找的:
dataLabels: {
distance: -50,
(...)
}
API参考:
现场演示:不清楚您希望看到哪些值以及希望隐藏哪些值。有标记的图像会很有帮助。所有的值都应该被看到。但是它不应该显示在图表的外部,而应该显示在特定部分的图表上
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} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Sogou Explorer',
y: 1.64
}, {
name: 'Opera',
y: 1.6
}, {
name: 'QQ',
y: 1.2
}, {
name: 'Other',
y: 2.61
}]
}]
});
dataLabels: {
distance: -50,
(...)
}