ChartJS x 轴标签位置

Question

我有一个 ChartJS，当您将窗口大小调整为较小时，它会将标签显示为倾斜。

我想要做的是将 X-labels 垂直降低一点，这样它们就不会尽可能靠近图表的底部。

谷歌搜索后，看起来我可以禁用 x 轴的刻度显示并使用选项的动画手动执行此操作。我尝试在以下fiddle 中实现这一点。

    animation: {
      duration: 1,
      onComplete: function() {
        var chartInstance = this.chart;
        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function(bar, index) {

            var label = bar._model.label;
            var xOffset = bar._model.x;
            var yOffset = bar._model.y;
            ctx.fillText(label, xOffset, 420);
          });
        });
      }
    },

但是，当我调整窗口大小时，我无法正确缩放标签。你能帮忙吗？

Answer 1

Chart.js 为此在ticks 对象中实现padding 属性：

刻度标签和轴之间的填充。当设置在垂直轴上时，这适用于水平 (X) 方向。当设置在水平轴上时，这适用于垂直 (Y) 方向。

这是一个工作示例，其中 x 轴标签从直线向下偏移 20px：

new Chart(document.getElementById("chart"), {
  type: "bar",
  data: {
    labels: ["Blue", "Red", "Green", "Orange", "Purple"],
    datasets: [{
      data: [0, 1, 2, 3, 4]
    }]
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        ticks: {
          padding: 20
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="height:200px;width:200px">
  <canvas id="chart"></canvas>
</div>