如何修改Chart.js实现图表数据文本逐行纵向排列效果

直接修改现有代码里的图表配置即可实现目标效果，不需要额外重构核心逻辑：

• 首先确认项目已加载chartjs-plugin-datalabels插件，这是Chart.js自定义数据标签的官方配套插件，兼容所有主流图表类型
• 在图表配置的plugins节点下新增/修改datalabels配置，核心是利用插件原生支持的数组返回值实现自动逐行渲染，参考配置如下：

const chartConfig = {
  type: 'bar',
  data: yourChartData,
  options: {
    // 原有响应式、坐标轴等配置保持不变
    plugins: {
      datalabels: {
        textAlign: 'center',
        font: {
          size: 12,
          lineHeight: 1.5
        },
        anchor: 'end',
        align: 'top',
        offset: 6,
        formatter: function(value, context) {
          // 按展示顺序把每行内容放进数组，插件会自动按上下顺序逐行渲染
          const categoryName = context.chart.data.labels[context.dataIndex];
          const dataValue = value + '%'; // 替换为实际使用的数值单位
          const subText = context.chart.data.subDesc[context.dataIndex]; // 对应需要展示的辅助说明文本
          return [categoryName, dataValue, subText];
        }
      }
    }
  }
}

• 如果需要悬浮提示框的文本也改成逐行排列，只需要在同一个plugins节点下修改tooltip的回调函数，同样返回数组即可自动按行展示：

tooltip: {
  callbacks: {
    label: function(context) {
      return [
        `分类：${context.label}`,
        `数值：${context.raw}`,
        `说明：${context.chart.data.subDesc[context.dataIndex]}`
      ]
    }
  }
}

如果你是用自定义DOM实现图表外的文本标注，不要把所有文本放在同一个行内标签里，每一行内容单独用块级标签包裹，设置居中对齐后自然会形成上下逐行排列的效果，调整行高和外边距就能匹配参考样式的间距。

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