提问人：Kvasimodo 提问时间：10/9/2023 更新时间：10/9/2023 访问量：42
如何在饼图中获取内圈直径？
How to get diameter of inner ring in pie highchart?
问：
我可以通过plotHeight获取外环的直径，但是有没有办法获得饼图内环的直径？（https://jsfiddle.net/noy986m7/23/)
Highcharts.chart('container', {
chart: {
type: 'pie',
},
series: [{
innerSize: "40%",
data: [{
y: 70.67,
}, {
y: 14.77
}]
}]
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>答：
2赞
Kvasimodo
10/9/2023
#1
const getInnerDiameter = (series) => {
const r = [];
series.forEach((item) => {
item.data.forEach(point => {
r.push(point.shapeArgs.innerR);
});
});
return Math.min(...(r.filter(Boolean))) * 2;
};
Highcharts.chart('container', {
chart: {
type: 'pie',
events: {
load: function () {
console.log("externelD: " + this.plotHeight, "innerD: " + getInnerDiameter(this.series))
},
},
},
series: [{
innerSize: "40%",
data: [{
y: 70.67,
}, {
y: 14.77
}]
}]
});<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variable-pie.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
1赞
Halvor Holsten Strand
10/9/2023
#2
如果您使用百分比，则可以用 where 来近似直径，例如 .innerSizechart.plotHeight * (innerSize / 100)innerSize = 40
例如（参见这个 JSFiddle 演示）：
const innerSize = 40
Highcharts.chart('container', {
chart: {
type: 'pie',
},
series: [{
innerSize: `${innerSize}%`,
data: [70.67,14.77]
}]
}, function(chart) {
const diameter = chart.plotHeight * (innerSize / 100)
const radius = diameter / 2
const center = chart.series[0].center
const centerCircle = [
center[0] + chart.plotLeft,
center[1] + chart.plotTop,
radius
]
const circle = chart.renderer.circle(...centerCircle)
.attr({
fill: 'rgba(255,0,0,0.4)',
zIndex: 3
})
.on('mouseover', function() {
circle.attr('fill', 'rgba(255,0,0,0.0');
})
.on('mouseout', function() {
circle.attr('fill', 'rgba(255,0,0,0.4');
})
.add();
});
从小提琴上可以看出，似乎有非常小的重叠。我不确定这种重叠的来源，但近似值非常好。
评论