Highcharts热图不显示正方形或矩形。

问题描述 投票:0回答:2

谁能帮我了解一下这里的问题。一切看起来都很完美。

http:/jsfiddle.netprakash4mailnt86gj7z1

$(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'
            },
        }]

    });
});

热力图显示线条而不是方块

highcharts heatmap
2个回答
0
投票

准确的答案是 行数: 500 (从UI角度看--高度。各点之间的Y轴差)和 colsize: 86400000 每一天,每点之间的x轴差)。缺少了这一点,就会导致盒子不显示。


0
投票

据我了解,你想实现的东西是呈现在这里。http:/jsfiddle.netBlackLabelo6ywag42。

请注意这个来自Highcharts演示基地的演示中的数据结构是怎样的。https:/jsfiddle.netBlackLabeluofntb4y - 如果你想保持点的正方形,'y'的值必须一个一个的增长,就像这里。http:/jsfiddle.netBlackLabelo7bgq1pu

而要显示你真正的y规模,你可以使用分类功能。

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

API。https:/api.highcharts.comhighchartsyAxis.categories.


EDIT:

@prakash建议的另一个解决方案是使用 系列.行大小 财产和 系列.colsize 以适应方块。

API。https:/api.highcharts.comhighchartsseries.heatmap.rowsize。

API。https:/api.highcharts.comhighchartsseries.highchartsseries.heatmap.colsize。

© www.soinside.com 2019 - 2024. All rights reserved.