如何在Chart.js中实现与CSS一致的135°线性渐变？

核心问题在于CSS和Canvas的坐标系差异：CSS的角度是顺时针从右侧（0deg）开始计算，而Canvas的y轴向下，因此CSS的135deg渐变方向，对应Canvas中柱状图元素的右上到左下对角线，而非你之前使用的左上到右下方向。

直接修改你的bgColor函数即可实现完全匹配的效果：

const equipment = [100, 0, 20, 10, 60, 20, 0, 0, 20];
function bgColor(context) {
    const {chart, datasetIndex, index} = context;
    const ds = chart.data.datasets[datasetIndex];
    const value = ds.data[index];
    const y = chart.scales.y.getPixelForValue(value);
    const meta = chart.getDatasetMeta(datasetIndex);
    const data = meta.data[index];
    const {x, width, base} = data;
    if (x) {
      const ctx = chart.ctx;
      // 对应CSS 135deg的渐变起止点：柱子右上角 → 柱子左下角
      const gradient = ctx.createLinearGradient(x + width, y, x, base);
      gradient.addColorStop(0, '#FBCF33');   // 匹配CSS的0%位置
      gradient.addColorStop(0.9, '#F53939'); // 匹配CSS的90%位置
      return gradient;
    }
}

datasets: [
        {
            label: 'Equipment',
            data: equipment,
            backgroundColor(context) {
                return bgColor(context);
            },
            tension: 0.4,
            fill: false,
            borderWidth: 0,
            hoverBorderColor: "#000",
            hoverBackgroundColor: '#FBCF33',
            hoverBorderWidth: 1,
        }]

关键细节说明 #

• 渐变方向匹配：CSS的135deg渐变线实际是从元素右上角指向左下角，在Canvas坐标系下，直接取柱子的(x + width, y)（右上）和(x, base)（左下）作为渐变起止点，就能完全对齐CSS的渐变方向。
• 颜色停止点完全对应：直接使用你需要的#FBCF33和#F53939，停止点位置0和0.9分别对应CSS的0%和90%，剩余10%区域会自动延续#F53939的颜色，和CSS行为一致。
• 适配动态柱子：放弃固定角度的全局渐变计算，基于每个柱子的实际坐标生成渐变，保证所有柱子的渐变都能正确匹配自身尺寸和位置。

内容的提问来源于stack exchange，提问作者Aadam