Highcharts / Highstock滚动条问题 [英] Highcharts/Highstock Scrollbar Issue
问题描述
我们的团队正在使用Highcharts / Highstock图书馆进行概念验证。除了添加垂直滚动之外，一切都很完美。我在下面添加了一个小提琴和附带的代码。如果你运行提琴手并在图表中滚动，你会看到奇怪的行为...但是，如果你从数据集中删除了一行（即Test31），它就可以正常工作。任何想法是什么造成这个？我们是否错过了某处的其他选项？
（请注意，这个示例直接来自文档，我们所做的只是添加了30多个附加行。）
https://jsfiddle.net/meppielmr/hywdwvzf/1/
< div id =containerstyle =height：400px; min-width：320px; max-width： 600px; margin：0 auto>< / div>
< script src =https://code.highcharts.com/stock/highstock.js>< / script>
< script src =https://code.highcharts.com/stock/modules/exporting.js>< / script>
Highcharts.chart（'container'，{
图表：{
类型：'bar'，
marginLeft：150
}，
标题：{
text：'2016年4月前的最流行想法'
}，
副标题：{
text：'来源：< a href =https：// highcharts.uservoice.com/forums/55896-highcharts-javascript-api\"> UserVoice</a>'
}，
xAxis：{
类型：'category'，
标题：{
text：null
}，
分钟：0，
最多：4，
滚动条：{
启用：true
$ b $ text：'Votes'，
align：'high'
}
}，
plotOptions：{
bar：{
dataLabels：{
启用：真
}
}
$，
图例：{
启用：false
}，
学分：{
启用：false
}，
系列： [{
name：'Votes'，
data：[
[甘特图，1000]，
[自动计算和绘制趋势线，575]，
[允许导航器有多个数据系列，523]，
[实现动态字体大小，427]，
[多轴对齐控制，399]，
[不规则日期时间序列中堆积区域（样条曲线等），309]，
[将图表高度修改为图例高度，278]，
[在Excel表格中导出图表，239] ，
[Toggle legend box，235]，
[Venn Diagram，203]，
[添加改变Rangeselector位置的能力，182]，
[ Draggable图例框，157]，
[Sankey Diagram，149]，
[将导航栏添加到H中的Y轴ighstock，144]，
[分组x轴，143]，
[ReactJS插件，137]，
[3D曲面图，134]，
[在股票图表上画线，用于分析目的，118]，
[数据库表的数据模块，118]，
[可拖拽点，117]，
[Test1，343]，
[Test2，343]，
[Test3，343]，
[Test4，343]，
[Test5，343]，
[Test6，343]，
[Test7，343]，
[Test8，343]，
[ Test9，343]，
[Test10，343]，
[Test11，343]，
[Test12，343]，
[Test13 ，343]，
[Test14，343]，
[Test15，343]，
[Test16，343]，
[Test17，343 ]，
[Test18，343]，
[Test19，343]，
[Test20，343]，
[Test21，343]，
[Test22，343]，
[Test23，343]，
[Test24，343]，
[Test25，343]，
[Test26，343]，
[Test27，343]，
[Test28，343]，
[ Test29，343]，
[Test30，343]，
[Test31，343]
]
}]
}）;
问题出在 cropThreshold 。这应该已经在DOCS的某个地方清楚了，因为在我看来，这不是直观的检查。
从plotOptions.bar.cropThreshold中的API ：
如果该系列包含的点数少于裁剪阈值，则绘制所有点，如果点在当前缩放下落在可见绘图区域外，则为事件。绘制所有点（包括标记和列）的优点是动画是在更新上执行的。另一方面，当系列包含的点数多于作物阈值时，系列数据将被裁剪为只包含落在绘图区域内的点。裁剪隐形点的好处是可以提高大型系列的表现。
默认为 50 / blockquote>
因此，将
cropThreshold设置为一些任意大的数字，我们就可以得到一个工作图表。plotOptions：{
bar：{
dataLabels：{
enabled：true
}，
cropThreshold ：1000
}
}，
工作示例： strong> https://jsfiddle.net/ewolden/hywdwvzf/3/
Our team is working on a proof of concept using the Highcharts/Highstock library. Everything is working perfectly, with the exception of adding vertical scrolling. I've added a fiddle and the accompanying code below. If you run the fiddler and scroll in the chart you'll see strange behavior...but, if you remove one row from the data set (i.e. "Test31"), it works fine. Any idea what's causing this? Are we missing an additional option somewhere? Thanks in advance!
(Note that this example is straight from the docs, all we did was add 30+ additional rows.)
https://jsfiddle.net/meppielmr/hywdwvzf/1/
<div id="container" style="height: 400px; min-width: 320px; max-width: 600px; margin: 0 auto"></div> <script src="https://code.highcharts.com/stock/highstock.js"></script> <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> Highcharts.chart('container', { chart: { type: 'bar', marginLeft: 150 }, title: { text: 'Most popular ideas by April 2016' }, subtitle: { text: 'Source: <a href="https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api">UserVoice</a>' }, xAxis: { type: 'category', title: { text: null }, min: 0, max: 4, scrollbar: { enabled: true }, tickLength: 0 }, yAxis: { min: 0, max: 1200, title: { text: 'Votes', align: 'high' } }, plotOptions: { bar: { dataLabels: { enabled: true } } }, legend: { enabled: false }, credits: { enabled: false }, series: [{ name: 'Votes', data: [ ["Gantt chart", 1000], ["Autocalculation and plotting of trend lines", 575], ["Allow navigator to have multiple data series", 523], ["Implement dynamic font size", 427], ["Multiple axis alignment control", 399], ["Stacked area (spline etc) in irregular datetime series", 309], ["Adapt chart height to legend height", 278], ["Export charts in excel sheet", 239], ["Toggle legend box", 235], ["Venn Diagram", 203], ["Add ability to change Rangeselector position", 182], ["Draggable legend box", 157], ["Sankey Diagram", 149], ["Add Navigation bar for Y-Axis in Highstock", 144], ["Grouped x-axis", 143], ["ReactJS plugin", 137], ["3D surface charts", 134], ["Draw lines over a stock chart, for analysis purpose", 118], ["Data module for database tables", 118], ["Draggable points", 117], ["Test1", 343], ["Test2", 343], ["Test3", 343], ["Test4", 343], ["Test5", 343], ["Test6", 343], ["Test7", 343], ["Test8", 343], ["Test9", 343], ["Test10", 343], ["Test11", 343], ["Test12", 343], ["Test13", 343], ["Test14", 343], ["Test15", 343], ["Test16", 343], ["Test17", 343], ["Test18", 343], ["Test19", 343], ["Test20", 343], ["Test21", 343], ["Test22", 343], ["Test23", 343], ["Test24", 343], ["Test25", 343], ["Test26", 343], ["Test27", 343], ["Test28", 343], ["Test29", 343], ["Test30", 343], ["Test31", 343] ] }] });
解决方案The issue is
cropThreshold. This should have been made clear somewhere in DOCS, as it is not intuitive to check this in my opinion.From API on plotOptions.bar.cropThreshold:
When the series contains less points than the crop threshold, all points are drawn, event if the points fall outside the visible plot area at the current zoom. The advantage of drawing all points (including markers and columns), is that animation is performed on updates. On the other hand, when the series contains more points than the crop threshold, the series data is cropped to only contain points that fall within the plot area. The advantage of cropping away invisible points is to increase performance on large series.
Defaults to 50.
So setting
cropThresholdto some arbitrary large number we get a working graph.plotOptions: { bar: { dataLabels: { enabled: true }, cropThreshold: 1000 } },Working example: https://jsfiddle.net/ewolden/hywdwvzf/3/
这篇关于Highcharts / Highstock滚动条问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
