Highcharts - Heatmap [xaxis问题,改进建议]

时间:2017-07-09 00:55:29

标签: javascript highcharts data-visualization heatmap

我正在尝试使用highcharts创建热图。

如下图所示 enter image description here

正如您所看到的那样,在x轴上,3月份之后会有一个空白部分。如何删除它以使10月到3月的范围完全适合x轴。

其次,我如何改进配色方案或使其显得更好。

以上热图的代码

Highcharts.chart('container', {

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

    chart: {
        type: 'heatmap',
        margin: [60, 10, 80, 50]
    },

    boost: {
        useGPUTranslations: true
    },

    title: {
        text: 'Traffic',
        align: 'center',
        x: 40
    },

    subtitle: {
        text: 'Source: yyy',
        align: 'center',
        x: 40
    },

    xAxis: {
        type: 'datetime',
        min: Date.UTC(2016, 9, 1),
        max: Date.UTC(2017, 4, 0),
        labels: {
            align: 'left',
            x: 5,
            y: 14,
            format: '{value:%B}' // long month
        },
        showLastLabel: false,
        tickLength: 16
    },

    yAxis: {
        title: {
            text: null
        },
        labels: {
            format: '{value}:00'
        },
        minPadding: 0,
        maxPadding: 0,
        startOnTick: false,
        endOnTick: false,
        tickPositions: [0, 6, 12, 18, 24],
        tickWidth: 1,
        min: 0,
        max: 23,
        reversed: true
    },

    colorAxis: {
        stops: [
            [0, '#3060cf'],
            [0.1, '#66aee2'],
            [0.2, '#8ec5ed'],
            [0.3, '#4ee8b4'],
            [0.4, '#7ee567'],
            [0.5, '#fffbbc'],
            [0.6, '#f2c05e'],
            [0.7, '#ed9549'],
            [0.8, '#ed7031'],
            [0.9, '#ed4d21'],
            [1, '#c4463a']
        ],
        min: 1000,
        max: 150000,
        startOnTick: true,
        endOnTick: true,
        labels: {
            format: '{value}'
        }
    },

    series: [{
        boostThreshold: 100,
        borderWidth: 0,
        nullColor: '#EFEFEF',
        colsize: 24 * 36e5, // one day
        tooltip: {
            headerFormat: 'Hits<br/>',
            pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value}</b>'
        },
        turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
    }]

});

0 个答案:

没有答案