Значения тепловой карты теряют значение в Highcharts

Question

Я использую последнюю версию (7.0.1) API Highcharts.Я хочу видеть мои данные на карте высокой температуры.После того, как я установил свои данные, все работает хорошо, за исключением того, что при наведении курсора на данные в подсказке показывается еще 3 точки слева, и эффект наведения не работает.Я также показываю дату и время в этой подсказке, и они верны.Так что проблема в ценностях.

Когда я изменяю значения boostThreshold и turboThreshold, деактивирую их, я вижу, что истинные значения и эффект наведения начинают работать, но после изменения мой эффект наведения мыши остается и меняет свой оригинальный цвет.И я пытаюсь отключить эффект наведения, и он тоже не работает.

В примере карты тепла значение должно быть 66

Вот как я инициализирую карту тепла.

heatmap = Highcharts.chart('heatmap', {
                chart: {
                    backgroundColor: '#FBFCFD',
                    type: 'heatmap',
                    inverted: true
                },
                boost: {
                    useGPUTranslations: true
                },
                title: {
                    text: 'Aktif Tüketim Haritası',
                    margin: 5,
                    style: {"font-family": "titillium_websemibold"}

                },
                xAxis: {
                    endOnTick: true,
                    startOnTick: true,
                    type: 'datetime',
                    tickPixelInterval: 30,
                    labels: {
                        format: '{value:%d %B}'
                    },
                    reversed: false
                },
                plotOptions: {
                    heatmap: {
                        states: {
                            hover: {
                                enabled: false
                            }
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: null
                    },
                    minPadding: 0,
                    maxPadding: 0,
                    min: 0.0,
                    max: 23.0
                },
                colorAxis: {
                    stops: [
                        [0, 'white'],
                        [0.25, 'YellowGreen'],
                        [0.50, 'yellow'],
                        [0.75, 'DarkOrange'],
                        [1, 'Maroon']
                                /*[0, '#3060cf'],
                                 [0.5, '#fffbbc'],
                                 [0.9, '#c4463a'],
                                 [1, '#c4463a']*/
                    ],
                    labels: {
                        format: '{value} kVA'
                    }
                },
                legend: {
                    symbolWidth: 550
                },
                exporting: {enabled: false},
                series: [{
                        states: {
                            hover: {
                                enabled: false
                            }
                        },
                        boostThreshold: 100,
                        turboThreshold: Number.MAX_VALUE,
                        borderWidth: 0,
                        nullColor: '#EFEFEF',
                        colsize: 24 * 36e5, // one day
                        tooltip: {
                            headerFormat: 'Aktif Tüketim<br/>',
                            pointFormatter: function () {
                                var decs = this.y.toString().split(".");
                                var minute;
                                if (!decs[1]) {
                                    minute = '00';
                                } else {
                                    minute = Math.round(parseInt(decs[1].padEnd(2, "0")) * 60 / 100);
                                    minute = minute.toString().padStart(2, "0");
                                }
                                var real = decs[0] + ':' + minute;
                                return Highcharts.dateFormat('%e %b, %Y', new Date(this.x)) + ':' + real + ':<b>' + this.value + '</b> kVA ';
                            },
                        }
                    }]

            });

Заранее спасибо!

код в jsfiddle

Answer 1

Подсказка имеет странное поведение, потому что вы не установили rowsize, который по умолчанию равен 1.Проверьте демонстрацию, размещенную ниже.

Код:

  series: [{
    //boostThreshold: 100,
    turboThreshold: Number.MAX_VALUE,
    borderWidth: 0,
    nullColor: '#EFEFEF',
    colsize: 24 * 36e5, // one day
    rowsize: 0.1666666666,
    tooltip: {
      headerFormat: 'Aktif Tüketim<br/>',
      pointFormatter: function() {
        var decs = this.y.toString().split(".");
        var minute;
        if (!decs[1]) {
          minute = '00';
        } else {
          minute = Math.round(parseInt(decs[1].padEnd(2, "0")) * 60 / 100);
          minute = minute.toString().padStart(2, "0");
        }
        var real = decs[0] + ':' + minute;
        return Highcharts.dateFormat('%e %b, %Y', new Date(this.x)) + ':' + real + ':<b>' + this.value + '</b> kVA ';
      }
    }
  }]

Демо:
https://jsfiddle.net/BlackLabel/6jufyeb8/1/

Справочник по API:
https://api.highcharts.com/highcharts/series.heatmap.rowsize