Блог

Прилагается изображение проблемы, с которой я в настоящее время сталкиваюсь.

Прилагается пример проблемы, созданной вручную с помощью JSFiddle

https://jsfiddle.net/ekjrLsz2/

Моя цель состоит в том, чтобы каждый из блоков был рядом друг с другом без всего промежутка между ними, как в демонстрациях по умолчанию для показа тепловой карты.

Я могу заставить его работать правильно, если данные идут 1 на 1, например; 1,2,3,4,5,6

Но если данные будут 5,10,15,20 и т. Д…. Тогда вы получите то, что видите на моем прикрепленном изображении.

Поэтому, чтобы быть более ясным, направление X на моем демонстрационном изображении 1 на 1 и отображается без интервалов, однако направление Y имеет большой интервал, поскольку в данных нет чисел 21,22,23,24 или, так сказать, промежутка между каждые 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, но пока безуспешно.

Самый простой способ расположить ваши точки рядом друг с другом (без пробелов) — это присвоить им атрибуты 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/