在 HighCharts 柱形时间序列图表中，十字线未按预期工作

Question

提前致谢。

我尝试在 xAxis 上应用十字准线，但它在每列上显示非常细的灰色背景线。我想在 xAxis 组上显示十字准线。在柱形图和条形图时间表中需要这种行为。

准备好jsfiddle。

使用普通柱形图jsfiddle

    Highcharts.chart('container', {
  chart: {
    type: "column",
  },
  legend: {
    enabled: false
  },
  xAxis: {
    labels: {
      format: "{value:%b %e}"
    },
    tickInterval: 604800000,
    type: "datetime",
    min: 1569888000000, // 2019-10-01T00.00.00.000Z
    tickPositioner: function() {
      this.tickPositions[0] = 1569888000000; // 2019-10-01T00.00.00.000Z
      return this.tickPositions;
    },
    crosshair: true
  },
  series: [{
    data: [{
      x: 1569888000000, // 2019-10-01T00.00.00.000Z
      y: 952,
    }, {
      x: 1570492800000,
      y: 1082,
    }, {
      x: 1571097600000,
      y: 856,
    }, {
      x: 1571702400000,
      y: 1264,
    }, {
      x: 1572307200000,
      y: 1004,
    }, {
      x: 1572912000000,
      y: 1121,
    }],
  }]
});

所以想显示灰色背景完全覆盖的列。

在下面的图像中，您可以看到我得到了带有细线的黄色突出显示的灰色阴影，但我需要像下一个图像中那样的结果。因此，只有结构发生变化，我使用柱形时间序列图，在这种情况下，灰色阴影无法正确显示。对于其他柱形图，灰色阴影可以正常显示。

Answer 1

对于

datetime

轴类型，需要重写Highcharts函数来实现：

(function(H) {
  H.wrap(H.Axis.prototype, 'drawCrosshair', function(proceed, e, point) {
    proceed.apply(this, e, point);

    if (this.isXAxis) {
      const points = this.series[0].points,
        length = points[1].plotX - points[0].plotX;

      if (this.dateTime) {
        this.cross.attr({
          stroke: H.Color.parse("#ccd3ff").setOpacity(0.25).get(),
          'stroke-width': length
        });
      }     
    }
  });
}(Highcharts));

演示： https://jsfiddle.net/BlackLabel/Lj3kgen0/

参考： https://www.highcharts.com/forum/viewtopic.php?f=9&t=50829