我在chart.js 2.7中有堆积的条形图。当我在后台添加目标栏时，主体栏不会堆叠。
var ctx = document.getElementById（'ctx _ $ {ebb.idHtmlElementFiglio}'）。getContext（'2d'）; var formatter = new Intl.NumberFormat（'it-IT'，{ 风格：“货币”， 货币：“ EUR”， minimumFractionDigits：2 }）
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: [<c:forEach items="${ebb.getListaElementiBudget()}" varStatus="status" var="eb">
'${eb.fondo}'
<c:if test="${status.index +1 != ebb.getListaElementiBudget().size()}">, </c:if>
</c:forEach>],
datasets: [{
type: 'line',
label: 'Totale',
data: [
<c:forEach items="${ebb.getListaElementiBudget()}" varStatus="status" var="eb">
<c:if test="${eb.totale <= eb.getTotaleSpesa()}">
${eb.totale}
</c:if>
<c:if test="${status.index +1 != ebb.getListaElementiBudget().size()}">, </c:if>
</c:forEach>
],
backgroundColor: 'red',
borderColor: 'transparent',
pointBorderColor: 'red',
fill: false,
pointStyle: 'line'
}, {
label: 'Supplenza',
data: [<c:forEach items="${ebb.getListaElementiBudget()}" varStatus="status" var="eb">
'${eb.totaleSupplenza}' <c:if test="${status.index +1 != ebb.getListaElementiBudget().size()}">, </c:if>
</c:forEach>],
backgroundColor: '#069904'
}, {
label: 'Tutor',
data: [<c:forEach items="${ebb.getListaElementiBudget()}" varStatus="status" var="eb">
'${eb.totaleTutor}' <c:if test="${status.index +1 != ebb.getListaElementiBudget().size()}">, </c:if>
</c:forEach>],
backgroundColor: '#22aa99'
}, {
label: 'Docenza',
data: [<c:forEach items="${ebb.getListaElementiBudget()}" varStatus="status" var="eb">
'${eb.totaleDocenza}' <c:if test="${status.index +1 != ebb.getListaElementiBudget().size()}">, </c:if>
</c:forEach>],
backgroundColor: 'yellow'
}, {
label: "Target",
backgroundColor: 'rgba(0, 0, 0, 0.2)',
borderWidth: 1,
borderColor: 'rgba(0, 0, 0, 0.2)',
data: [
<c:forEach items="${ebb.getListaElementiBudget()}" varStatus="status" var="eb">
${eb.totale} <c:if test="${status.index +1 != ebb.getListaElementiBudget().size()}">, </c:if>
</c:forEach>
],
fill: false,
xAxisID: "bar-x-axis1"
}]
},
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
title: function (tooltipItems, data) {
var idx = tooltipItems[0].index;
return 'Fondo:' + data.labels[idx]; //do something with title
},
label: function (tooltipItems, data) {
return formatter.format(tooltipItems.yLabel);
}
}
},
legend: {
display: false,
position: 'bottom',
fontSize: 10,
boxWidth: 10
},
scales: {
xAxes: [{
stacked: true,
ticks: {
callback: function (value) {
if (value.length > 4) {
return value.substr(0, 5) + '...'; //truncate
} else {
return value
}
},
}
},{
stacked: true,
display: false,
id: "bar-x-axis1",
type: 'category',
categoryPercentage: 0.5,
barPercentage: 0.9,
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
stacked: false,
ticks: {
beginAtZero: true,
// Abbreviate the millions
callback: function (value, index, values) {
return value / 1e6 + 'M';
}
},
fontSize: 10
}]
},
}
});
chart.update();