我们的团队正在使用Highcharts / Highstock库进行概念验证。除了添加垂直滚动之外,一切都很完美。我在下面添加了一个小提琴和随附的代码。如果您运行提琴手并在图表中滚动,您会看到奇怪的行为......但是,如果您从数据集中删除一行(即" Test31"),它可以正常工作。知道是什么引起了这个吗?我们在某处错过了一个额外的选项吗?提前谢谢!
(请注意,此示例直接来自文档,我们所做的只是添加了30多行。)
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]
]
}]
});
答案 0 :(得分:2)
问题是cropThreshold
。这应该在DOCS的某个地方明确说明,因为在我看来检查这个并不直观。
From API on plotOptions.bar.cropThreshold:
当系列包含的点数少于裁剪阈值时,将绘制所有点,如果这些点落在当前缩放的可见绘图区域之外,则会发生事件。绘制所有点(包括标记和列)的优点是动画是在更新时执行的。另一方面,当系列包含的点数多于裁剪阈值时,系列数据将被裁剪为仅包含位于绘图区域内的点。裁掉隐形点的好处是可以提高大型系列的性能。
默认为 50 。
因此,将cropThreshold
设置为某个任意大的数字,我们就会得到一个工作图。
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
cropThreshold: 1000
}
},