Highchart热图图表,表示一个月内的天数

时间:2014-09-11 06:57:11

标签: javascript highcharts heatmap

我只需要创建一个高图热图,如下所示:
sample expected highchart

我开发的是在x轴上定义月份名称并将MONTH中的每一天定义为y类别,但问题是高图表会将所有y类别设置为线性位置y轴,相反,我需要它们在7天内分组。我到目前为止实现的代码如下:

    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 40
    },


    title: {
        text: 'Last Six Month'
    },

    xAxis: {
        categories: ['Mar', 'Apr', 'May', 'June', 'July', 'Aug'],

    },



    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 320
    },


    series: [{
        name: 'Last Six Month',
        borderWidth: 1,
        data: [[0,1,2],[0,2,2],[0,3,2],[0,4,2],[0,5,2],[0,6,2],[0,7,2],[0,8,2],[0,9,2],[0,10,2], [1,1,2],[1,2,2],[1,3,2],[1,4,2],[1,5,2],[1,6,2],[1,7,2],[1,8,2],[1,9,2],[1,10,2]],
        dataLabels: {
            enabled: true,
            color: 'black',
            style: {
                textShadow: 'none',
                HcTextStroke: null
            }
        }
    }]

我目前的状态如下: enter image description here如何解决此问题并在几个月内对其进行排序?

1 个答案:

答案 0 :(得分:2)

如果你想使用类别,那么只添加一些空类:

categories: ['Mar', '', '', '', '', 'Apr', '', '', '', '', 'May', '', '', '', '', 'June', '', '', '', '', 'July', ''', '', '', '', Aug'],

或者只使用datetime xAxis。注意:在这种情况下,您需要为每个点使用x值(时间戳)。