Javascript CHART.JS：我如何偏移/移动/调整Y轴上的标签，而不是以网格线为中心？

我在一个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 '';
            }
          }
        }
      }]
    }
  },

---

我在下面的代码片段中对这些更改进行了注释，但只是简单地解释一下：

我集成了您链接到的插件，但对其进行了修改，将原始标记设置为透明，因此删除了

beforeDraw

闭包，该闭包似乎不起作用

奖励积分：技巧是删除x轴边框，然后设置“零线”样式以匹配其他网格线

var ctx=document.getElementById（“图表”）.getContext（“2d”）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：[1,2,3,4,5,6,7,8,9,0]，
数据集：[{
数据：[25,35,20,45,65,26,49,70,75,87]，
边框颜色：“白色”，
填充：假
}]
},
选项：{
图例：{
显示：假
},
ScaleShowVerticalline:错误，
布局：{
填充：25
},
比例：{
xAxes：[{
网格线：{
显示：假，
drawBorder:false，//奖励点数。
},
滴答声：{
显示：假
}
}],
雅克斯：[{
网格线：{
抽边线：假，
颜色：“rgba（0,0,0,3）”，//奖励积分。
zeroLineColor:“rgba（0,0,0,3）”//奖励积分。
},
滴答声：{
分:0,，
最高：100，
步长：25，
fontColor:'透明'，//从'white'更改为'
回调：函数（值）{
如果（值===25）{
返回“红色”；
}否则如果（值===50）{
返回“橙色”；
}else if（值===75）{
返回“黄色”；
}否则如果（值===100）{
返回“绿色”；
}否则{
返回“”；
}
}
}
}]
}
},
插件：[{
后置绘图：功能（图表）{
var ctx=chart.ctx；
var yAxis=图表刻度['y轴-0']；
var tickGap=yAxis.getPixelForTick（1）-yAxis.getPixelForTick（0）；
//循环通过滴答数组
图表.helpers.each（yAxis.ticks，函数（tick，索引）{
if（index==yAxis.ticks.length-1）返回；
var xPos=yAxis.right；
var yPos=yAxis.getPixelForTick（索引）；
var=10；
//划勾
ctx.save（）；
ctx.textb基线='中间'；
ctx.textAlign='right'；
ctx.fillStyle='白色'；
ctx.fillText（勾号，xPos-XPAdd，yPos+tickGap/2）；
ctx.restore（）；
});
}
}]
});
我已经在下面的代码片段中注释了这些更改，但只是简单地解释一下：

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

奖励积分：技巧是删除x轴边框，然后设置“零线”样式以匹配其他网格线


var ctx=document.getElementById（“图表”）.getContext（“2d”）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
标签：[1,2,3,4,5,6,7,8,9,0]，
数据集：[{
数据：[25,35,20,45,65,26,49,70,75,87]，
边框颜色：“白色”，
填充：假
}]
},
选项：{
图例：{
显示：假
},
ScaleShowVerticalline:错误，
布局：{
填充：25
},
比例：{
xAxes：[{
网格线：{
显示：假，
drawBorder:false，//奖励点数。
},
滴答声：{
显示：假
}
}],
雅克斯：[{
网格线：{
抽边线：假，
颜色：“rgba（0,0,0,3）”，//奖励积分。
zeroLineColor:“rgba（0,0,0,3）”//奖励积分。
},
滴答声：{
分:0,，
最高：100，
步长：25，
fontColor:'透明'，//从'white'更改为'
回调：函数（值）{
如果（值===25）{
返回“红色”；
}否则如果（值===50）{
返回“橙色”；
}else if（值===75）{
返回“黄色”；
}否则如果（值===100）{
返回“绿色”；
}否则{
返回“”；
}
}
}
}]
}
},
插件：[{
后置绘图：功能（图表）{
var ctx=chart.ctx；
var yAxis=图表刻度['y轴-0']；
var tickGap=yAxis.getPixelForTick（1）-yAxis.getPixelForTick（0）；
//循环通过滴答数组
图表.helpers.each（yAxis.ticks，函数（tick，索引）{
if（index==yAxis.ticks.length-1）返回；
var xPos=yAxis.right；
var yPos=yAxis.getPixelForTick（索引）；
var=10；
//划勾
ctx.save（）；
ctx.textb基线='中间'；
ctx.textAlign='right'；
ctx.fillStyle='白色'；
ctx.fillText（勾号，xPos-XPAdd，yPos+tickGap/2）；
ctx.restore（）；
});
}
}]
});