作者:白开水 | 来源:互联网 | 2022-12-23 17:02
我正在使用Chart.js创建一个条形码,我必须在每个条形图上显示百分比,所以我找到了chartjs-plugin-datalabels,但是我无法使其工作,文档和示例都不清楚为了我.
这就是我得到的:
HTML:
使用Javascript:
// Bar chart
var valuedata= [2478,5267,734,784,433];
var valuelabel=["Africa", "Asia", "Europe", "Latin America", "North America"];
var myBarChart = new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: valuelabel,
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: valuedata,
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
},
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false,
drawBorder: false
},
ticks: {
display: false
}
}]
},
plugins: {
datalabels: {
color: 'white',
display: function(context) {
console.log("Algo: "+context);
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: function(value, context) {
return context.dataIndex + ': ' + Math.round(value*100) + '%';
}
}
}
}
});
myBarChart.update();
据说,从我得到的内容中,"插件"内部选项是允许显示值的那个,但正如我在上面的代码中所示,对我来说不起作用,当然我错过了一些东西,但我不知道知道什么,有人可以帮助我吗?
谢谢.
小提琴:
https://jsfiddle.net/s64bq4sw/16/
1> elunap..:
这是因为我使用的Chartjs的版本,这个插件需要2.7.0或更高版本.