ChartJS：轴刻度大于类别的条形图答案

【问题标题】：ChartJS: Bar chart with axis ticks wider than categoriesChartJS：轴刻度大于类别的条形图
【发布时间】：2017-06-06 15:23:05
【问题描述】：

我正在使用 ChartJS 将时间序列显示为条形图。有没有办法将 x 轴上的刻度分辨率与条形的宽度分开？

下面的sn-p演示了这个问题；它显示一周内的每小时数据。因为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>

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

unitStepSize 的属性可能就是您要找的。p>

Here 是一个带有示例的 JSFiddle

根据documentation：

网格线之间的单位数。

【讨论】：