高图动态尺寸的自定义标记符号

Question

我正在显示水平x轴的图表，水平x轴是反映最近24小时的日期/时间轴。折线图中的每个点表示此24小时周期内1小时时间间隔的开始时间。并非每隔1小时就有一个点。对于每个这样的点，我想使用一个矩形标记符号来表示该点，并且我希望绘制的矩形从实际点（1小时时间间隔的开始时间）开始，并且始终具有一个宽度，以精确地表示沿日期/时间x轴1小时。连续的1小时间隔应该很好，并且不要重叠或有空格。此外，如果调整了x轴的大小（例如，当调整窗口大小时），它必须是动态的并以新的大小重新绘制。

据我所知，不支持开箱即用的矩形标记符号，因此我尝试使用Highcharts.SVGRenderer定义一个函数来绘制此矩形并将该函数分配给series：marker：symbol。该功能定义如下。请注意，为标记设置的半径中的常数5似乎控制了传递给函数的x，y，w和h的值。此功能似乎在图形的初始负载上运行良好。但是，如果我调整窗口的大小，以便调整图表的大小，则标记的调整大小将不如我期望的那样好。值hourPixels发生了预期的变化，但并非所有标记都被重绘以反映新的大小。如果我在调整大小后刷新浏览器，则会重新绘制图形并正确绘制标记。是否有关于如何使标记符号在调整大小时正确呈现而不需要刷新浏览器的建议？或者，也许有完全不同的方式来实现这一目标。我已经附上了它的屏幕截图。

function createCustomSymbol() {
  Highcharts.SVGRenderer.prototype.symbols.rect = function(x, y, w, h) {
    var startPixel = me.chart.xAxis[0].toPixels(me.chart.xAxis[0].min, false);
  var hour = me.chart.xAxis[0].min + ONE_HOUR_IN_MS;
  var endPixel = me.chart.xAxis[0].toPixels(hour, false);
  var hourPixels = endPixel - startPixel;

  return ['M', x + 5, y, 'L', x + 5 + hourPixels, y, 'L', x + 5 + 
    hourPixels, y + h, 'L', x + 5, y + h, 'Z'];
  };
  if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.rect = 
      Highcharts.SVGRenderer.prototype.symbols.elipse;
  }
}