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/