,可以通过以下步骤实现:
<canvas id="barChart"></canvas>
var ctx = document.getElementById('barChart').getContext('2d');
var barChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6'],
datasets: [{
label: 'Dataset 1',
data: [10, 20, 30, 40, 50, 60],
backgroundColor: 'rgba(0, 123, 255, 0.5)'
}]
},
options: {
responsive: true,
scales: {
x: {
type: 'category',
offset: true,
grid: {
offset: true
}
},
y: {
beginAtZero: true
}
},
plugins: {
legend: {
display: false
},
scrollbar: {
mode: 'x'
}
}
}
});
scales: {
x: {
type: 'category',
offset: true,
grid: {
offset: true
}
},
// ...
}
plugins: {
// ...
scrollbar: {
mode: 'x'
}
}
这样就可以在chartjs中设置条形图滚动了。滚动条会在x轴上显示,并且当数据量超过图表容器宽度时,可以通过滚动条来查看隐藏部分的数据。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云