0
ChartJSを使用して、timeseriesを棒グラフとして表示しています。バーの幅からx軸のティック解像度を分離する方法はありますか？ChartJS：カテゴリより幅の広い軸の目盛りを持つ棒グラフ
以下のスニペットは、この問題を示しています。 1週間に1時間のデータを表示しています。 options.scales.xAxes[0].time.unitはdayに設定されているため、1日に1つの目盛りが表示されますが、バーの幅も1日です。単位をhourに設定すると、バーは正しい幅になりますが、x軸には何百もの目盛りが表示され、ラベルを読むことができなくなります。
両方の機能を最大限に活用する方法はありますか？
const RANGE = (a,b) => Array.from((function*(x,y){
while (x <= y) yield x++;
})(a,b));
labels = [];
for(var ii = 0; ii < 170; ii++) {
labels.push((1483228800 + ii * 3600) * 1000);
}
var canvas = document.getElementById('chart'),
ctx = canvas.getContext('2d'),
startingData = {
labels: labels,
datasets: [
{
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: RANGE(1, 170),
label: 'Data'
},
]
},
options = {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
}
}]
}
};
// Reduce the animation steps for demo clarity.
var myLiveChart = new Chart(ctx, {
type: 'bar',
data: startingData,
options: options
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
</head>
<body>
Hello, world.<br>
<canvas id="chart" width="500" height="300"></canvas>
</body>
</html>