如何在Chart.js柱状图中为多数据集配置多标签？

要实现你需要的多数据集对应各自标签的柱状图，我们需要调整数据集结构和X轴配置，同时优化原代码里的不安全操作（比如eval的使用）。以下是具体步骤和完整代码：

1. 替换不安全的eval解析数组 #

eval会执行任意代码，存在安全风险，我们改用更安全的方式解析响应中的数组字符串：

// 假设response里的字段是逗号分隔的字符串（比如"A,B,C"或"1,2,3"）
const employee_app_names = response.employee_app_names.split(',').map(item => item.trim());
const employee_app_clicks = response.employee_app_clicks.split(',').map(Number);
const student_app_names = response.student_app_names.split(',').map(item => item.trim());
const student_app_clicks = response.student_app_clicks.split(',').map(Number);

如果response里的字段已经是JSON格式的数组字符串，直接用JSON.parse(response.employee_app_names)即可。

2. 配置多标签柱状图 #

根据你描述的需求（每个数据集对应独立标签），这里提供两种常见的实现方式：

方式一：独立分组展示（员工/学生柱子分开排列） #

这种方式下，员工的柱子对应A/B/C标签，学生的柱子对应1/2/3标签，在图表中左右分区排列：

// 合并两个数据集的标签，作为X轴总标签
const combinedLabels = [...employee_app_names, ...student_app_names];

// 为员工数据集填充空值到学生标签对应的位置
const employeeData = [...employee_app_clicks, ...Array(student_app_names.length).fill(null)];
// 为学生数据集填充空值到员工标签对应的位置
const studentData = [...Array(employee_app_names.length).fill(null), ...student_app_clicks];

const ctx = $("#" + reportName).get(0).getContext("2d");
const myNewChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: combinedLabels,
    datasets: [{
      data: employeeData,
      label: "Employees/Aux",
      backgroundColor: "rgba(86, 88, 135,0.7)"
    }, {
      data: studentData,
      label: "Students",
      backgroundColor: "rgba(117, 196, 124,0.7)"
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    title: {
      display: true,
      text: response.title
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          display: true // 显示Y轴刻度值
        }
      }],
      xAxes: [{
        ticks: {
          autoSkip: false,
          display: true // 显示所有X轴标签
        }
      }]
    }
  }
});

// 用CSS设置图表容器尺寸，替代直接修改canvas宽高
$("#" + reportName).css({
  width: '800px',
  height: '250px'
});

方式二：分组并排展示（每个分组含员工和学生柱子，各自显示标签） #

如果需要每个分组里同时显示员工和学生的柱子，并为每个柱子标注自己的标签，可以使用chartjs-plugin-datalabels插件实现：

首先引入插件（如果还没引入）：

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

然后配置图表：

// 确保两个数据集长度一致，短的数据集补全空值/0
const maxLength = Math.max(employee_app_names.length, student_app_names.length);
const filledEmployeeNames = [...employee_app_names, ...Array(maxLength - employee_app_names.length).fill('')];
const filledEmployeeClicks = [...employee_app_clicks, ...Array(maxLength - employee_app_clicks.length).fill(0)];
const filledStudentNames = [...student_app_names, ...Array(maxLength - student_app_names.length).fill('')];
const filledStudentClicks = [...student_app_clicks, ...Array(maxLength - student_app_clicks.length).fill(0)];

const ctx = $("#" + reportName).get(0).getContext("2d");
const myNewChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: Array(maxLength).fill(''), // X轴主标签留空，用插件显示每个柱子的标签
    datasets: [{
      data: filledEmployeeClicks,
      label: "Employees/Aux",
      backgroundColor: "rgba(86, 88, 135,0.7)",
      datalabels: {
        display: true,
        anchor: 'end',
        align: 'top',
        formatter: (value, context) => filledEmployeeNames[context.dataIndex]
      }
    }, {
      data: filledStudentClicks,
      label: "Students",
      backgroundColor: "rgba(117, 196, 124,0.7)",
      datalabels: {
        display: true,
        anchor: 'end',
        align: 'bottom',
        formatter: (value, context) => filledStudentNames[context.dataIndex]
      }
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    title: {
      display: true,
      text: response.title
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {
          display: false // 隐藏X轴主标签
        }
      }]
    },
    plugins: {
      datalabels: {
        color: '#333',
        font: {
          weight: 'bold'
        }
      }
    }
  }
});

// 设置图表容器尺寸
$("#" + reportName).css({
  width: '800px',
  height: '250px'
});

关键注意事项 #

• 避免使用eval：它会带来安全隐患，改用字符串分割或JSON.parse解析数组更可靠。
• 替代废弃的scaleShowValues：Chart.js v2+已移除这个选项，如需显示柱子上的值，推荐使用chartjs-plugin-datalabels插件。
• 图表尺寸设置：通过CSS设置容器尺寸，并开启responsive: true和maintainAspectRatio: false，比直接修改canvas宽高更稳定。

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