Тепловая карта HighChart с данными JSON

#highcharts

#верхние уровни

Вопрос:

Я пытаюсь интегрировать данные, специфичные для JSON, в тепловую карту, предлагаемую highmaps / highcharts.

Пример на

Ссылка на демонстрационную тепловую карту

показывает, как использовать CSV-подход для загрузки данных. Но я не смог запустить ее с массивом JSON. Может ли кто-нибудь предоставить эквивалент CSV из примера, чтобы получить такую же тепловую карту, или показать мне путь к другому примеру, основанному на JSON?

Заранее благодарю.

Приветствую Питера

Ответ №1:

Вам нужно преобразовать это в точку col / row вместо строки даты. У вас будет 2 оси категорий: x и y. Затем индекс оси x / y становится [x, y, значение]. Итак, если ваши данные начинаются с «2013-04-01», то это ваш первый индекс, который [ ["2013-04-01",0,-0.7], ["2013-04-02",0,-3.4], ["2013-04-03",0,-1.1] ] становится:

 [ [0,0,-0.7], [1,0,-3.4], [2,0,-1.1] ]

Обратите внимание, что это всего лишь одна строка данных. Какой у вас y компонент?

РЕДАКТИРОВАТЬ: Если вашим компонентом yAxis будет время суток, то вы должны настроить свой axii следующим образом:

 xAxis: {
    categories: ['2013-04-01', '2013-04-02', '2013-04-03'],
    labels: {
        rotation: 90
    }
},
yAxis: {
    title: {
        text: null
    },
    labels: {
        enabled: false
    },
    categories: ['Midnight', '1 am', '2 am', '3 am', '4 am', '5 am', '6 am', '7 am', '8 am', '9 am', '10 am', '11 am', 'Noon', '1 pm', '2 pm', '3 pm', '4 pm', '5 pm', '6 pm', '7 pm', '8 pm', '9 pm', '10 pm', '11 pm'],
    min: 0,
    max: 23,
    reversed: true
},

Тогда ваша серия выглядела бы примерно так:

 series: [{
    borderWidth: 0,
    nullColor: '#EFEFEF',
    data: [ [0,0,-0.7], [1,0,-3.4], [2,0,-1.1] ]
}]

Живая демонстрация.

Я добавил туда другие элементы, с которыми я позволю вам разобраться (зачем я устанавливаю reversed: true , какова цветовая ось и т.д.). Важно отметить, что series.data формат отличается от любой другой настройки highchart.

1. что ж, вторая часть внутреннего массива — это время суток. Это был бы компонент y, но если я взгляну на пример тепловой карты, основанный на файле CSV. Как это можно сделать следующим образом: дата, время, температура 2013-01-01,0,1.3 2013-01-01,1,1.4

2. Хорошо, итак, у вас есть некоторый диапазон времени для каждого дня. Это действительно просто. Ваш массив становится [ [dayIndex, hourIndex, value]...] .

3. хорошо, но тогда… как я могу задать определение осей x и y? при синтаксическом анализе CSV кажется, что дата автоматически преобразуется в объект Date. jsfiddle.net/gh/get/jquery/1.9.1/highslide-software /…

4. Вам нужно установить ваши xAxis.categories значения в днях, а ваши yAxis.categories — в часах. Позвольте мне привести пример.

5. Заранее благодарю. Я попробую. На основе данных, которые я получаю из серверного приложения, я должен быть в состоянии создавать объекты javascript для категорий и данные для рядов. Может быть довольно много, потому что я хочу отобразить там до нескольких тысяч значений, но давайте посмотрим 🙂