Hightchart Polar 레이더 도 실현

$(function () {

    $('#container').highcharts({

        chart: {
            polar: true,
            type: 'line'
        },

        title: {
            text: 'Budget vs spending',
            x: -80
        },

        pane: {
            size: '80%'
        },

        xAxis: {
            categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
                    'Information Technology', 'Administration'],
            tickmarkPlacement: 'on',
            lineWidth: 0
        },

        yAxis: {
            gridLineInterpolation: 'polygon',
            lineWidth: 0,
            min: 0
        },

        tooltip: {
            shared: true,
            pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
        },

        legend: {
            align: 'right',
            verticalAlign: 'top',
            y: 70,
            layout: 'vertical'
        },

        series: [{
            name: 'Allocated Budget',
            data: [43000, 19000, 60000, 35000, 17000, 10000],
            pointPlacement: 'on'
        }, {
            name: 'Actual Spending',
            data: [50000, 39000, 42000, 31000, 26000, 14000],
            pointPlacement: 'on'
        }]

    });
});

  var chart;
    $(document).ready(function () {

        chart = new Highcharts.Chart({

            chart: {
                padding:0,
                margin:0,
                renderTo: 'container',
                polar: true,
                type: 'area',
                //backgroundColor: '#F2F2F2'
                plotBackgroundImage:"http://imgd3.laoyuegou.com/mayday/img/dota-news/bg_gray.jpg",
            },
            title: {
                text: '',
                x: -80
            },
            credits:{
                enabled: false
            },
            exporting: {
                enabled: false
            },
            pane: {
                size: '85%',
                startAngle: 20,
                center: ['50%', '50%']
            },
            plotOptions: {
                area: {
                    fillOpacity: 0.30
                }
            },

            xAxis: {
                categories: ['  ', '  ', '  ', '  ','  '],
                tickmarkPlacement: 'on',
                lineWidth: 0,
                gridLineColor: '#D8D8D8',
                labels:{
                    style:{
                        color: '#B3B9C2',//B7F1E2
                    }
                },
                showFirstLabel:true
            },

            yAxis: {
                gridLineInterpolation: 'polygon',
                lineWidth: 0,
                min: 0,
                max: 15,
                gridLineWidth :1,
                gridLineColor: '#B3B9C2',
                plotBands: [{
                    color: '#F2F2F2',
                    borderColor:'#B3B9C2',
                    borderWidth:1,
                    from: 0,
                    to: 5
                }, {
                    color: '#F2F2F2',
                    borderColor:'#B3B9C2',
                    borderWidth:1,
                    from: 5,
                    to: 10
                }, {
                    color: '#F2F2F2',
                    borderColor:'#B3B9C2',
                    borderWidth:1,
                    from: 10,
                    to: 15
                }, {
                    color: '#F2F2F2',
                    borderColor:'#B3B9C2',
                    borderWidth:1,
                    from: 15,
                    to: 20
                }],
                labels:{
                    enabled: false
                }
            },

            tooltip: {
                useHTML: true,
                backgroundColor: '#FFFFFF',
                borderWidth: 0,
                style: {
                    color: 'gray',
                    padding: '10px'
                },
                headerFormat: '',
//                shared: true,
//                pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}</b><br/>',
                // ["kdara"]=>    //  
                // ["hdra"]=>     //  
                // ["dra"]=>      //  
                // ["gpmra"]=>    //        
                // ["tdra"]=>     //  
                formatter: function(){
                    var s = '';
                    if(this.x == '  ')
                    {
                        return  "<p style='text-align: center;'>" + this.key + ": <span style='color:#f60'>" +  "B" + "</span></p></span>";
                    }
                    else if(this.x == '  ')
                    {
                        return "<p style='text-align: center;'>" +this.key + ": <span style='color:#f60'>" +  "A"+ "</span></p></span>";
                    }
                    else if(this.x == '  ')
                    {
                        return "<p style='text-align: center;'>" +this.key + ": <span style='color:#f60'>" +  "B-"+ "</span></p></span>";
                    }
                    else if(this.x == '  ')
                    {
                        return "<p style='text-align: center;'>" +this.key + ": <span style='color:#f60'>" +  "B+"+ "</span></p></span>";
                    }
                    else if(this.x == '  ')
                    {
                        return "<p style='text-align: center;'>" +this.key + ": <span style='color:#f60'>" +  "A"+ "</span></p></span>";
                    }

                    return s;
                }
            },

            legend : {
              enabled: false
            },

            series: [{
                data: [{
                    name: '  ',
                    y: 6.1,
                    marker: {
                        symbol: 'url(http://imgd3.laoyuegou.com/static/img/app/dota2/icon_shuchu_dark.png)',
                        width: 13,
                        height: 13
                    }
                },{
                    name: '  ',
                    y: 9.5,
                    marker: {
                        symbol: 'url(http://imgd3.laoyuegou.com/static/img/app/dota2/icon_shengcun_dark.png)',
                        width: 13,
                        height: 13
                    }
                },{
                    name: '  ',
                    y: 5,
                    marker: {
                        symbol: 'url(http://imgd3.laoyuegou.com/static/img/app/dota2/icon_tuita_dark.png)',
                        width: 13,
                        height: 13
                    }
                },{
                    name: '  ',
                    y: 7,
                    marker: {
                        symbol: 'url(http://imgd3.laoyuegou.com/static/img/app/dota2/icon_tuanzhan_dark.png)',
                        width: 13,
                        height: 13
                    }
                },{
                    name: '  ',
                    y: 9.5,
                    marker: {
                        symbol: 'url(http://imgd3.laoyuegou.com/static/img/app/dota2/icon_fayu_dark.png)',
                        width: 13,
                        height: 13
                    }
                }],
                pointPlacement: 'on',
                color: '#269783'
            } ]

        });

        chart.series[0].points[0].onMouseOver();
    });