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

时间:2019-05-09 15:00:43

标签: javascript chart.js

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

enter image description here

每个栏代表一个应用。如您所见,对于员工,我有应用程序A,B,C,D等,对于学生,我有应用程序1、2、3、4等。

数组employee_app_names包含雇员的标签值。数组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");

0 个答案:

没有答案