2017-06-06 14 views
0

ChartJSを使用して、timeseriesを棒グラフとして表示しています。バーの幅からx軸のティック解像度を分離する方法はありますか?ChartJS:カテゴリより幅の広い軸の目盛りを持つ棒グラフ

以下のスニペットは、この問題を示しています。 1週間に1時間のデータを表示しています。 options.scales.xAxes[0].time.unitdayに設定されているため、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>

答えて

0

プロパティunitStepSizeは、あなたが探しているものかもしれません。

Hereは、例えばdocumentation 1として

とJSFiddleある:

グリッド線の間の単位の数。

関連する問題