Highcharts时间序列柱状图X轴十字准线显示异常求助

问题描述 #

为时间序列柱状图/条形图设置X轴crosshair时，仅显示柱子上的细灰色线条，期望十字准线的灰色背景能完全覆盖整根柱子。普通非时间序列柱状图的十字准线显示正常，仅时间序列场景存在该问题。

当前效果 #

期望效果 #

复现代码 #

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

解决方法 #

修改X轴的crosshair配置，添加fullWidth: true参数，让十字准线自动匹配柱子宽度，覆盖整根柱子。如果需要更精准控制，可搭配shape和zIndex参数。

修改后的代码 #

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: {
      fullWidth: true, // 核心配置：让十字准线覆盖整根柱子
      shape: 'rect',
      zIndex: 1
    }
  },
  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,
    }],
  }]
});

原因说明 #

时间序列X轴的默认crosshair是基于刻度线的细线样式，而fullWidth: true会触发Highcharts自动计算柱子的宽度，生成覆盖整根柱子的矩形十字准线，效果和普通分类轴的十字准线一致。

内容的提问来源于stack exchange，提问作者Jeet Bhatt