javascript - 如何将此 Highchart 系列的线条延伸到我的图表区域的边缘？

Question

从前，有一张图表...

此图表有多个系列堆叠在自身顶部的列中，但随后在堆叠的列顶部放置了一条线来表示下面顽皮的小盒子的总和。 HighCharts 之王需要这条线一直延伸到边缘，但找不到合适的设置来做到这一点。

长老们决定 plotOptions 是这样定义的:

plotOptions: {
    column: {
        animation: false,
        stacking: 'normal',
        pointWidth: 19
    },
    line: {
        marker: { enabled: false },
        step: 'center',
        color: '#0a4d85'
    },
    series: {
        states: { hover: { enabled: false } },
    }
}

宫廷 clown 觉得这个问题真的很有趣，但如果他没有想出正确的答案，就有可能失去理智……很快。

每个数据系列都完美匹配 [0 - 48]。

拯救 clown 的建议和解决方案将得到一个伟大的国王复选标记。

已解决! clown 活着!!!

@jlbriggs 建议的数据系列的填充是成功的。定义 x 轴的范围可以轻松 trim 掉任何多余的数据点。

Answer 1

没有一个设置可以做到这一点。默认情况下，这些点在类别的中心对齐。您可以将 tickmarkPlacement 属性从默认的 between 设置为 on，但这会弄乱您的列网格。

据我所知，对于这种特定情况，最好的选择是伪造它，方法是在你的行的开头和结尾添加一个数据点，在你的最小 x 值的 -0.5 和最大 x 的 + 0.5值，分别重复您的第一个和最后一个 y 值。

因此，例如，如果您的数据是:

data: [3,4,7,8,6,5,4,5,4,3,4] 

然后需要:

data: [{x:-0.5, y: 3},3,4,7,8,6,5,4,5,4,3,4,{x:10.5, y: 4}] 

您可能还需要调整一些其他选项，具体取决于您的其他图表选项，例如:

• x 轴最小值/最大值

• plotOptions -> column -> grouping: false

• plotOptions -> column -> pointRange: 1

例子:

• http://jsfiddle.net/jlbriggs/1sfarksh/