Question

我有两个圆形饼图，它们看起来不错，但我需要更改内核的背景颜色：

 $(document).ready(function () {

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                //backgroundColor: 'rgba(255, 255, 255, 0.0)',
                //backgroundColor: 'rgba(255, 255, 255, 0.0)',
                backgroundColor: '#FCFFC5',
                margin: [0, 0, 0, 0],
                spacingTop: 23,
                spacingBottom: 23,
                spacingLeft: 23,
                spacingRight: 23,
                plotBorderWidth: 1,
                //polar: true,
                //type: 'inline'
            },
            exporting: { enabled: false },
            credits: {
                enabled: false
            },
            plotOptions: {
                size: '100%',
                series: {
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                },
                pie: {
                    innerSize: 100,
                    backgroundColor: '#CCC',
                    depth: 15,
                    dataLabels: {
                        connectorWidth: 0
                    }
                }
            },
            tooltip: {
                enabled: false
                //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            title: {
                text: '<div style="background-color:#2cb5e1;">Today WalkIn<br>67<br>Average wait time<br> 02:00</div>',
                align: 'center',
                verticalAlign: 'middle',
                y: 5,
                style: {
                    color: '#000',
                    fontWeight: 'bold',
                    fontSize: '28px',
                }
            },
            legend: {
                layout: "vertical",
                align: "right",
                verticalAlign: "middle",
            },
            series: { states: { hover: { enabled: false } } },
            series: [{
                type: 'pie',
                dataLabels: false,
                shadow: false,

                data: [{
                    name: '',
                    y: 7,
                    color: '#fc525a',
                }, {
                    name: '',
                    y: 5,
                    color: '#2cb5e1',
                }, {
                    name: '',
                    y: 18,
                    color: '#fc8b4d',
                }],
                innerSize: '65%'
            },

            {
                type: 'pie',
                data: [{
                    name: '',
                    y: 7,
                    color: '#fc525a',
                }, {
                    name: '',
                    y: 5,
                    color: '#2cb5e1',
                }, {
                    name: '',
                    y: 18,
                    color: '#fc8b4d',
                }],
                innerSize: '80%'
            }]
        });
    });

黄色背景从两个饼图圆中出来；相反，我只想在放置文字的地方显示颜色

屏幕截图

Answer 1

您需要绘制自定义形状，例如：

chart: {
    ...,
    events: {
        load: function() {
            var x = this.chartWidth / 2,
                y = this.chartHeight / 2,
                r = x > y ? y : x;

            this.renderer
                .circle(x, y, 0.65 * r)
                .attr('fill', '#F0F')
                .add()
        }
    }
}

实时演示： http://jsfiddle.net/BlackLabel/apmvgnb4/

API参考： https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle

有两个圆圈的饼图需要更改内部圆圈的背景颜色

1 个答案: