ChartJS：如何修改标签部分文字的颜色？

ChartJS 默认不会解析标签中的 HTML 代码，直接将其作为纯文本输出，所以你添加 HTML 标签的方法无效。以下是两种可行的解决方案：

1. 自定义Canvas绘制（适用于图例、坐标轴标签） #

通过 ChartJS 的插件机制，重写标签的渲染逻辑，利用 Canvas API 分段绘制不同颜色的文本。

图例标签示例 #

const chart = new Chart(document.getElementById('your-chart'), {
  type: 'bar',
  data: {
    labels: ['产品A', '产品B', '产品C'],
    datasets: [{
      label: '销量 (12%)',
      data: [45, 62, 38],
      backgroundColor: '#36A2EB'
    }]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          generateLabels: (chart) => {
            return chart.data.datasets.map((dataset) => {
              // 拆分标签文本为主体和百分比部分
              const [mainText, percentPart] = dataset.label.split('(');
              const fullPercent = `(${percentPart}`;
              
              return {
                text: dataset.label, // 保留原文本用于布局计算
                fillStyle: dataset.backgroundColor,
                // 自定义绘制函数
                draw: (chart, args, options) => {
                  const ctx = chart.ctx;
                  const { x, y } = args;
                  
                  // 绘制主体文本（默认颜色）
                  ctx.fillStyle = '#333';
                  ctx.fillText(mainText.trim(), x, y);
                  
                  // 计算主体文本宽度，确定百分比文本的起始位置
                  const mainWidth = ctx.measureText(mainText.trim()).width;
                  // 绘制百分比文本（自定义颜色）
                  ctx.fillStyle = '#FF6384';
                  ctx.fillText(fullPercent, x + mainWidth + 4, y);
                }
              };
            });
          }
        }
      }
    }
  }
});

坐标轴标签示例 #

如果需要修改横轴/纵轴的标签颜色，可通过刻度的自定义渲染实现：

options: {
  scales: {
    x: {
      ticks: {
        draw: function(val, index, ctx) {
          const label = this.ticks[index].label;
          const [mainText, percentPart] = label.split('(');
          const fullPercent = `(${percentPart}`;
          const xPos = this.getPixelForTick(index);
          const yPos = this.chart.height - 12;
          
          // 绘制主体文本
          ctx.fillStyle = '#333';
          ctx.textAlign = 'center';
          ctx.fillText(mainText.trim(), xPos, yPos);
          
          // 绘制百分比文本
          const mainWidth = ctx.measureText(mainText.trim()).width;
          ctx.fillStyle = '#FF6384';
          ctx.fillText(fullPercent, xPos + mainWidth/2 + 6, yPos);
        }
      }
    }
  }
}

2. Tooltip标签变色（开启HTML模式） #

如果是 tooltip 中的标签需要部分变色，可开启 ChartJS 的 HTML 模式，直接返回带样式的 HTML 字符串：

options: {
  plugins: {
    tooltip: {
      useHTML: true, // 开启HTML解析
      backgroundColor: '#ffffff',
      borderColor: '#e0e0e0',
      borderWidth: 1,
      callbacks: {
        label: (context) => {
          const value = context.parsed.y;
          const percent = ((value / 145) * 100).toFixed(1); // 替换为你的总数值计算逻辑
          return `销量 <span style="color:#FF6384; font-weight:bold">(${percent}%)</span>`;
        }
      }
    }
  }
}

注意事项 #

• 自定义 Canvas 绘制时，需根据实际标签格式调整文本拆分逻辑；
• 坐标轴标签的位置参数（如 yPos）需根据图表布局自行微调；
• Tooltip 开启 HTML 模式后，样式需通过内联 CSS 定义。

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