Карта тепла со строкой времени

Question

Я пытаюсь сделать карту тепла с временной линией в xAxis и иметь возможность отображать ячейку за один интервал, от одной даты до другой.

Это то, что я хотел бы достичь с Highcharts: http://s4.postimg.org/t5hte4xe5/image.png

В тепловой карте клетка получает эти данные: [строка, столбец, значение].

Так что я попробовал 3 варианта для достижения этой цели:

1.- Есть также данные [строки, даты (в качестве объекта даты), значение] -> Highcharts ошибка # 19 (я думаю, его слишком много клещей на оси, но я получил tickInterval)

2.- иметь данные [строки, даты (в качестве объекта даты), значение] и

xAxis: { 
     type: 'datetime', 
    }, 

это то, что я получаю: http://s4.postimg.org/h6ta3jaq5/image.png

3.- Есть как данные [строки, даты (в мс), значение] и

xAxis: { 
     type: 'datetime', 
    }, 

-> до сих пор нет данных, показанных, но Xaxis выглядит нормально.

Это то, что я получаю с 3: http://s30.postimg.org/736gie56p/image.png

Это много данных, 450 ячеек для первого ряда, 350 для второго и 50 для третьего для этого примера, но это может быть Больше.

(В моем случае строки и столбцы обмениваются, поэтому данные - [столбец, строка, значение], как вы можете видеть в правом нижнем углу).

Это то, что я получаю вместо даты (ms или объект даты), я вставляю целое число в качестве столбца (1,2,3 ..): http://s29.postimg.org/kpya21913/image.png -> Он работает, но данные его не в строке времени, как я хотел бы.

Если мне удастся показать ячейку тепла карты в месте, которое он должен идти, я думаю, я мог бы сделать интервал с colsize ...

series: [{ 
     name: '', 
     borderWidth: 0.4, 
     borderColor: 'black', 
     data: myData, 
     dataLabels: { 
      enabled: false, 
      color: 'black', 
      style: { 
       textShadow: 'none', 
       HcTextStroke: null 
      } 
     }, 
    }], 

    chart: { 
     type: 'heatmap', 
     marginTop: 80, 
     marginBottom: 100, 
     width: 1000, 
     height: height 
    }, 

    title: { 
     text: title, 
     style: { 
      font: "30px Helvetica Neue, Helvetica, Arial Unicode MS, Arial, sans-serif", 
     } 
    }, 
    subtitle: { 
     text: subtitle, 
     style: { 
     font: "15px Helvetica Neue, Helvetica, Arial Unicode MS, Arial, sans-serif", 
     color: "#000000" 
     }, 
    xAxis: { 
     type: 'datetime', 
    }, 
    yAxis: { 
     categories: yAxisCategory, //Array with the 3 names shown in the img 
     title: null, 
     labels: { 
      style: { 
      font: "14px Helvetica Neue, Helvetica, Arial Unicode MS, Arial, sans-serif", 
      color: '#000000', 
      } 
     }, 

    }, 
    colorAxis: { 
     min: 0, 
     max: 1, 
     minColor: '#a50022', 
     maxColor: '#007340', 
     gridLineColor: '#000000', 
     stops: [ 
      [0, '#a50022'], 
      [0.5, '#fffbbc'], 
      [1, '#007340'] 
     ], 
    }, 

    legend: { 
     enabled: legendEnabled, 
     symbolHeight: 18, 
     y: 40, 
     symbolWidth:900, 
    }, 

Answer 1

Я думаю, что вы должны работать с colsize возможностью информировать Highcharts, какова ширина каждого прямоугольника на диаграмме. Что-то вроде этого: http://jsfiddle.net/df1rcb29/4/

function generateData() { 
    var d = []; 
    for (var i = 0; i < 100; i++) { 
     d.push([Date.UTC(2013, 0, i), Math.round(Math.random() * 2), Math.random() * 10]) 
    } 
    return d; 
} 

$('#container').highcharts({ 
    chart: { 
     type: 'heatmap' 
    }, 
    xAxis: { 
     type: 'datetime' 
    }, 
    yAxis: { 
     categories: ['a', 'b', 'c'] 
    }, 
    series: [{ 
     colsize: 24 * 36e5, // one day 
     data: generateData() 
    }] 
});