javascript - 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/

请帮我解决这个问题。

感谢任何帮助。谢谢!

Answer 1

我会在不使用任何日期时间轴的情况下执行此操作。

我将从日期中解析出月份和日期，并为每个数据点设置一个数组:

[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/