在 Highcharts 的圆环图中禁用数据重叠

Question

我正在 Highcharts 中制作圆环图，其中显示了一些数据。问题是，当显示圆环图时，数据类型之间有一点重叠。如果您想在 jsfiddle 中查看图表，这里是 html

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

和js代码

Highcharts.chart('container', {
    chart: {
        type: 'pie',
        margin: [0, 0, 0, 0]
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },
    plotOptions: {
        pie: {
                startAngle: 90,
            innerSize: '99%',
            borderWidth: 16,
            slicedOffset: 40,
            borderColor: undefined,
            dataLabels: {
                enabled: false
            },
            states: {
                hover: {
                    brightness: 1,
                    halo: {
                        size: 0
                    }
                }
            }
        }
    },
    series: [{
        data: [29.9, 71.5,50]
    }]
});

如果您将鼠标悬停在圆环图中的一个系列上，则该线会延伸到另一个系列。我的问题是是否有一个选项可以让线条不会相互重叠，所以末端不是圆形但有不重叠的锐边？感谢您的帮助。

Answer 1

有两种方法。

您可以使用此自定义代码 - 但它适用于以前版本的 highcharts (8) - 演示：http://jsfiddle.net/BlackLabel/72015ojz/
你可以在当前点之间添加一些虚拟点，将它们的 visibility 设置为 false 并将 series.ignroeHiddenPoint 设置为 false - https://jsfiddle.net/BlackLabel/h2m0e35a/ - 这里你需要实现一些逻辑计算这些虚拟点的数量和值。

Answer 2

最终我设法弄明白了。我所要做的就是将 borderWidth 设置为 0 并更改 innerSize，例如 80%（这取决于您想要甜甜圈的宽度）。

在 Highcharts 的圆环图中禁用数据重叠

Disable data overlap in donut chart in Highcharts

javascript

highcharts

angular