Question

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

下面的代码段演示了这个问题;它显示超过一周的每小时数据。由于options.scales.xAxes[0].time.unit设置为day，因此刻度标记每天出现一次，但条形图也是一天宽。将单位设置为hour会使条形图的宽度正确，但会导致x轴上出现数百个刻度线，并使标签不可读。

有没有办法充分利用两者？

＆＃13;

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
});

＆＃13;

<!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>

＆＃13;

Answer 1

属性unitStepSize可能正是您要找的。

Here是一个带有示例的JSFiddle

根据documentation：

网格线之间的单位数。

ChartJS：轴线刻度比类别更宽的条形图

1 个答案: