我正在使用chartJS在条形图中显示一些数据。 chartJs有一些问题。当我需要大量数据时,例如100或更多的数据字段,并且它具有长期持久的标签,看起来像丑陋。使用ChartJS在条形图中分页
如何配置条形图?
这是我的FIDDLE
在上面的例子中我有100个数据提交的,我可以分页该柱形图?
这里是我的代码
var lbl = [];
var dt = [];
for(var i = 1;i<=100;i++){
lbl.push("this_is_my_lable_name_"+i);
}
for(var i = 1;i<=100;i++){
dt.push(Math.floor((Math.random() * 100) + 1));
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: lbl,
datasets: [{
label: '# of Votes',
data: dt,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
不幸的是,有一个分页功能内置到字符t.js.但是,有一个名为'chartjs-plugin-zoom'的插件可以为你工作,但是你需要扩展它来做一些改变。结帐这个[codepen](http://codepen.io/jordanwillis/pen/VpOrrd)为例。您可以使用鼠标滚轮浏览图表,然后单击并拖动以平移左/右。目前没有办法预先设置初始缩放,但是您可以扩展插件以添加该功能(不应太难)。如果这符合您的需求,然后让我知道,我会提交作为答案 – jordanwillis