如何使y轴与chart.js中的x轴相交为0

Question

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

现在它看起来像这样：

我希望它看起来像这样：

我的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/[email protected]/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Answer 1

我可以通过为yAxis设置填充来解决这个问题：

        scales: {
        yAxes: [{
            ticks: {
                position: top,
                beginAtZero: false,
                padding: -225,
                weight :500,
                stepSize: 1
            }


        }],

希望它会帮助某人。