组合折线图和柱形图会弄乱 x 轴

Question

我有这样的折线图：

Highcharts.chart('container', {
  "series": [{
    "data": [{
      "x": 0,
      "y": 2
    }, {
      "x": 10,
      "y": 2
    }],
    "type": "line"
  }],
  "chart": {
    "height": 300
  },
  "xAxis": {
    "min": 0,
    "max": 10
  },
});

和这样的柱形图：

Highcharts.chart('container', {
  "series": [{
    "data": [{
      "x": 5,
      "y": 1
    }],
    "type": "column"
  }],
  "chart": {
    "height": 300
  },
  "xAxis": {
    "min": 0,
    "max": 10
  },
});

我想把它们结合起来。列是测量值，线代表某种阈值。

我的代码：

Highcharts.chart('container', {
  "series": [{
    "data": [{
      "x": 0,
      "y": 2
    }, {
      "x": 10,
      "y": 2
    }],
    "type": "line"
  }, {
    "data": [{
      "x": 5,
      "y": 1
    }],
    "type": "column"
  }],
  "chart": {
    "height": 300
  },
  "xAxis": {
    "min": 0,
    "max": 10
  },
});

我期望的样子：

实际的样子：

我最初认为这是一个错误，所以我在 GitHub 上创建了一个错误报告，但我被告知这是按预期工作的。

我需要 x 轴是正确的，因为我在同一页面上有其他图表具有匹配的 x 轴范围。我怎样才能得到正确的范围和刻度？

如果你想解决这个问题，这里有一个 JSFiddle

Answer 1

几周前我遇到了同样的问题。我通过在列系列中添加

pointRange: 1

来解决它。

完整代码：

Highcharts.chart('container', {
  "series": [{
    "data": [{
      "x": 0,
      "y": 2
    }, {
      "x": 10,
      "y": 2
    }],
    "type": "line"
  }, {
    "data": [{
      "x": 5,
      "y": 1
    }],
    "type": "column",
    "pointRange": 1
  }],
  "xAxis": {
    "min": 0,
    "max": 10
  }
});