highcharts 带线的柱形图，需要从条形开始答案

【问题标题】：highcharts column chart with line, need line start at bar starthighcharts 带线的柱形图，需要从条形开始
【发布时间】：2018-03-22 10:08:07
【问题描述】：

这里是demo fiddel，

需要折线图从第一列左边框开始到最后一列右边框，如下图所示

在演示 fiddel 中，它是条形中心的开始。

这是我的系列代码，或者您可以在 fiddel 中查看：

series: [{
    name: 'Rainfall',
    type: 'column',
    yAxis: 1,
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    tooltip: {
        valueSuffix: ' mm'
    }

}, {
    name: 'Temperature',
    type: 'line',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    tooltip: {
        valueSuffix: '°C'
    },
    step: 'center',
    rangeSelector: {
    selected: 0
        }
}]

【问题讨论】：

stackoverflow.com/questions/16470918/…。也许这可以帮助
也请看这里：stackoverflow.com/questions/16086049/…。我假设您希望图表在第一个点和最后一个点对齐。
对不起@ewolden 但不适合我
和@coder 不工作:(
您能否尝试澄清一下您到底在追求什么，@coder 和我为解决两个完全不同的问题提供了建议。

标签： charts highcharts bar-chart linechart

【解决方案1】：

我分两步达到了预期的结果：

我在第一个点之前和最后一个点之后添加了一个点。然后我设置xAxis 的min 和max 属性。这会导致其他点不可见，但它们的线是可见的。

创建剪辑路径并将其应用于线条系列。 clipRect 的尺寸是基于第一列和最后一列的 x 位置：

var columnSeries = this.series[0],
  lineSeries = this.series[1],
  firstPoint = columnSeries.points[0],
  lastPoint = columnSeries.points[columnSeries.points.length - 1],
  clipRect = this.renderer.clipRect(firstPoint.shapeArgs.x, 0, lastPoint.plotX, 9999);

lineSeries.graph.clip(clipRect);

现场演示： http://jsfiddle.net/BlackLabel/x2r34huc/

API 参考： https://api.highcharts.com/class-reference/Highcharts.SVGElement#clip

【讨论】：

【解决方案2】：

您需要在 highcharts 脚本代码之后添加一些 javascript。脚本如下：

<script>

var rectangles = document.querySelectorAll(".highcharts-series-group > g > rect");
var last = parseInt(rectangles[rectangles.length-1].getAttribute("x")) + parseInt(rectangles[0].getAttribute("x"));
var increment = (last)/11; 
// 11 is the no of gaps in the bar graph
var x=0;

for(i=0;i<rectangles.length;i++)
{
    rectangles[i].setAttribute("x",x);
    x= x+increment;

}
</script>

这里是 jsfiddle http://jsfiddle.net/jkwvus8u/15/

这可能是您想要的。但是在 highcharts 代码之后添加此代码，因为它可以处理 highcharts 生成的内容

【讨论】：