Ich habe so BarChart: , und ich kann, um Wege Etiketten vom Server erhalten, wie folgt aus:Wie fügt man dem barChart Arrays mit chart.js hinzu?
"dateLabels": [
"01 Thu", "02 Fri", "03 Sat", ....
]
oder so:
"dateLabels": {
"dayOfMonth": [1, 2, 3, 4, ...],
"dayOfWeek": ["Th", "Fr", "Sa", "Su", ...]
}
Und wenn ich dann die erste Variante erhalten haben gezeigt, auf eine Bar in einer Linie, aber ich brauche sie wie folgt angezeigt:
Ho w kann ich diese lebensbilder untereinander anzeigen?
Und noch ein Interesse: wie Werte auf jedem Balken hinzufügen?
Mein Code sieht so aus:
getCombData() {
this.XTimeApi.combData()
.subscribe((response) => {
this.data = response;
let canvas: any = document.getElementById("comb");
let ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: response.data.dateLabels, // ['01 Mon', '02 Tue', '03 Wed']
datasets:
[
{
label: "Diff",
backgroundColor: 'rgba(255, 255, 255, 0.8)',
borderColor: 'rgb(194, 194, 194)',
borderWidth: 1,
data: [0, 0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,8,8,0,0,8,8,8,7,8,0,0,8],
},
{
label: "Weekend",
backgroundColor: 'rgba(194, 194, 194, 0.4)',
borderColor: 'rgb(194, 194, 194)',
borderWidth: 1,
data: [8, 8, 0,0,0,0,0,8,8,0,0,0,0,0,8,8,0,0,0,0,0,8,8,0,0,0,0,0,8,8,0],
},
{
label: "NPA",
backgroundColor: 'rgb(28, 132, 198)',
borderColor: 'rgb(28, 132, 198)',
borderWidth: 1,
data: [0, 0, 3, 0, 0, 0, 0, 0, 0,0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,0,0]
},
{
label: "Loged hours",
backgroundColor: 'rgb(26, 179, 148)',
borderColor: 'rgb(26, 179, 148)',
borderWidth: 1,
data: [0, 0, 5, 8, 8, 7, 7, 0, 0,0, 3, 8, 8, 8, 0, 0, 9, 0,0, 0, 0, 0, 0, 0, 0, 0, 0,0,0,0,0]
},
{
label: "Overtimes",
backgroundColor: 'rgb(252, 223, 5)',
borderColor: 'rgb(194, 194, 194)',
borderWidth: 1,
data: [0, 0, 0,0,0,2,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
},
{
label: "No report",
backgroundColor: 'rgb(255, 255, 255)',
borderColor: 'rgb(237, 85, 101)',
borderWidth: 1,
data: [0, 0, 0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
},
{
label: "Report not send",
backgroundColor: 'rgb(237, 85, 101)',
borderColor: 'rgb(237, 85, 101)',
borderWidth: 1,
data: [0, 0, 0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,8,0,0,0,0,0,0,0,0,0,0,0,0,0],
}
]
},
options: {
scaleShowLabels: true,
tooltips: {
mode: 'label'
},
legend: {
display: false
},
scales: {
scaleLabel: {
labelString: 'Text'
},
yAxes: [{
ticks: {
maxRotation: 5,
max: 10,
min: 0,
stepSize: 4
},
stacked: true
}],
xAxes: [{
ticks: {
fontSize: 10,
},
stacked: true,
gridLines: {
display: false,
}
}]
}
}
});
});
}