如何更改highchart圓環圖內圈的背景顏色？

Question

需要更改 highchart 甜甜圈的背景顏色

預期結果

取得的成果

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

需要幫助！ 提前致謝！

更新：-我嘗試更改背景顏色-

添加背景顏色后的結果

Answer 1

您可以簡單地更改圖表 object 上的 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 上 colors 數組上的最后一個值

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 class 添加一個圓圈作為背景：

    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