Highcharts/Highstock Scrollbar Issue

问题:

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]        
        ]
    }]
});

回答1:

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 cropThreshold to some arbitrary large number we get a working graph.

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

Working example: https://jsfiddle.net/ewolden/hywdwvzf/3/