我希望将计算数组中的数据表放在每一列的顶部。我的数组中的值表示每个条形用另一种颜色填充的量。我做了一个以百分比计算这些值的函数。有什么小贴士要放在数据标签格式化程序部分吗?
var data1 = ['7.8', '5', '', '', '7.7', '7.8', '8.1', '7.8'];
var data2 = ['8', '8', '', '', '8', '8', '8', '8'];
var percentage = [];
function calculate() {
for (let i = 0; i < 8; i++) {
percentage.push(data1[i] / data2[i] * 100)
}
}
calculate();
var canvas = document.getElementById('myChart');
var data = {
labels: ['1','2','3','4','5','6','7','8'],
datasets: [{
// xAxisID: "bar-x-axis2",
data: data1,
backgroundColor: ['#c3cd46', '#e31c24', '#FFFFFF', '#FFFFFF', '#c3cd46', '#267533', '#267533', '#267533'],
datalabels: {
display: false,
},
}, {
data: data2,
// xAxisID: "bar-x-axis1",
datalabels: {
display: false,
},
backgroundColor: ['rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)'],
}, {
data: ['', '', '', '', '', '', '', '']
}]
};
var option = {
legend: {
display: false,
},
tooltips: {
enabled: false,
},
scales: {
yAxes: [{
scaleFontSize: 40,
scaleLabel: {
display: true,
},
ticks: {
max: 10,
min: 0,
stepSize: 2,
beginAtZero: true,
callback: function(value) {
return value + " h"
}
},
}],
xAxes: [{
barThickness: 15,
stacked: true,
}],
},
plugins: {
datalabels: {
anchor: 'end',
align: 'top',
formatter: function(context) {
},
}
}
};
var myBarChart = Chart.Bar(canvas, {
data: data,
options: option
});
https://stackoverflow.com/questions/56530570
复制相似问题