Highchart极地图2嵌套圆

Question

我遇到极坐标图定制问题。我想要两个嵌套的圆圈。

Here's the fiddle这是我想得到的结果：

- 预期结果：

＆＃13;

＆＃13;

$(function () {
    var data = [{"name":"ビタミンA","y":3650,"color":"#9fe642","bg_color":"#F9D5B5","compare":"過剰"},{"name":"ビタミンB1","y":2783,"color":"#274ffb","bg_color":"#BBDEE8","compare":"不足"},{"name":"ビタミンB2","y":3616,"color":"#705ba4","bg_color":"#D8E4BE","compare":"適度"},{"name":"ビタミンC","y":3661,"color":"#a54593","bg_color":"#F9D5B5","compare":"過剰"},{"name":"カルシウム","y":2783,"color":"#d1d700","bg_color":"#BBDEE8","compare":"不足"},{"name":"鉄","y":3615,"color":"#06675e","bg_color":"#BBDEE8","compare":"不足"}];
    
    Highcharts.chart('polar-chart', {
        chart: {
            polar: true
        },
        title: {
            text: ''
        },
        pane: {
            startAngle: 0,
            endAngle: 360,
            background: [
                {
                    backgroundColor: {
                        linearGradient: {x1: 1, y1: 1, x2: 1, y2: 1},
                        stops: [
                            [0, '#FFF'],
                            [1, '#F9D5B5']
                        ]
                    },
                    borderWidth: 0,
                    outerRadius: '100%'
                }
            ]
        },
        xAxis: {
            tickInterval: 60,
            min: 0,
            max: 360,
            labels: {
                formatter: function () {
                    if (this.value == 0) {
                        return 'ビタミンA';
                    } else if (this.value == 60) {
                        return 'ビタミンB1';
                    } else if (this.value == 120) {
                        return 'ビタミンB2';
                    } else if (this.value == 180) {
                        return 'ビタミンC';
                    } else if (this.value == 240) {
                        return 'カルシウム';
                    } else {
                        return '鉄';
                    }
                }
            }
        },
        yAxis: {
            min: 0
        },
        plotOptions: {
            series: {
                pointStart: 0,
                pointInterval: 60,
                dataLabels: {
                    enabled: false,
                    format: ''
                }
            },
            column: {
                pointPadding: 0,
                groupPadding: 0
            }
        },
        series: [{
                type: 'line',
                name: 'Nutrition',
                data: data,
                showInLegend: false,
                zIndex: 3,
            },
            
        {
            type: 'column',
            name: 'Line',
            data: [{
                    color: "#BBDEE8",
                    y: 5000
                }, {
                    color: "#BBDEE8",
                    y: 5000
                }, {
                    color: "#BBDEE8",
                    y: 5000
                }, {
                    color: "#BBDEE8",
                    y: 5000
                }, {
                    color: "#BBDEE8",
                    y: 5000
                }, {
                    color: "#BBDEE8",
                    y: 5000
                }],
            zIndex: 2,
            pointPlacement: 'between',
            showInLegend: false,
        },
        {
            type: 'column',
            name: 'Line',
            data: [{
                    color: "#D8E4BE",
                    y: 7000
                }, {
                    color: "#D8E4BE",
                    y: 7000
                }, {
                    color: "#D8E4BE",
                    y: 7000
                }, {
                    color: "#D8E4BE",
                    y: 7000
                }, {
                    color: "#D8E4BE",
                    y: 7000
                }, {
                    color: "#D8E4BE",
                    y: 7000
                }, {
                    color: "#D8E4BE",
                    y: 7000
                }],
            zIndex: 1,
            pointPlacement: 'between',
            showInLegend: false,
        },
         ]
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="polar-chart" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用yAxis.plotBands。每圈一个情节带。

  yAxis: {
        plotBands: [{
          from: 0,
          to: 25000,
          color: 'blue'
        }, {
          from: 25000,
          to: 50000,
          color: 'green'
        }, {
          from: 50000,
          to: 75000,
          color: 'red'
        }],

示例：http://jsfiddle.net/jLctf348/