javascript - 使用 Charts.js 的多个数据集的多个标签

Question

我有这个带有两个数据集的条形图。我正在尝试显示员工和学生的每个应用程序的点击次数。

每个条形代表一个应用程序。如您所见，对于员工，我有应用程序 A、B、C、D 等，对于学生，我在应用程序 1、2、3、4 等中绘制。

数组employee_app_names 包含Employees 的标签值。数组 student_app_names 包含学生的标签值。

如何在条形图中为多个数据集设置多个标签，以使条形图看起来像我附加的图像？

这是我的代码：

eval("employee_app_names  = [" + response.employee_app_names + "]");
eval("employee_app_clicks = [" + response.employee_app_clicks + "]");
eval("student_app_names  = [" + response.student_app_names + "]");
eval("student_app_clicks = [" + response.student_app_clicks + "]");
var ctx = $("#" + reportName).get(0).getContext("2d");
ctx.canvas.width = 800;
ctx.canvas.height = 250;
var data = {
  labels: employee_app_names, // THIS IS A,B,C,D,E,ETC
  datasets: [{
      data: employee_app_clicks,
      label: "Employees/Aux",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(86, 88, 135,0.7)"
    },
    {
      data: student_app_clicks,
      label: "Students",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(117, 196, 124,0.7)"
    }
  ]

}
myNewChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
  title: {
    display: true,
    text: response.title
  },
  scaleShowValues: true,
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }],
    xAxes: [{
      ticks: {
        autoSkip: false
      }
    }]
  }
}
});
}, "json");

标签： javascriptchart.js