Highcharts：组合线和柱形图 - 左/右侧的开始/结束线，而不是柱形图数据点

Question

我使用列和折线图组合。问题是在折线图中最左边和最右边的点位于柱形图的相应条形图的中间。我想在图表的左/右侧延伸线条（看看我绘制的深红色线条）。任何想法如何实现它？

我找到的一个可能的解决方案是在两侧添加带有null的其他数据点，然后使用楼层天花板来“隐藏”它们。它有效，但这是一个我不喜欢使用的黑客，应该建立它的能力..

Answer 1

对于那些对解决方案感兴趣的人，可以在这里添加带有null的其他数据点。这是我到目前为止找到的唯一方法。请注意数据＆＃39;，＆＃39; floor，＆＃39; ceiling＆＃39;，＆＃39;类别＆＃39;的行。但我仍然认为这是一个黑客攻击，应该建立这样的功能。

＆＃13;

＆＃13;

// IMPORTANT! Pay attention that fake null data points added
// in order to display targets line correctly, so index 0 = null
config.series[0] = {
  cursor: this.props.onDataPointClick ? 'pointer' : undefined,
  type: 'column',
  data: [null, ...chartData, null],
  pointPadding: 0.01, // to make column full width
  groupPadding: 0, // to make column full width
  dataLabels: {
    enabled: true,
    align: 'center',
    inside: true,
    verticalAlign: 'bottom',
    formatter: function() {
      return humanReadableValue(this.y);
    }
  },
  point: {
    events: {
      click: (e) => this.onDataPointClick(e)
    }
  }
};
Object.assign(config.xAxis, {
  floor: 1,
  ceiling: config.series[0].data.length - 2,
  categories: config.series[0].data.map(x => x === null ? '' : x.name)
});

＆＃13;

＆＃13;

＆＃13;

结果