Тепловая карта с индивидуальными цветами для каждой ячейки

я пытаюсь создать тепловую карту с пользовательскими цветами для каждой ячейки на основе координат / точек осей x и y.

пример тепловой карты

Теперь в скрипте я сделал это, но он жестко запрограммирован, как сделать его динамическим, пожалуйста, обратитесь к этой демонстрационному скрипту, хотел сделать эту часть динамической для всех цветов. ТИА

            {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'},

javascript highcharts heatmap
person GeekExplorer    schedule 28.04.2015    source источник
comment
Что вы имеете в виду под динамическим? Что вам нужно? Просто возможность изменить его один раз после установки?   -  person Halvor Holsten Strand    schedule 28.04.2015
comment
Здесь, вручную передавая X, Y и значение... Я получаю то же самое из БД в виде объекта массива. Итак, как передать эти значения в диаграмму. Пожалуйста, обратитесь к скрипке, чтобы понять, чего я пытаюсь достичь.   -  person GeekExplorer    schedule 28.04.2015
comment
Похоже, проблема заключается в простом преобразовании данных БД в правильный формат для передачи данных в параметры Highcharts.   -  person Halvor Holsten Strand    schedule 28.04.2015
comment
Нет. Я получаю значения категории, серии и меры из БД, теперь я должен придать цвет этим ячейкам, и это должно быть динамическим (относится к тому, что даже когда количество категорий/серий изменяется, цветовая структура графика не должна меняться , он должен настроить значения Cateory и Series), в скрипте я жестко закодировал координату, которая мне нужна, чтобы сделать этот динамический ссылка   -  person GeekExplorer    schedule 29.04.2015

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать событие загрузки, а затем манипулировать цветами (на основе логики).

 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/

person Sebastian Bochan    schedule 29.04.2015
comment
Спасибо, @Sebastian, можем ли мы сделать то же самое, например, для точек/координат {x:0,y:0}, цветовая структура для каждой ячейки такая же, как у вас. Еще раз спасибо сделал мой день .... - person GeekExplorer; 29.04.2015
comment
Все зависит от условий, я готовлю пример бэда по вашему макету. - person Sebastian Bochan; 29.04.2015