每个单元格的自定义颜色的热图

Question

我正在尝试根据坐标/ x 和 y 轴点为每个单元格生成带有自定义颜色的热图。

现在我做了这个，但它是硬编码的，如何让它动态化，请参考这个demo fiddle，想让这部分对所有颜色都动态化。 TIA

            {x:0,y:0, value:100,color:'red'},
            {x:0,y:1, value:10, color:'red'},
            {x:0,y:2, value:20, color:'red'},
            {x:0,y:3, value:30, color:'red'},
            {x:0,y:4, value:40, color:'red'},
            {x:0,y:0, value:50, color:'red'},

Answer 1

您可以使用加载事件，然后操纵颜色（基于逻辑）。

 events:{
            load:function() {
                var points = this.series[0].data,
                    lenY = this.yAxis[0].tickPositions.length - 1,
                    lenX = this.xAxis[0].tickPositions.length - 1,
                    x = lenX,
                    tmpX = 0,
                    y = 0,
                    j = 0;

                $.each(points, function(i, p){

                    if(p.x == 0 || p.y == 0) {
                        p.update({
                            color: 'red'
                        },false);
                    } else if(p.x > 0 && p.y > 0 && (p.y == x  || (p.y + 1) == x)) {
                        p.update({
                            color: 'green'
                        },false);

                        if(p.y == x)
                            x--;

                    } else if(p.x > 1 && p.y > 0 && p.y > x) {
                        p.update({
                            color: 'orange'
                        },false);
                    } else if(p.x > 0 && p.y > 0 && x > 2) {
                         p.update({
                            color: 'yellow'
                        },false);
                    }

                });

                this.isDirty = true;
                this.redraw();
            }
        }

示例：http://jsfiddle.net/4aqhB/260/