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/