Highchart Polar chart - 4 вложенных круга с разными сериями

Question

У меня проблема с настройкой полярной диаграммы.Я хотел бы иметь 4 вложенных круга (с метками) на оси Y с различными сериями для каждого вложенного круга.Независимо от значения этот маркер должен находиться внутри круга, определенного для ряда.

$(function () {

    var labels = ['Europe','Australia','North America','South America'];
    var series1 = [1,2,3,4];
    var series2 = [5,6,7,8];
    var series3 = [1.5,2.5,3.5,4.5];
    var series4 = [5.5,6.5,7.5,8.5];

    var pointInterval = parseInt(360 / labels.length);
    var chart;
    chart=  Highcharts.chart('div-radarChar', {
        chart: {
            polar: true,
        },
        credits: {
            enabled: false
        },
        legend: {
            enabled: true
        },
        title: {
            text: 'Radar Chart'
        },
        pane: {
            startAngle: 0,
            endAngle: 360
        },
        tooltip: {
            formatter: function (pointInterval, tooltip) {
                var header ='<span style="font-size: 10px">' + this.key + '</span><br/>';
                var point = '<span style="color:' + this.series.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.y + '</b><br/>';
                return header + point;
            }
        },
        xAxis: {
            labels: {
                style: {
                    "whiteSpace": "nowrap"
                },
            },
            categories: labels
        },
        yAxis: {
            min: 0
        },


        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true
                },
                pointStart: 0,
                marker: {
                    enabled: true,
                    symbol: 'circle',
                    radius: 10,
                }
            },
            column: {
                pointPadding: 0,
                groupPadding: 0
            }
        },
        series: [{
            lineWidth: 0,
            type: 'line',
            name: 'Series 1',
            data: series1,
            fillColor:'#008000',
            color: '#008000'
        },
        {

            lineWidth: 0,
            type: 'line',
            name: 'Series 2',
            data: series2,
            fillColor:'#FFFF00',
            color: '#FFFF00'

        },
        {

            lineWidth: 0,
            type: 'line',
            name: 'Series 3',
            data: series3,
            fillColor:'#FFA500',
            color: '#FFA500'

        },
        {

            lineWidth: 0,
            type: 'line',
            name: 'Series 4',
            data: series4,
            fillColor:'#FF0000',
            color: '#FF0000'
        }
        ]
    }); 
});

Вот скрипка, и вот результат, который я хотел бы получить:

http://jsfiddle.net/mfwq1x7n/

https://i.imgur.com/dt47nCC.png

Любая помощь / указатели будут очень оценены.

Answer 1

Вы можете создать полярную диаграмму с отдельными yAxis для каждой серии:

yAxis: [{
    lineColor: 'red',
    lineWidth: 3,
    tickPositions: [0, 4, 8, 12, 16]
}, {
    tickPositions: [0, 4, 8, 12, 16],
    angle: 90,
    lineColor: 'blue',
    lineWidth: 3
}, {
    tickPositions: [-4.5, -1.5, 1.5, 4.5, 7.5],
    angle: 180,
    lineColor: 'black',
    lineWidth: 3
}, {
    tickPositions: [-3.5, -0.5, 2.5, 5.5, 8.5],
    angle: 270,
    lineColor: 'pink',
    lineWidth: 3
}]

Демо: http://jsfiddle.net/BlackLabel/06ohs1yr/

Справочник по API: https://api.highcharts.com/gantt/yAxis.tickPositions