HeatMap具有每个单元格的自定义颜色

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/