时间戳

首页 > 解决方案 > Highcharts 热图不呈现正方形或矩形

highcharts - Highcharts 热图不呈现正方形或矩形

问题描述

有人可以帮助我了解这里出了什么问题。一切似乎都很完美。

http://jsfiddle.net/prakash4mail/nt86gj7z/1/

$(function () {

    $('#container').highcharts({

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


        series: [{
            borderWidth: 1,
            data: [[2020-04-01, 18000, 29060],[2020-04-01, 18500, 9920],[2020-04-01, 19000, 32160],[2020-04-02, 18000, 12400],[2020-04-02, 18500, 91880],[2020-04-02, 19000, 54000],[2020-04-03, 18000, 63540],[2020-04-03, 18500, 43420],[2020-04-03, 19000, 43420]],
            dataLabels: {
                enabled: true,
                color: '#000000'
            },
        }]

    });
});

热图显示线条而不是正方形

标签： highchartsheatmap

解决方案

据我了解，您希望实现类似于此处呈现的内容：http: //jsfiddle.net/BlackLabel/o6ywag42/

请注意来自 Highcharts 演示库的此演示中的数据结构如何： https ://jsfiddle.net/BlackLabel/uofntb4y/ - 如果要将点保持为正方形，则“y”值必须一一增长，像这里：http: //jsfiddle.net/BlackLabel/o7bgq1pu/

为了显示您真正的 y 比例，您可以使用类别功能。

yAxis: {
    categories: ['18000', '18500', '19000']
},

API：https ://api.highcharts.com/highcharts/yAxis.categories

编辑：

@prakash 建议的另一个解决方案是使用series.rowsize属性和series.colsize来适应正方形。

API：https ://api.highcharts.com/highcharts/series.heatmap.rowsize

API：https ://api.highcharts.com/highcharts/series.heatmap.colsize

推荐阅读