如何将此Highchart系列的线条扩展到图表区域的边缘?

时间:2016-03-21 15:50:43

标签: javascript highcharts

曾几何时,有一张图表......

此图表在列中以多个系列堆叠在其自身之上,但是然后在堆叠列的顶部放置一条线以表示下面的顽皮小方框的总和。 HighCharts之王需要这条线一直延伸到边缘,无法找到合适的设置。

enter image description here

长老决定将plotOptions定义为:

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

宫廷小丑认为这个问题真的很有趣,但如果他没有找到正确的答案,那么就有可能失去理智......很快。

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

拯救小丑的建议和解决方案将获得一个伟大的王牌复选标记。

解决了! JESTER LIVES !!!

enter image description here

@jlbriggs建议的数据系列的填充是成功的。定义x轴的极限可以轻松地修剪掉任何多余的数据点。

2 个答案:

答案 0 :(得分:2)

没有一个设置会执行此操作。默认情况下,这些点在类别的中心对齐。您可以将<{1>}属性设置为之间的上的,但这会弄乱您的列网格。

我知道这个特定情况的最佳选择是伪造它,通过在行的开头和结尾添加数据点,在最小x值的-0.5和最大x的+ 0.5值,分别重复你的第一个和最后一个y值。

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

tickmarkPlacement

然后需要:

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

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

  • x轴min / max

  • plotOptions - &gt;列 - &gt; data: [{x:-0.5, y: 3},3,4,7,8,6,5,4,5,4,3,4,{x:10.5, y: 4}]

  • plotOptions - &gt;列 - &gt; grouping: false

示例:

line-to-edge

答案 1 :(得分:1)

不确定这是否直接适用于宫廷小丑的情况,但我有同样的优势问题,并且能够使用xAxis.minxAxis.max以较少的黑客方式解决此问题:

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