热图值在Highcharts中萎缩

Posted 2021-05-05

我正在使用Highcharts API的最新版本（7.0.1）。我想在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 ';
                            },
                        }
                    }]

            });

提前致谢！

code in jsfiddle

答案

工具提示有奇怪的行为，因为您没有设置默认值等于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 ';
      }
    }
  }]

但是： Ku zxsw Poi

API参考： https://jsfiddle.net/BlackLabel/6jufyeb8/1/