Spider Highchart-每个网格线的颜色不同

Question

我使用highchart（蜘蛛）我想为y轴的每条网格线赋予不同的颜色。有什么优雅的方法可以做到这一点（我的意思是-没有jQuery和复杂的CSS选择器）

请参阅所附图片。

Answer 1

您可以从renderGridLine原型包装Tick方法：

(function(H) {
    var colors = ['#0050d1', '#de0735', '#00e031', '#ffb300', '#c800ff'],
        i = 0;

    H.wrap(H.Tick.prototype, 'renderGridLine', function(proceed) {
        if (!this.axis.isXAxis) {
            this.axis.options.gridLineColor = colors[i];

            if (this.isLast) {
                i = 0;
            } else {
                i++;
            }
        }
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    });
}(Highcharts));

---

实时演示： https://jsfiddle.net/BlackLabel/45fh27tc/

文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

---

或在load事件中设置彩色非洲图表初始化：

var colors = ['#0050d1', '#de0735', '#00e031', '#ffb300', '#c800ff'];

Highcharts.chart('container', {
    chart: {
        ...
        events: {
            load: function() {
                var yAxis = this.yAxis[0];

                yAxis.tickPositions.forEach(function(tPos, i) {
                    yAxis.ticks[tPos].gridLine.attr({
                        stroke: colors[i]
                    });
                });
            }
        }
    },

    ...
});

---

实时演示： https://jsfiddle.net/BlackLabel/xbLtur48/

API参考：

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

https://api.highcharts.com/highcharts/chart.events.load