Highcharts.js：在缩放时调整大小的绘图带中的图案

Question

我的网页上有一个highcharts.js图表​​，代表设备的每小时状态。我想在每个状态轴上添加刻度线，表示一小时（一半和四分之一）的分区。 目前我设法添加数据并创建我需要的图表样式，并添加了带有png模式的highcharts模式填充插件（只是测试，模式只是为了了解我想要获得的内容并且将适合到间隔）。

目前我每小时都会添加一个情节带：

var width = $('.highcharts-plot-background').width()/24;
var height = $('.highcharts-plot-background').height();

for (i=0;i<24;i++) {
  chart.xAxis[0].addPlotBand({
      from: i, // Start of the plot band
      to: i+1, // End of the plot band
      color: { 
        pattern:'https://s28.postimg.org/8ujsr438d/pattern.png',
        width: width,
        height: height
      }
    });
}

Full JSFiddle

我遇到的问题是由于我将模式添加到每个绘图带（小时）并根据图表的初始大小计算其尺寸。这在我显示图表时工作正常，但如果我想添加缩放功能，则图案背景不会调整大小。有没有办法实现这个目标？

感谢。