2
私は同様の質問のためにStackoverflowで多くのソリューションを試しましたが、それらのどれもうまく動作せず、解決策が見つかりませんでした。chartjsの棒グラフに水平スクロールを追加するには?
データを表示するための横スクロールオプションがあるように、棒グラフの各アイテムを最小幅にするにはどうすればよいですか。最小幅を使用しないと、すべての行が圧縮され、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>