Highcharts极地图/蜘蛛图背景色

极地图很简单，直接在配置项里面这样加入背景色即可：

pane: {
    background:{
        backgroundColor:'red',
        outerRadius:'100%'
    }
}

极地.png

蜘蛛图因为是有“棱角”的，直接加上背景色好像没法只填充坐标的部分（如果有很简单的方式的话麻烦告诉我），于是下面有三种方式，可以看自己的场景适合哪种：
1.使用Renderer.path绘制出路径线条
2.在yAxis中配置plotBands
3.在series中添加一组最大值的数据打底，作为背景色

方法1：
在文档里看一下绘制的方法 [https://api.highcharts.com.cn/legacy#Renderer.path]，这边的parts就看你有多少组数据了（多少个点），算出每一个点的位置连成一段路径。

const chart = HighCharts.chart('spiderChart', {...})
const parts = 4;
const path = [];
for (let i = 0; i < parts; i++) {
            const centerX = chart.plotLeft + chart.yAxis[0].center[0];
            const centerY = chart.plotTop + chart.yAxis[0].center[1];
            const axisLength = chart.yAxis[0].height;
            const angleOffset = -Math.PI / 2;
            const angleSegment = Math.PI / (parts / 2);
            const firstPointX = centerX + (axisLength * Math.cos(angleOffset + (angleSegment * i)));
            const firstPointY = centerY + (axisLength * Math.sin(angleOffset + (angleSegment * i)));
            if (path.length === 0) {
                path.push('M');
            } else {
                path.push('L');
            }
            path.push(firstPointX);
            path.push(firstPointY);
 }
chart.renderer.path(path).attr({
            fill: '#3a3a4f',
            'stroke-width': 1,
            'opacity': 0.4
 }).add();    

spider.png

方法2，假设几组series数据最大值是8，我们把tickAmount设成1（这样max和to的设置就比较可控，你也可以调整max和to值来匹配你的间隔），浅看一下运行结果：

    yAxis: {
        gridLineInterpolation: 'polygon',
        tickAmount:1,
        min:0,
        max:10,
        plotBands:[
            {
                color:'red',
                from: 0,
                to: 10
            }
        ]
    }

结果.png

方法3
思路就是加一层贴合最大值的series打底作为背景色，禁掉所有这个series交互性的配置项，参考下面这个demo就好，很完整：
https://stackoverflow.com/questions/45995863/highcharts-plotbackgroundcolor-on-spider-chart

最后

很老的ionic3项目突然有新界面的需求，highcharts版本是4。太久没写这些东西了，配置项什么的估计这波需求写完转头就忘光了，还是记录一下好了。

参考：

https://api.highcharts.com.cn/highcharts/yAxis.plotBands.color.html
http://www.java2s.com/example/javascript/highcharts/spider-web-chart-with-various-background-color.html