Chart.js如何传入键值对作为输入数据并在柱状图上下显示标签

1. 核心修改点 #

• 首先调整输入数据为你需要的公司/行业名称+数值键值对结构，避免分开维护多组数据不同步
• 移除全局datalabels的formatter配置，分别为正负两个柱状图数据集配置独立的标签显示规则和位置
• 对齐两个数据集的长度，避免渲染异常
• 原代码重复引入了3次Chart.js，建议只保留1次即可，避免版本冲突

2. 核心代码修改示例 #

数据结构调整（支持键值对输入） #

// 直接按公司名称+数值的键值对形式输入数据
const companyData = [
  {name: "公司1", value: 4.32},
  {name: "公司2", value: 8.37},
  {name: "公司3", value: 6.37},
  {name: "公司4", value: 11.37},
  {name: "公司5", value: 7.37},
  {name: "公司6", value: 8.37},
  {name: "公司7", value: 6.37},
  {name: "公司8", value: 9.73},
  {name: "公司9", value: 4.89}
]
const sectorData = [
  {name: "行业1", value: -11.32},
  {name: "行业2", value: -10.37},
  {name: "行业3", value: -12.37},
  {name: "行业4", value: -10.37},
  {name: "行业5", value: -8.37},
  {name: "行业6", value: -4.37},
  {name: "行业7", value: -11.37},
  {name: "行业8", value: -4.73},
  {name: "行业9", value: -4.89}
]
// 提取x轴占位刻度（x轴已设为隐藏不影响显示效果）
const chartLabels = companyData.map(item => item.name)

数据集配置修改（分别配置上下标签） #

var bookValueVsPriceBookDatasets = {
  labels: chartLabels,
  datasets: [
    {
      type: 'bar',
      // 从键值对提取数值用于渲染柱子高度
      data: companyData.map(item => item.value),
      backgroundColor: '#2FC798',
      borderColor: '#2FC798',
      borderWidth: 2.2,
      datalabels: {
        anchor: 'end',
        align: 'top',
        offset: 4,
        // 自定义正柱子顶部显示内容：公司名+数值
        formatter: (value, ctx) => {
          const item = companyData[ctx.dataIndex]
          return `${item.name}\n${value}%`
        }
      }
    },
    {
      type: 'bar',
      data: sectorData.map(item => item.value),
      backgroundColor: '#C72151',
      borderColor: '#C72151',
      borderWidth: 2.2,
      datalabels: {
        anchor: 'start',
        align: 'bottom',
        offset: 4,
        // 自定义负柱子底部显示内容：行业名+数值
        formatter: (value, ctx) => {
          const item = sectorData[ctx.dataIndex]
          return `${item.name}\n${Math.abs(value)}%`
        }
      }
    }
  ]
}

全局插件配置修改 #

删除全局plugins.datalabels里的formatter配置，只保留通用样式即可：

datalabels: {
  display: true,
  borderWidth: 0.5,
  color: 'black',
  font: {
    size: 11,
    weight: 'bold',
  }
}

3. 可选调整说明 #

• 如果需要调整标签和柱子的间距，修改对应datalabels下的offset参数即可
• 标签的换行可以通过\n实现，也可以调整font.size适配显示密度
• 若不需要显示百分号，直接删掉formatter里的%即可

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