javascript - 如何在刻度标签之间添加填充？

Question

如何在图表标签之间添加填充。我需要始终显示刻度标签，但如何在刻度标签之间添加间距？

另一种可行的解决方案是使图表具有更大的高度。仅当将图表缩小到浏览器的宽度小于 320 像素时才会发生这种情况。

这是 fiddle :https://jsfiddle.net/leetcat/4d7juow3/

在我的例子中，标签是“健康”、“有反应”、“受伤”、“生病”。

我试过:

options: {
  layout: {
      padding: {
        top: 20
      }
    }
}

和

scales: { 
  yAxes: [{   
    ticks: {
      padding: 10
    }
  }]
}

Answer 1

您可以将maintainAspectRatio: false 添加到图表选项，并在图表元素上设置一个最小高度。

var ctx = document.getElementById("myChart");

var data = {
  labels: ["2017-09-26T00:00:00Z", "2017-09-27T00:00:00Z", "2017-09-28T00:00:00Z", "2017-09-29T00:00:00Z", "2017-09-30T00:00:00Z", "2017-10-01T00:00:00Z", "2017-10-02T00:00:00Z"],
  datasets: [{
    label: "Self Rating",
    backgroundColor: '#777777',
    borderColor: '#777777',
    data: [1, 2, 0, 0, 0, 0, 0],
    fill: false,
    yAxisID: "y-axis-1",
  }]
};

var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      position: 'bottom',
    },
    title: {
      display: true,
      text: 'Check-In History',
    },
    scales: {
      // Need to limit tick marks to be days
      xAxes: [{
        display: true,
        type: 'time',
        time: {
          unit: 'day',
          unitStepSize: 1,
          displayFormats: {
            'day': 'MMM DD'
          }
        }
      }],
      yAxes: [{
        id: "y-axis-1",
        display: true,
        position: "left",
        scaleLabel: {
          display: true,
          labelString: 'Mental Health Continuum'
        },
        ticks: {
          min: 0,
          max: 3.05,
          stepSize: 1,
          suggestedMin: 0,
          suggestedMax: 3.05,
          callback: function(label, index, labels) {
            switch (label) {
              case 0:
                return 'Ill';
              case 1:
                return 'Injured';
              case 2:
                return 'Reacting';
              case 3:
                return 'Healthy';
            }
          }
        },
        gridLines: {
          display: false
        }
      }]
    }
  }
});

#myChart {
  min-height: 350px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>

<div id="wrapper">
  <canvas id="myChart"></canvas>
</div>