Chart.js中实现图例多行显示或图表下方添加自定义文本的方法

嘿，我来帮你解决这个Chart.js的图例多行显示问题！你用\n没效果是因为Chart.js默认用Canvas渲染图例，Canvas本身不支持直接换行，不过有两种实用方案可以满足你的需求：要么让图例支持多行，要么直接在图表下方添加自定义统计文本。

方案一：让图例支持多行显示 #

要实现这个，我们需要开启Chart.js的HTML图例模式（因为HTML支持换行标签），然后修改generateLabels方法返回带HTML换行的文本。注意之前你返回多个图例项的写法会生成多个独立的图例条目，我们需要把所有行合并到同一个图例项的文本里。

代码示例：

chart.options.plugins.legend = {
  // 启用HTML图例，允许用HTML标签解析文本
  useHtml: true,
  labels: {
    generateLabels: (chart) => {
      // 获取数据集和统计值（这里假设你只有一个数据集，按需调整）
      const dataset = chart.data.datasets[0];
      const lastValue = dataset.data[dataset.data.length - 1];
      const minValue = Math.min(...dataset.data);
      const maxValue = Math.max(...dataset.data);
      const avgValue = (dataset.data.reduce((sum, val) => sum + val, 0) / dataset.data.length).toFixed(2);

      // 用<br>实现多行，把统计信息放在主标签下方
      const multiLineText = `
        ${dataset.label}<br>
        Last: ${lastValue}<br>
        Min: ${minValue}<br>
        Max: ${maxValue}<br>
        Avg: ${avgValue}
      `;

      return [{
        text: multiLineText,
        fillStyle: dataset.borderColor,
        strokeStyle: dataset.borderColor,
        lineWidth: 2 // 保持图例标记的样式和数据集一致
      }];
    }
  }
};

开启useHtml: true后，图例的文本会被当作HTML解析，<br>标签就能完美实现换行效果，最终所有统计行都会显示在主标签的下方。

方案二：直接在图表下方添加自定义文本 #

如果觉得图例的方式不够灵活，你可以跳过默认图例，直接在图表区域外添加统计文本，有两种简单的实现方式：

方法A：添加DOM元素（最直观） #

在你的图表容器后面直接加一个用于显示统计信息的DOM元素，样式可以自己定义：

<!-- 图表容器 -->
<div id="myChart"></div>
<!-- 统计信息容器 -->
<div id="chartStats" style="text-align:center; margin-top:10px; font-size:14px;"></div>

然后在JavaScript中计算好统计值后，把内容插入到这个容器里：

// 假设已经初始化了chart实例
const dataset = chart.data.datasets[0];
const lastValue = dataset.data[dataset.data.length - 1];
const minValue = Math.min(...dataset.data);
const maxValue = Math.max(...dataset.data);
const avgValue = (dataset.data.reduce((sum, val) => sum + val, 0) / dataset.data.length).toFixed(2);

// 更新统计信息容器的内容
document.getElementById('chartStats').innerHTML = `
  <strong>${dataset.label}</strong><br>
  Last: ${lastValue} | Min: ${minValue} | Max: ${maxValue} | Avg: ${avgValue}
`;

这种方法不需要修改Chart.js的图例配置，样式调整起来也非常方便。

方法B：用Chart.js的afterDraw钩子绘制文本 #

如果你想让统计文本和图表在同一个Canvas里（融为一体），可以用Chart.js的afterDraw钩子，在图表绘制完成后手动绘制文本：

const chart = new Chart(document.getElementById('myChart'), {
  type: 'line', // 替换成你的图表类型
  data: { /* 你的数据集 */ },
  options: { /* 你的图表配置 */ },
  plugins: [{
    afterDraw: (chart) => {
      const ctx = chart.ctx;
      const dataset = chart.data.datasets[0];
      const lastValue = dataset.data[dataset.data.length - 1];
      const minValue = Math.min(...dataset.data);
      const maxValue = Math.max(...dataset.data);
      const avgValue = (dataset.data.reduce((sum, val) => sum + val, 0) / dataset.data.length).toFixed(2);

      // 计算文本位置：图表底部居中
      const centerX = chart.chartArea.left + (chart.chartArea.width / 2);
      const startY = chart.chartArea.bottom + 20; // 距离图表底部20px

      // 设置文本样式
      ctx.textAlign = 'center';
      ctx.font = '12px Arial';
      ctx.fillStyle = '#333';

      // 逐行绘制文本，每行间隔15px
      ctx.fillText(dataset.label, centerX, startY);
      ctx.fillText(`Last: ${lastValue}`, centerX, startY + 15);
      ctx.fillText(`Min: ${minValue}`, centerX, startY + 30);
      ctx.fillText(`Max: ${maxValue}`, centerX, startY + 45);
      ctx.fillText(`Avg: ${avgValue}`, centerX, startY + 60);
    }
  }]
});

这个方法可以让文本和图表完全同步，适合需要统一视觉风格的场景。

备注：内容来源于stack exchange，提问作者Maxim