Highcharts：需要熱圖與月，日

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/

Kidly協助我。

任何幫助表示讚賞。 謝謝！

Answer 1

我會做到這一點不使用任何datetime軸。

我會解析出之日起，月和日數，併爲每個數據點，這是一個數組：

[day number, month number, data value] 

然後，您可以爲您的Y軸爲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>' 
          } 
         }], 
      }); 
     });