[英]How to add horizontal scroll to a bar graph in chartjs?
我在Stackoverflow中尝试了很多解决方案来解决类似的问题,但这些解决方案均无济于事,我找不到任何解决方案。
我应该如何使条形图中的每个项目都具有最小宽度,以便可以使用水平滚动选项来查看数据。 如果我不使用最小宽度,则所有行都在压缩,并且UI看起来一点也不好。
我应该在新的Chart方法中添加样式还是还有其他方法?
这是我的代码:
<head>
<style type="text/css">
.barcanvas
{
overflow-x: scroll;
}
</style>
</head>
<body>
<div style="width: 40%" id="bardiv">
<canvas id="barcanvas"></canvas>
</div>
</body>
<script>
var barChartData = {
labels: ["January", "February", "March","April","May","January", "February", "March","April","May","January", "February", "March","Coon","May","Dude", "Etf", "March","April","May"],
datasets: [{
label: 'Dataset 1',
backgroundColor: '#33b5e5',
data: [
17,
11,
12,
13,
14,
17,
11,
12,
13,
14,
17,
11,
12,
13,
14,
17,
11,
12,
13,
14,
]
}]
};
window.onload = function() {
var ctx1 = document.getElementById("barcanvas").getContext("2d");
window.myBar = new Chart(ctx1, {
type: 'bar',
data: barChartData,
options: {
title:{
display:true,
text:"Bar Graph"
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
style: {
stacked: true,
},
}],
yAxes: [{
stacked: true
}]
}
}
});
}
</script>
好吧,好像您想制作一个可滚动的视图?
仅在原始div
和canvas
之间添加包装器div
并为该宽度指定宽度如何?
var barChartData = { labels: ["January", "February", "March", "April", "May", "January", "February", "March", "April", "May", "January", "February", "March", "Coon", "May", "Dude", "Etf", "March", "April", "May"], datasets: [{ label: 'Dataset 1', backgroundColor: '#33b5e5', data: [ 17, 11, 12, 13, 14, 17, 11, 12, 13, 14, 17, 11, 12, 13, 14, 17, 11, 12, 13, 14, ] }] }; var ctx1 = document.getElementById("barcanvas").getContext("2d"); window.myBar = new Chart(ctx1, { type: 'bar', data: barChartData, options: { title: { display: true, text: "Bar Graph" }, tooltips: { mode: 'index', intersect: false }, responsive: true, scales: { xAxes: [{ style: { stacked: true, }, }], yAxes: [{ stacked: true }] } } });
.barcanvas { overflow-x: scroll; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script> <div style="width: 40%" id="bardiv"> <div style="width: 1024px"> <canvas id="barcanvas"></canvas> </div> </div>
嗯...你想要这个吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.