Highcharts / Highstock Scrollbar Issue

时间:2018-01-17 18:49:58

标签: javascript highcharts highstock

我们的团队正在使用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]        
        ]
    }]
});

1 个答案:

答案 0 :(得分:2)

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

From API on plotOptions.bar.cropThreshold

  

当系列包含的点数少于裁剪阈值时,将绘制所有点,如果这些点落在当前缩放的可见绘图区域之外,则会发生事件。绘制所有点(包括标记和列)的优点是动画是在更新时执行的。另一方面,当系列包含的点数多于裁剪阈值时,系列数据将被裁剪为仅包含位于绘图区域内的点。裁掉隐形点的好处是可以提高大型系列的性能。

     

默认为 50

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

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

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