如何将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 } },
    }
}

法庭小丑觉得这个问题很有趣，但是如果他不能提出正确的答案，他就会冒失掉脑袋...而且时间紧迫。

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

建议和解决方案将拯救小丑，并受到国王的重视。

问题已解决！小丑活了！

@jlbriggs建议的数据序列的填充成功了。定义x轴的限制轻松地裁剪任何多余的数据点。

- beauXjames

---

我不知道我是否曾经在阅读问题时有过这么多的乐趣。 - Cumulo Nimbus

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/

- jlbriggs

---

一位小丑向另一个小丑传授了一种值得推荐的技巧...应用这个概念所需的努力非常少。一开始我担心数据系列长度不同会导致一些缩放问题，但是x轴上的最小/最大值只是简单地裁剪了多余的部分。感谢你分享你的解决方案。我将在上面发布完成后的图片。 - beauXjames

Answer 2

不确定这是否直接适用于宫廷小丑的情况，但我遇到了同样的边缘问题，并能够使用xAxis.min和xAxis.max以一种不那么hacky的方式解决它：

xAxis: {
  min: 0.5,
  max: yourColumnsArray.length - 1.5,
  ...
}

- Cumulo Nimbus

---

优秀之处在于它比其他答案更简单，而且对数据的表示价值更少。 - Jon Hanna