Chart.js 4.4柱状图：为每个柱子添加顶部目标线的问题

问题核心 #

添加目标线数据集时出现映射错误，且X轴标签重复。根源在于：

• 原始数据存在重复Day条目，直接用Set去重后，数据数组与标签数组的对应关系被破坏
• 配置的parsing参数与手动提取的标签/数据数组冲突，干扰了数据映射逻辑

修正后的完整代码 #

var WeeklyData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.UDTSLDDailyPVA.ToList()))
console.log(WeeklyData);

// 1. 按Day分组去重，确保每个Day对应唯一数据（若有重复Day，可按需累加实际值）
const groupedData = WeeklyData.reduce((acc, item) => {
  if (!acc[item.Day]) {
    acc[item.Day] = { 
      Day: item.Day, 
      TotalActual: item.TotalActual, 
      WeekTarget: item.WeekTarget 
    };
  }
  // 若同一天有多条数据，取消注释下方代码累加TotalActual
  // acc[item.Day].TotalActual += item.TotalActual;
  return acc;
}, {});

// 2. 按日期排序分组后的数据，保证X轴标签顺序正确
const sortedDays = Object.values(groupedData).sort((a, b) => new Date(a.Day) - new Date(b.Day));

// 3. 提取标签、实际值、目标值数组
const weeklylabels = sortedDays.map(x => x.Day);
const weeklydatasets = sortedDays.map(y => y.TotalActual);
const weektarget = sortedDays.map(y => y.WeekTarget);

var barChartDataWeekly = {
  labels: weeklylabels,
  datasets: [
    // 实际值柱状图数据集
    {
      type: 'bar',
      data: weeklydatasets,
      backgroundColor: 'rgba(0, 154, 221, 1)',
      barThickness: 20 // 可按需调整柱子宽度
    },
    // 顶部目标线数据集（用散点图实现水平短线）
    {
      type: 'scatter',
      data: sortedDays.map((item, index) => ({
        x: index, // 对应X轴标签的索引
        y: item.WeekTarget
      })),
      pointStyle: 'line',
      pointWidth: 20, // 与柱子宽度一致，保证短线覆盖柱子顶部
      pointRadius: 0,
      borderColor: '#ff0000', // 目标线颜色
      borderWidth: 2
    }
  ],
};

window.onload = function () {
  var ctxUPHHistory = document.getElementById('barChartUPHHistory').getContext("2d");
  window.myBar = new Chart(ctxUPHHistory, {
    type: 'bar',
    data: barChartDataWeekly,
    options: {
      responsive: true,
      maintainAspectRatio: false,
      // 移除parsing配置：手动提取数组后无需解析原始对象
      scales: {
        y: {
          ticks: {
            beginAtZero: true
          }
        },
        x: {
          type: 'category',
          labels: weeklylabels
        }
      },
      plugins: {
        legend: {
          display: false
        }
      }
    }
  });
};

关键修改说明 #

• 分组去重：用reduce对原始数据按Day分组，彻底解决X轴标签重复问题，同时保证标签与数据一一对应
• 移除parsing参数：手动提取标签和数据数组后，该参数会导致Chart.js错误解析数据，引发映射异常
• 目标线实现：使用scatter类型数据集，通过pointStyle: 'line'绘制水平短线，匹配柱子宽度，实现每个柱子顶部的目标线效果

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