javascript - Highcharts/Highstock 滚动条问题

Question

我们的团队正在使用 Highcharts/Highstock 库进行概念验证。除了添加垂直滚动之外，一切都运行良好。我在下面添加了一个 fiddle 和随附的代码。如果您运行 fiddler 并在图表中滚动，您会看到奇怪的行为......但是，如果您从数据集中删除一行(即“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]        
        ]
    }]
});

Answer 1

问题是cropThreshold。这应该在 DOCS 中的某个地方明确说明，因为在我看来检查这一点并不直观。

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.

因此，将 cropThreshold 设置为某个任意大的数字，我们就得到了一个工作图。

plotOptions: {
  bar: {
    dataLabels: {
      enabled: true
    },
    cropThreshold: 1000
  }
},

工作示例: https://jsfiddle.net/ewolden/hywdwvzf/3/