如何在chart.js中使y轴与x轴在0处相交

Question

是否可以使用chart.js插件使Y轴与X轴的交点为0，并在图形的中间显示标签？

现在看起来像这样：

我也希望它看起来像这样：

我的Fiddle /代码段

var ctx = document.getElementById('myChart').getContext('2d');
let chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      fill: false,
      label: 'Linear',
      data: ['-3', '-2', '-1', '0', '1', '2', '3', '4']
    }],
    labels: ['-3', '-2', '-1', '0', '1', '2', '3', '4']
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          weight: 100,
          suggestedMin: -5,
          suggestedMax: 5,

          stepSize: 1
        },
        plotLines: {
          value: 0,
          width: 2,
          color: 'blue'
        }
      }],
      xAxes: [{
      }]
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Answer 1

我能够通过为yAxis设置填充来解决此问题：

<div class="row" tabindex="0"><div class="cell">rect</div><div class="cell">A</div><div class="cell">0</div><div class="cell">0</div><div class="cell">10</div><div class="cell">10</div></div><div class="row" tabindex="0"><div class="cell">rect</div></div>

希望它将对某人有所帮助。