高图表半圆形甜甜圈 - 不显示小项目价值

Question

我正在尝试集成Highchart"半圆甜甜圈"；官方参考。

当一个参数的值很高，而另一个参数值很低时，此图表的表现就不好。正如在这把小提琴上看到的。

Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>January<br>2022',
align: 'center',
verticalAlign: 'middle',
y: 60
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%'],
size: '110%'
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Chrome', 100000],
['Edge', 11.97],
['Firefox', 5.52],
['Safari', 2.98],
['Internet Explorer', 1.90],
{
name: 'Other',
y: 3.77,
dataLabels: {
enabled: false
}
}
]
}]
});

我给chrome的价值是10万，其余的不到20。在这种情况下，铬几乎占据了所有的空间。其余的项目不太显眼。

如果我们可以设置其余项目的最小宽度，以便至少向用户显示它们，我需要帮助。就我而言，我预计图表中的项目不会超过5个。

我已经试过"；minpointlength"；这也于事无补。

Answer 1

您可以预处理数据以减少值之间的差异，将原始值存储在自定义属性中，并在工具提示或数据标签中显示。例如：

const data = [
['Chrome', 100000],
['Edge', 11.97],
['Firefox', 5.52],
['Safari', 2.98],
['Internet Explorer', 1.90],
['Other', 3.77]
];
const processedData = data.map(dataEl => ({
name: dataEl[0],
y: dataEl[1] > 100 ? 100 : dataEl[1],
custom: {
realVal: dataEl[1]
}
}));
// Data retrieved from https://netmarketshare.com/
Highcharts.chart('container', {
tooltip: {
pointFormatter: function() {
const total = this.series.points.reduce(
(prev, curr) => prev + curr.custom.realVal,
0
);
const percentage = this.custom.realVal * 100 / total;
return `${this.series.name}: <b>${percentage}%</b>`
}
},
...,
series: [{
...
data: processedData
}]
});

---

现场演示：https://jsfiddle.net/BlackLabel/v7bcjymw/

API参考：https://api.highcharts.com/highcharts/series.pie.data.custom