是否可以向Chart.JS栏添加单个标签?

时间:2016-11-09 15:10:54

标签: javascript c# asp.net-mvc chart.js

我有一个功能齐全的Chart.JS Barchart按预期加载,但我想将用户名添加到与其关联的每个栏中,以便管理员(可以查看所有条目)可以区分它们。

function BarChart(data) {
                var barChartData = {
                    labels: data.Month,
                    datasets: [
                        {
                            label: 'Weight (kg)',
                            fillColor: "rgba(220,220,220,0.5)",
                            backgroundColor: "rgba(46, 44, 211, 0.7)",
                            highlightFill: "rgba(220,220,220,0.75)",
                            highlightStroke: "rgba(220,220,220,1)",
                            data: data.Weight
                        },
                        {
                            label: 'Steps',
                            fillColor: "rgba(0,0,0,0.5)",
                            backgroundColor: "rgba(215, 44, 44, 0.7)",
                            highlightFill: "rgba(0,0,0,0.5)",
                            highlightStroke: "rgba(0,0,0,0.5)",
                            data: data.Steps
                        }
                    ]

                }
                var ctx = document.getElementById("barchart").getContext("2d");
                window.myBar =new Chart(ctx, {
                    type: 'bar',
                    data: barChartData,
                    options: { responsive: true }
                });

我已成功通过用户名,可以使用data.User调用它们,但是当我将其附加到Steps或Weight标签时,我最终得到“Steps for:admin,admin,admin”(因为我有三个条目,全部来自管理员)。

是否可以拥有它,以便每个栏都有它所属的用户名?

1 个答案:

答案 0 :(得分:0)

可能不是您要求的,但您可以将其添加到工具提示中。

options: {
  tooltips:{
    callbacks: {
       afterLabel: function(e){return "added By:" +data.User[e.datasetIndex][e.index]}
    }
  }
}

https://jsfiddle.net/r71no58a/7/