Jquery 使用Chart.js向条形图标签值添加自定义文本
我正在使用Chart.js插件显示条形图,我得到的输出如下: 我的问题是,如何在向工具栏呈现值后添加自定义文本?例如,在一月,数值显示为56。我想在其旁边添加%增加/减少的信息(即56[115%])如何操作 这是我的密码Jquery 使用Chart.js向条形图标签值添加自定义文本,jquery,label,chart.js,Jquery,Label,Chart.js,我正在使用Chart.js插件显示条形图,我得到的输出如下: 我的问题是,如何在向工具栏呈现值后添加自定义文本?例如,在一月,数值显示为56。我想在其旁边添加%增加/减少的信息(即56[115%])如何操作 这是我的密码 window.chartHeadcount = new Chart(document.getElementById("barChartHeadcount"), { type: 'bar', data: { lab
window.chartHeadcount = new Chart(document.getElementById("barChartHeadcount"), {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Billed',
backgroundColor: 'rgb(0, 197, 106)',
data: billedHeadCount
}, {
label: 'Unbilled',
backgroundColor: 'rgb(255, 114, 107)',
data: unBilledHeadCount
}]
},
options: {
title: {
display: true,
text: 'Community Headcount - ' + Options.Globals.Year
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: false
}],
yAxes: [{
stacked: false
}]
}
}
});
您可以使用插件chartjs datalabels并设置formatter属性来设置自定义标签 为您的参考创建了小提琴-> 希望有帮助
new Chart(document.getElementById("barChartHeadcount"), {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Billed',
backgroundColor: 'rgb(0, 197, 106)',
data: [56, 63, 67]
}, {
label: 'Unbilled',
backgroundColor: 'rgb(255, 114, 107)',
data: [1, 2, 3]
}]
},
options: {
title: {
display: true,
text: 'Community Headcount'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: false
}],
yAxes: [{
stacked: false
}]
},
plugins: {
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
borderRadius: 4,
color: 'white',
formatter: function(value){
return value + ' (100%) ';
}
}
}
}
});
我正在用它。但是,是否有可能从另一个阵列中获取此信息?不是硬编码值是的,您需要在函数中有自己的逻辑,并用计算值替换硬编码值。