如何在饼图高图中获取内圈直径？

Question

我可以通过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>

Answer 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>

Answer 2

如果您使用

innerSize

和百分比，您可以使用

chart.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();
});

正如您从小提琴中看到的那样，似乎有非常小的重叠。我不确定这种重叠的来源，但近似值相当不错。