使用ChartJS实现双柱混合图并标注两柱差值百分比的问题

实现步骤 #

1. 先预处理数据，计算每个产品对应的差值百分比、折线图的y轴坐标值（取同组两个柱子的最大值，保证标签显示在顶部）

// 数据预处理
const percentList = []
const lineYValues = []
// 以下计算逻辑中a为实际值、b为下月估值，分母默认用实际值a，需要调整可自行修改
productsValues?.receitaLiquidaBase.forEach((a, index) => {
  const b = productsValues?.receitaLiquidaOrcado[index] || 0
  // 避免分母为0报错
  const percent = a === 0 ? 0 : (((b - a) * 100) / a).toFixed(2)
  percentList.push(`${percent}%`)
  // 折线y值取同组两个柱子的最大值
  lineYValues.push(Math.max(a, b))
})

2. 替换你的series配置，原有两个多余的line系列删除，仅保留一个用于显示百分比标签的line系列即可，bar系列可保留原有配置：

[
  // 百分比标签专用折线系列
  {
    type: "line",
    label: "差值百分比",
    data: lineYValues,
    fill: false,
    // 隐藏折线线条
    borderColor: "transparent",
    // 隐藏折线节点
    pointRadius: 0,
    pointHoverRadius: 0,
    datalabels: {
      anchor: "end",
      align: "top",
      font: {
        size: 12,
      },
      color: "#000",
      formatter: (value, context) => {
        return percentList[context.dataIndex]
      }
    }
  },
  // 原有实际值柱状图系列
  {
    type: "bar",
    label: monthsLabels?.mesBaseLabel,
    data: productsValues?.receitaLiquidaBase,
    backgroundColor: ["rgba(42,62,176, 1)"],
    borderWidth: 4,
    datalabels: {
      font: {
        size: 10,
      },
      rotation: -90,
      color: "white",
      formatter: (value, context) => {
        if (value !== 0) {
          return value?.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
        } else {
          return 0;
        }
      },
    },
  },
  // 原有估值柱状图系列
  {
    type: "bar",
    label: monthsLabels?.mesOrcadoLabel,
    data: productsValues?.receitaLiquidaOrcado,
    backgroundColor: "orange",
    borderWidth: 4,
    datalabels: {
      font: {
        size: 10,
      },
      rotation: -90,
      color: "black",
      formatter: (value, context) => {
        if (value !== 0) {
          return value?.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
        } else {
          return 0;
        }
      },
    },
  }
]

注意事项 #

• 若需要调整差值计算逻辑，修改预处理步骤中percent的计算公式即可，比如调整分子的a、b顺序，或者替换分母为估值b
• 需确保已经正确安装并注册chartjs-plugin-datalabels插件，否则自定义标签不会生效

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