我对Highcharts highstock柱形图有问题。xaxis最小值=0,最大值=5[页面大小],其中有20个类别。
初始加载后,将X轴滚动到末尾,然后单击修改数据。在此操作中,我将调用api并更新序列数据。”图表显示为“即使有一个类别,也没有要显示的数据”。我想将滚动重置为初始位置,但我无法对类别执行此操作。您需要手动移动滚动条
此外,因为只有一个类别,我不希望其他类别显示为数字。
https://jsfiddle.net/shashi3337/zcf8kvgx/7/
我正在更新图表,以修改xaxis min和max,将max设置为0[1个类别]以删除数字。
https://jsfiddle.net/shashi3337/zcf8kvgx/5/
。
现在,当您单击Add data(添加数据)以添加回数据时。我正在重置最小值=0和最大值=5。现在
我只看到每页只有一个类别的滚动。
预期行为
我希望在单击modify data(修改数据)按钮后滚动条会自动向后滚动,当我单击add data(添加数据)按钮时,我希望在xaxis上看到每页6个类别的滚动。
function test(n) {
var data = [];
for (var i = 0; i < n; i++) {
var value = Math.random() * 10;
var x = {
id: i,
name: 'test ' + i,
y: value
}
data.push(x);
}
return data;
}
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
},
plotOptions: {
column: {
stacking: 'normal'
},
},
xAxis: {
type: 'category',
min:0,
max:5
},
scrollbar: {
enabled: true
},
series: [{
name: "A",
data: test(20)
}, {
name: "B",
data: test(20)
},
{
name: "C",
data: test(20)
},
{
name: "D",
data: test(20)
}
]
});
$(document).ready(function(){
$('#modify').click(function(){
if(chart){
while (chart.series.length > 0)
chart.series[0].remove(true);
chart.addSeries({
name: 'new',
data: test(1)
});
}
});
$('#add').click(function(){
if(chart){
while (chart.series.length > 0)
chart.series[0].remove(true);
chart.update({
xAxis: {
min:0,
max:5
}
});
chart.addSeries({
name: 'A',
data: test(20)
});
}
});
});