javascript - Highcharts 中的热图值正在消失

Question

我正在使用最新版本 (7.0.1) 的 Highcharts API。我想在 Highcharts 热图上查看我的数据。设置数据后，一切工作正常，只是当我将鼠标悬停在数据上时，工具提示中会显示向左 3 点的值，并且悬停效果不起作用。我还在该工具提示中显示了日期和时间，它们是正确的。所以问题出在值(value)观上。

当我更改 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 ';
                            },
                        }
                    }]

            });

提前致谢!

code in jsfiddle

Answer 1

工具提示有奇怪的行为，因为您没有设置默认等于 1 的 rowsize。检查下面发布的演示。

代码:

  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