Javascript Highcharts.js：在缩放时调整大小的打印栏中的图案

我的网页上有一个highcharts.js图表，表示设备的每小时状态。我想在每个状态轴上添加记号，表示一小时（半小时和四分之一小时）的划分。 目前，我设法添加了数据，创建了我需要的图表样式，并添加了带有png模式的highcharts模式填充插件（只是测试，该模式只是为了了解我想要获得的内容，并将与时间间隔相匹配）

目前，我为每小时添加PlotBand，如下所示：

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
      }
    });
}

var-width=$（'.highcharts-plot-background'）.width（）/24；
变量高度=$（'.highcharts打印背景'）.height（）；
对于（i=0；我要澄清的是，图表缩放功能不是文字缩放，这可能是您所期望的-它是对轴的调整，以反映所需的数据范围。您必须构建一个使用结果轴缩放的功能，并相应地调整图像的缩放。是的，我理解。我用一个有趣的方法更新了我的小提琴应该用正确调整大小的图像填充整个间隔的操作，但我仍然无法从轴获取准确的最小值和最大值，并且它不能始终按预期工作。看起来你用ceil函数键入了错误的地板-我最终用highcharts css样式为网格线进行了设置，看起来很好。更新了FIDLE。Th由于网格线的笔划dasharray长度具有非整数值，浏览器之间存在一些不一致。从不同的浏览器导出png时可以看到这一点。除此之外，我认为我将暂时使用此解决方案，因为plotband背景的缩放效果不好。