Highcharts 热图 - 当分隔值大于“1”时如何使块彼此相邻

Question

附件是我目前遇到的问题的图像。

附件是使用 JSFiddle 手动创建的问题示例

https://jsfiddle.net/ekjrLsz2/

我的目标是让每个块彼此相邻，中间没有所有 space，就像热图显示的默认演示一样。

例如，如果数据是 1 对 1，我可以让它正常工作； 1,2,3,4,5,6

但是如果数据为 5、10、15、20 等...那么您将得到我所附图片中所看到的内容。

所以为了更清楚 X 方向在我的演示图像中是 1 x 1 并且显示没有间距，但是 Y 方向有很大的间距，因为数据没有数字 21,22,23,24 或space 可以这么说，每 5 次之间。

下面是我用来生成图表的代码。

Highcharts.setOptions({
                lang: {
                    decimalPoint: '.',
                    thousandsSep: ','
                }
            });

            Highcharts.chart('heatmap-container', {
    
                chart: {
                    type: 'heatmap',
                    marginTop: 40,
                    marginBottom: 80,
                    plotBorderWidth: 1
                },
            
            
                title: {
                    text: 'Report Data'
                },
            
                xAxis: {
                    //categories: ['1%', '2%', '3%', '4%', '5%', '6%', '7%', '8%', '9%', '10%'],
                    title: {text:$('#x-values').val()},
                    //showEmpty:true,
                },
            
                yAxis: {
                    categories: ['5', '10', '15', '20', '25'],
                    title: {text:$('#y-values').val()},
                    reversed: false,
                    //visible: true,
                    //showEmpty:true,
                },
            
                 colorAxis: {
                  max: goodColorVal,
                  min: badColorVal,
                  reversed: false,
                  tickInterval: 1,
                    //min: -150,
                    //minColor: '#FFFFFF',
                    //maxColor: '#00FF00',//Highcharts.getOptions().colors[4]
                    stops: [
                      [0.0,'#FF0000'],
                      [0.5,'#FFFFFF'],
                      [1.0,"#00FF00"]]
                }, 
                legend: {
                    align: 'right',
                    layout: 'vertical',
                    margin: 0,
                    verticalAlign: 'top',
                    y: 25,
                    symbolHeight: 280,
                    reversed:true
                },
                tooltip: {
                    headerFormat: '',
                    pointFormat: `<b style="text-transform:capitalize;">${$("#x-values option:selected").text()}</b>:{point.x:,.2f} - <b style="text-transform:capitalize;">${$("#y-values option:selected").text()}</b>:{point.y:,.2f} - <b style="text-transform:capitalize;">${$("#z-values option:selected").text()}</b>:{point.value:,.2f}`
                    // formatter: function () {
                    //     return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
                    //         this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
                    // }
                },
                series: [{
                    name: 'Report Data For Input 1',
                    borderWidth: 1,
                    //data: [[0, 0, 10], [0, 1, 19], [0, 2, 9], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
                    data: arraydata, //[[0,0,-87],[1,0,22],[2,0,33],[3,0,55]],
                    dataLabels: {
                        enabled: false,
                        color: '#000000'
                    }
                }],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            yAxis: {
                                labels: {
                                    formatter: function () {
                                        return this.value.charAt(0);
                                    }
                                }
                            }
                        }
                    }]
                }
            
            });

到目前为止，我已经尝试过 pointInterval 和 tickInterval，但没有成功。

Answer 1

让你的点彼此相邻（没有任何空格）的最简单方法是给它们 x 属性而不跳过任何数字，例如 1,2,3,4... 你为什么不尝试这样做呢？

演示：

https://jsfiddle.net/BlackLabel/39vx468s/

要跳过点之间的空白空间，您可以使用中断功能。

API 参考文献：

https://api.highcharts.com/highcharts/xAxis.breaks

演示：

https://jsfiddle.net/BlackLabel/et4kryvz/

xAxis: {
 breaks: [{
  from: 0.5,
  to: 1.5,
  breakSize: 0
 }]
}

还有另一种解决方案，它使用 colsize 和 rowsize 属性。多亏了你可以避免以这种方式完全使用中断，它甚至可以处理浮点数据。

演示：https://jsfiddle.net/87tL3ogh/1/

Highcharts 热图 - 当分隔值大于“1”时如何使块彼此相邻

Highcharts Heatmap - How to get blocks next to each other when separated by more then '1' in value

javascript

jquery

highcharts

heatmap