如何将此Highchart系列的线条延伸至图表区域的边缘？

曾几何时，有一个图表...如何将此Highchart系列的线条延伸至图表区域的边缘？

这个图表有多个系列堆叠在它自己的顶部，但是然后一个线被放置在堆积列的顶部，以表示impish下面的小盒子。 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]。

建议和解决方案，节省小丑将会遇到一个伟大的国王复选标记。

已解决！ JESTER LIVES !!!

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

来源

2016-03-21 beauXjames

IDK如果我已经通过一个问题阅读这么多的乐趣 –

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

我知道这个特定场景的最佳选择是通过将数据点添加到行的开始和结尾，在最小x值的-0.5处以及最大值的+ 0.5 x值，分别重复你的第一个和最后一个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 - >柱 - >grouping: false
plotOptions - >柱 - >pointRange: 1

实施例：

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

来源

2016-03-21 16:13:08 jlbriggs

从一个小丑到另一个小丑值得受到攻击......在应用这个概念时花费了很少的精力。起初我担心数据系列有不同长度会引起一些缩放问题，但x轴上的最小/最大值只是修剪掉多余的脂肪。感谢您分享您的解决方案。我会在上面发布完成的照片。 – beauXjames

不知道这是否直接适用于宫廷小丑的情况，但我有同样的边缘问题，使用xAxis.min和xAxis.max能够解决它在一个不太哈克的方式：

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

来源

2017-11-21 16:29:52

如何将此Highchart系列的线条延伸至图表区域的边缘？

回答

相关问题