Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: GeekExplorerОтветов: 1

я пытаюсь создать тепловую карту с пользовательскими цветами для каждой ячейки на основе координат / точек осей 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'},
  • Что вы имеете в виду под динамическим? Что вам нужно? Просто возможность изменить его один раз после установки? Halvor Holsten Strand 28.04.2015
  • Здесь, вручную передавая X, Y и значение... Я получаю то же самое из БД в виде объекта массива. Итак, как передать эти значения в диаграмму. Пожалуйста, обратитесь к скрипке, чтобы понять, чего я пытаюсь достичь. GeekExplorer 28.04.2015
  • Похоже, проблема заключается в простом преобразовании данных БД в правильный формат для передачи данных в параметры Highcharts. Halvor Holsten Strand 28.04.2015
  • Нет. Я получаю значения категории, серии и меры из БД, теперь я должен придать цвет этим ячейкам, и это должно быть динамическим (относится к тому, что даже когда количество категорий/серий изменяется, цветовая структура графика не должна меняться , он должен настроить значения Cateory и Series), в скрипте я жестко закодировал координату, которая мне нужна, чтобы сделать этот динамический ссылка GeekExplorer 29.04.2015

javascripthighchartsheatmap

Ответы

Ответ 1 · Sebastian Bochan

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

 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/

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы