ChartJS：軸線蜱比類別更寬的條形圖

我使用ChartJS將時間序列顯示爲條形圖。是否有某種方法可以將x軸上的刻度分辨率與條的寬度分開？ChartJS：軸線蜱比類別更寬的條形圖

下面的代碼展示了問題;它顯示了一週內的小時數據。由於options.scales.xAxes[0].time.unit設置爲day，刻度標記每天顯示一個，但橫條也是一天寬。將單位設置爲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>

來源

2017-06-06 Tom

酒店unitStepSize可能是你在找什麼。

Here是一個的jsfiddle與示例

作爲每documentation：

的網格線之間的單位數。

來源

2017-06-07 00:14:13

ChartJS：軸線蜱比類別更寬的條形圖

回答

相關問題