蜘蛛海图-每个网格线都有不同的颜色 [英] Spider Highchart - different color for each gridline

问题描述

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

I use highchart (spider) I want to give different color for each grid line of y axis. Is there any elegant way to do that (I mean - without jQuery and complex css selectors)

请参阅附件图片.

推荐答案

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

You can wrap renderGridLine method from the Tick prototype:

(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事件中设置彩色非洲图表的初始化:

Or set the color afrer chart initialization in a load event:

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

这篇关于蜘蛛海图-每个网格线都有不同的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！