【问题标题】：How to change background color of inner circle of highchart doughnut chart?如何更改highchart圆环图内圈的背景颜色？
【发布时间】：2020-12-06 16:24:22
【问题描述】：

需要更改高图甜甜圈的背景颜色

预期结果

达到的结果

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

需要帮助！提前致谢！

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

结果 After Adding background color

【问题讨论】：

标签： javascript reactjs highcharts next.js

【解决方案1】：

您可以使用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

【讨论】：

【解决方案2】：

您可以简单地更改图表对象上的 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
                    }
                }
            },

        },

【讨论】：

是的，我尝试添加背景颜色，但它会将背景颜色应用于容器。我只是想给内圈上色。
不是 CSS 的背景色，而是图表对象上的背景色。见附上的代码，在JSFiddle中需要的地方替换它就行了
根据建议更改代码。 jsfiddle.net/shantanugade/f5ojh13z/9 这里的问题是整个容器具有相同的背景，即 '#fafbec' 。但我只希望内圈被着色为“#fafbec”。
jsfiddle.net/Lqutsoj5 这可以解决问题。