如何更改海图甜甜圈图内圆的背景颜色？

Question

需要更改Highchart甜甜圈的背景颜色

预期结果

获得的结果

JS Fiddle Link : https://jsfiddle.net/shantanugade/f5ojh13z/1/

需要帮助！！预先感谢！

更新：-我尝试了更改背景颜色-

结果 After Adding background color

Answer 1

您只需更改图表对象上的RGB值；

  chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        height: 175,
        width: 175,
        margin: 0,
        backgroundColor: 'rgba(250,251,236,1)' //this is the background of the whole chart, so change it to this RGBA value.
    },

如果您希望第三个值不是白色而是与背景色混合，请更改plotoptions上的颜色数组上的最后一个值

plotOptions: {
            pie: {
                dataLabels: {
                    enabled: false,
                    distance: -10,
                    style: {
                        fontWeight: 'bold'
                    },
                    backgroundColor: "#fafbec"
                },
                states: {
                    hover: {
                        enabled: false
                    }
                },
                borderColor: '',
                // center: ['50%', '50%'],
                size: '100%',
                colors: ['#000000', '#e45456', '#fafbec'], //here the last one is the color of the last line, which in the jsfiddle is white, you have to change it to '#fafbec' which is the hexadecimal equivalent of the 'rgba(250,251,236,1)'

            },
            series: {
                states: {
                    inactive: {
                        opacity: 1
                    }
                }
            },

        },

Answer 2

您可以使用Highcharts.SVGRenderer类添加一个圆圈作为背景：

    chart: {
        ...,
        events: {
            load: function() {
                var center = this.series[0].center;

                this.renderer.circle(
                        center[0],
                        center[1],
                        (this.plotHeight - this.spacingBox.y * 2) / 2)
                    .attr({
                        fill: 'green'
                    }).add();
            }
        }
    }

---

实时演示： https://jsfiddle.net/BlackLabel/oghbp479/

API参考：

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle

https://api.highcharts.com/highcharts/chart.events