我要求在条形图中使用垂直滚动并使用Highstock Charts实现它。 我能做到。 欣赏Histock图表,用于在滚动时动态绘制图表,但在数据量很大时会出现很多问题。
轴刻度正在消失,而刻度数仅显示
绘图和表现不一致。
感谢,如果有人为我提供解决方案或解决此问题。
谢谢!
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;
答案 0 :(得分:1)
我不确定它是不是一个bug。但是,您可以将series.cropTreshold设置为某个较大的数字。如果您使用具有相同名称的类别,则还应将axis.uniqueNames设置为false。
series: [{
cropThreshold: 100000,
name: 'Votes',
示例:http://jsfiddle.net/rft0t40L/
另一种可能性是设置类别数组并将点映射到[category-number, value]
。