热图 yAxis 更改未按预期工作

Question

我有一个热图（see fiddle here 和下面的代码），我想通过让用户按下按钮来更改 Y 轴（参见 fiddle）。这个想法是你最多看到10年。

但是，当通过 Y 轴的更新方法更改 min/max 值时，它开始在 X 轴处交叉，并且您只能看到当年波段的一半（并且只有一半）最高年份）与原始视图相比。这与规范相矛盾，该规范说所有未更改的轴选项在设置时保持不变，例如min/max.

因此，在开始位置，您将 2008 年和 2018 年视为一个整体条，当您开始更改时，顶部和底部条变为一半。

如何防止这种影响并使 bottom/top 年显示在 'full height'？

var thisHeatmap;
function HeatmapPrev() {
  let minValue = thisHeatmap.yAxis[0].min;
  let maxValue = thisHeatmap.yAxis[0].max;
  if (minValue - 10 <= 2008) minValue = 2008;
  else minValue -= 10;
  maxValue = minValue + 10;
  thisHeatmap.yAxis[0].update({min: minValue, max: maxValue}, true);
}

function HeatmapNext() {
  let minValue = thisHeatmap.yAxis[0].min;
  let maxValue = thisHeatmap.yAxis[0].max;
  if (maxValue + 10 >= 2020) maxValue = 2020;
  else maxValue += 10;
  minValue = maxValue - 10;
  thisHeatmap.yAxis[0].update({min: minValue, max: maxValue}, true);
}

thisHeatmap = Highcharts.chart('chartcontainer', {
chart: {type: 'heatmap'},
boost: {useGPUTranslations: true},
xAxis:{
  title: {text: 'Day number'},
  min: 1, max: 366,
},
yAxis:{
  title:{text: 'Years'},
  min: 2008, max: 2018
}, 
data[] }] });

Answer 1

更新轴极值时，不会添加 y 轴上的额外填充。作为由 0.5 计算的极值和禁用属性更改的解决方案：startOnTick、endOnTick.

thisHeatmap.yAxis[0].update({
    min: minValue - 0.5,
    max: maxValue + 0.5
}, true);

    yAxis: {
        ...,
        startOnTick: false,
        endOnTick: false
    }

现场演示： https://jsfiddle.net/BlackLabel/cjsmn0re/

API参考：

https://api.highcharts.com/highcharts/yAxis

https://api.highcharts.com/highcharts/series.heatmap.rowsize

热图 yAxis 更改未按预期工作

Heatmap yAxis change does not work as expected

javascript

highcharts