在Hicharts / Histock图表中滚动条问题

时间:2017-02-15 15:44:19

标签: javascript jquery html5 highcharts

我要求在条形图中使用垂直滚动并使用Highstock Charts实现它。 我能做到。 欣赏Histock图表,用于在滚动时动态绘制图表,但在数据量很大时会出现很多问题。

  • 酒吧正在重叠
  • 轴刻度正在消失,而刻度数仅显示

  • 绘图和表现不一致。

感谢,如果有人为我提供解决方案或解决此问题。

谢谢!

Fiddle to play



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],
            ["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],
            ["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],
            ["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],
            ["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]
        ]
    }]
});
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

我不确定它是不是一个bug。但是,您可以将series.cropTreshold设置为某个较大的数字。如果您使用具有相同名称的类别,则还应将axis.uniqueNames设置为false。

  series: [{
    cropThreshold: 100000,
    name: 'Votes',

示例:http://jsfiddle.net/rft0t40L/

另一种可能性是设置类别数组并将点映射到[category-number, value]

示例:http://jsfiddle.net/rft0t40L/1/