我正在使用其中一个Highcharts示例,试图让它显示隐藏系列的百分比值。
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b><br/>',
split: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'Total',
data: [1000, 2000, 3000, 4000, 5000, 6000, 10500],
visable: false
}, {
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
例如,在示例代码中,我想以系列总计的形式显示亚洲,非洲,欧洲,美洲和大洋洲的百分比值。所以亚洲的第一点是:“亚洲:50.2%”。我也希望Total系列完全隐藏,即在底部的图例中看不到。请注意,如果有更好的方法,总数不必是一个系列,它只是最方便的地方。
答案 0 :(得分:0)
我认为你在寻找:
...
tooltip: {
shared:true,
formatter:function(){
var myTooltip = '<b>' + this.x + '</b>',
value,
total = 0; // Total will be calculeted from series values
(this.points).forEach(function(item){
total+=item.y; // Total incrementing
});
(this.points).forEach(function(item){
value = ((item.y / total) * 100).toFixed(2);
myTooltip += '<br/>' + item.series.name + ': ' + value + ' %';
});
myTooltip += '<br/><b>Total : ' + total +'</b>'; // Adding total to the tooltip
return myTooltip;
}
},
...
答案 1 :(得分:0)
我使用Core972所做的一些工作得到了我想要的东西。这是
tooltip: {
split: true,
formatter:function(){
var myTooltip = '<b>' + this.x + '</b>',
value,
total = [1000, 2000, 3000, 4000, 5000, 6000, 10500];
(this.points).forEach(function(item){
value = ((item.y / total[item.series.data.indexOf( item.point )]) * 100).toFixed(2);
myTooltip += '<br/>' + item.series.name + ': <b>' + value + '%</b>';
});
return myTooltip;
}
},