CHART.JS 如何 offset/move/adjust y 轴上的标签位于网格线的中间而不是在网格线的中心？

Question

我正在 Ionic/Angular 应用程序内部使用 chart.js 来构建折线图。我现在运行遇到的最大问题是，我希望将 y 轴上的标签（绿色、黄色、橙色、红色）定位在水平网格线之间，而不是像它们当前那样以网格线为中心图片在这里...

我尝试使用中提到的插件，但没有成功。我也曾尝试在实际 chart.js 文档中再次使用 offsetGridlines 属性，但没有成功。

谁能帮忙把底部的实际轴线和其他水平网格线的宽度一样，就免费加分

这是处理图表这一特定方面的代码...

options: {
    legend: {
      display: false
    },
    scaleShowVerticalLines: false,
    layout: {
      padding: 25
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          display: false
        }
      }],
      yAxes: [{
        gridLines: {
          drawBorder: false
        },
        ticks: {
          min: 0,
          max: 100,
          stepSize: 25,
          fontColor: 'white',
          callback: function(value) {  
            if (value === 25) {
                return 'Red';
            } else if (value === 50) {
                return 'Orange';
            } else if (value === 75) {
                return 'Yellow';
            } else if (value === 100){
                return 'Green';
            } else {
              return '';
            }
          }
        }
      }]
    }
  },

Answer 1

我在下面的代码片段中注释了更改，但为了简要说明：

我集成了您链接到的插件，但对其进行了修改以将原始刻度设置为透明，因此删除了似乎不起作用的 beforeDraw 闭包。

为了加分：诀窍是删除 x 轴边框，然后设置 'zero line' 样式以匹配其他网格线。

var ctx = document.getElementById("chart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
    datasets: [{
      data: [25, 35, 20, 45, 65, 26, 49, 70, 75, 87],
      borderColor: 'white',
      fill: false
    }]
  },
  options: {
    legend: {
      display: false
    },
    scaleShowVerticalLines: false,
    layout: {
      padding: 25
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
          drawBorder: false, // bonus points.
        },
        ticks: {
          display: false
        }
      }],
      yAxes: [{
        gridLines: {
          drawBorder: false,
          color: 'rgba(0,0,0,.3)', // bonus points.
          zeroLineColor: 'rgba(0,0,0,.3)' // bonus points.
        },
        ticks: {
          min: 0,
          max: 100,
          stepSize: 25,
          fontColor: 'transparent', // changed from 'white'
          callback: function(value) {
            if (value === 25) {
              return 'Red';
            } else if (value === 50) {
              return 'Orange';
            } else if (value === 75) {
              return 'Yellow';
            } else if (value === 100) {
              return 'Green';
            } else {
              return '';
            }
          }
        }
      }]
    }
  },
  plugins: [{
    afterDraw: function(chart) {
      var ctx = chart.ctx;
      var yAxis = chart.scales['y-axis-0'];
      var tickGap = yAxis.getPixelForTick(1) - yAxis.getPixelForTick(0);
      // loop through ticks array
      Chart.helpers.each(yAxis.ticks, function(tick, index) {
        if (index === yAxis.ticks.length - 1) return;
        var xPos = yAxis.right;
        var yPos = yAxis.getPixelForTick(index);
        var xPadding = 10;
        // draw tick
        ctx.save();
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'right';
        ctx.fillStyle = 'white';
        ctx.fillText(tick, xPos - xPadding, yPos + tickGap / 2);
        ctx.restore();
      });
    }
  }]
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart" style="background-color:#296390"></canvas>

CHART.JS 如何 offset/move/adjust y 轴上的标签位于网格线的中间而不是在网格线的中心？

CHART.JS How can I offset/move/adjust the labels on the y-axis to be in the middle of the gridlines instead of centered on the gridlines?

javascript

css

gridlines

chart.js