Highcharts: Нужно Heatmap с месяцем и датой

Question

я сформировавшийся после тепловой карты с помощью Highcharts heatmap-highchart

На Y-оси отображает месяцы, но и на X-ось он должен отображать только дни месяца, как [1,2,3, 4, ....... 29,30,31] и тепловой карте.

это желаемый результат

desired heat map

Здесь код

<script src="http://www.highcharts.com/lib/jquery-1.7.2.js" type="text/javascript"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/maps/modules/map.js"></script> 
<script type="text/javascript"> 
    jQuery.noConflict(); 

    var example = 'heatmap', 
     theme = 'default'; 

    (function ($) { // encapsulate jQuery 
     $(function() { 

      $('#container').highcharts({ 

       data: { 
        csv: document.getElementById('csv').innerHTML 
       }, 

       chart: { 
        type: 'heatmap', 
        inverted: false 
       }, 


       title: { 
        text: 'Highcharts heat map [test]', 
        align: 'right' 
       }, 

       subtitle: { 
        text: 'Temperature variation by day and hour through Nov 2015', 
        align: 'right' 
       }, 

       yAxis: { 
        labels: { 
         format: '{value}' 
        }, 

        categories: ['0','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],  

        tickWidth: 1, 
        min: 1, 
        max: 12 
       }, 

       xAxis: { 

        type: 'datetime', 
        tickPixelInterval: 1, 
        min: Date.UTC(2015, 10, 20), 
        max: Date.UTC(2015, 11, 10), 
        labels: { 
         step: 1, 
          }, 
        }, 

       colorAxis: { 
        stops: [ 
      [0, '#20255A'], 
      [0.5, '#4B8EE2'], 
      [0.9, '#AAEBFF'] 
     ], 
        min: 1, 
        max: 40 
       }, 

       series: [{ 
        borderWidth: 0, 
        colsize: 24 * 36e5, // one day 
        tooltip: { 
         headerFormat: 'Power Generated<br/>', 
         pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} kWh</b>' 
          } 
         }], 
      }); 
     }); 
    })(jQuery); 
</script> 

<!--[X,Y,Val]--> 
       <pre id="csv" style="display: none">Date, Time, Temperature 
2015-11-01,11,6.94 
2015-11-02,11,14.6 
2015-11-03,11,25.3 
2015-11-04,11,27.2 
2015-11-05,11,10.5 
2015-11-06,11,4.77 
2015-11-07,11,7.98 
2015-11-08,11,26.9 
2015-11-09,11,23.4 
2015-11-10,11,2.2 
2015-11-11,11,4.11 
2015-11-12,11,2.82 
2015-11-13,11,24.8 
2015-11-14,11,24.1 
2015-11-15,11,26.1 
2015-11-16,11,24.9 
2015-11-17,11,27.9 
2015-11-18,11,15.0 
2015-11-19,11,7.72 
2015-11-20,11,23.3 
2015-11-21,11,26.8 
2015-11-22,11,3.58 
2015-11-23,11,27.8 
2015-11-24,11,24.7 
2015-11-25,11,12.2 
2015-11-26,11,17.7 
2015-11-27,11,22.4 
2015-11-28,11,7.59 
2015-11-29,11,21.7 
2015-11-30,11,18.3 

2015-11-01,12,5.33 
2015-11-02,12,2.55 
2015-11-03,12,13.8 
2015-11-04,12,24.0 
2015-11-05,12,23.1 
2015-11-06,12,23.1 
2015-11-07,12,19.4 
2015-11-08,12,16.8 
2015-11-09,12,21.0 
2015-11-10,12,20.5 
2015-11-11,12,15.1 
2015-11-12,12,18.1 
2015-11-13,12,11.6 
2015-11-14,12,4.71 
2015-11-15,12,21.5 
2015-11-16,12,14.2 
2015-11-17,12,2.40 
2015-11-18,12,1.95 
2015-11-19,12,19.8 
2015-11-20,12,22.8 
2015-11-21,12,8.48 
2015-11-22,12,2.45 
2015-11-23,12,7.00 
2015-11-24,12,7.36 
2015-11-25,12,13.8 
2015-11-26,12,7.97 
2015-11-27,12,4.09 
2015-11-28,12,16.3 
2015-11-29,12,2.73 
2015-11-30,12,2.67 
2015-11-31,12,16.4 
       </pre> 
</body> 

jsfiddle здесь: jsfiddle.net/zor_el/Lrejpk69/

Помогите мне с этим.

Любая помощь приветствуется. спасибо!

Answer 1

Я хотел бы сделать это без использования каких-либо datetime осей.

Я бы разобрать месяц и номер дня от даты, и установить массив для каждой точки данных, которая была:

[day number, month number, data value] 

Затем вы можете установить минимальное и максимальное для вашей оси у, как 0- 11, а для вашей оси x - 1-31.

Результирующий набор данных выглядит следующим образом:

[ 
[1, 10, 6.94], 
[2, 10, 14.6], 
[3, 10, 25.3], 
[4, 10, 27.2], 
[5, 10, 10.5], 
[6, 10, 4.77], 
[7, 10, 7.98] 
... 
] 

И полученный график можно увидеть здесь:

• http://jsfiddle.net/jlbriggs/e12xLbe1/

Answer 2

Проверить обновленную скрипку http://jsfiddle.net/Lrejpk69/30/

 $(function() { 

      $('#container').highcharts({ 

       data: { 
        csv: document.getElementById('csv').innerHTML 
       }, 

       chart: { 
        type: 'heatmap', 
        inverted: false 
       }, 


       title: { 
        text: 'Highcharts heat map [test]', 
        align: 'right' 
       }, 

       subtitle: { 
        text: 'Temperature variation by day and hour through Nov 2015', 
        align: 'right' 
       }, 

       yAxis: { 
        labels: { 
         format: '{value}' 
        }, 

        categories: ['0','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],  

        tickWidth: 1, 
        min: 1, 
        max: 12 
       }, 

       xAxis: { 

        type: 'datetime', 
        tickPixelInterval: 1, 
        min: Date.UTC(2015, 10, 10), 
        max: Date.UTC(2015, 11, 10), 
        dateTimeLabelFormats: { 
      day: '%e' 
     }, 
        labels: { 
         step: 1, 
          }, 
        }, 

       colorAxis: { 
        stops: [ 
      [0, '#20255A'], 
      [0.5, '#4B8EE2'], 
      [0.9, '#AAEBFF'] 
     ], 
        min: 1, 
        max: 40 
       }, 

       series: [{ 
        borderWidth: 0, 
        colsize: 24 * 36e5, // one day 
        tooltip: { 
         headerFormat: 'Power Generated<br/>', 
         pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} kWh</b>' 
          } 
         }], 
      }); 
     });