Vous pouvez créer un plugin pour que cela fonctionne. J'ai ce travail dans une vue en construction pour le moment mais j'ai essayé de l'adapter pour vous autant que possible.
Modèle
template: `
<base-chart
class="chart"
[datasets]="datasets"
[labels]="labels"
[options]="options"
[chartType]="'line'"
[plugin]="dataLabelPlugin">
</base-chart>
`
Js ajouter dans le plugin
private options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
plugins: [{
afterDatasetsDraw: this.dataLabelPlugin
}]
};
Js définissent un plug-in qui attire les chiffres après chaque animation. Vous devrez peut-être passer dans le tableau que vous modifiez en fonction du contexte.
private dataLabelPlugin = function(chart, easing) {
// To only draw at the end of animation, check for easing === 1
const ctx = chart.ctx;
const fontSize = 12;
const fontStyle = 'normal';
const fontFamily = 'open sans';
const padding = 5;
chart.data.datasets.forEach((dataset, key) => {
let meta = chart.getDatasetMeta(key);
if (!meta.hidden) {
meta.data.forEach((element, index) => {
let position = element.tooltipPosition();
// Just naively convert to string for now
let dataString = dataset.data[index].toString();
ctx.fillStyle = '#676a6c';
ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
// Make sure alignment settings are correct
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(dataString, position.x, position.y - (fontSize/2) - padding);
});
}
});
};
Si cela fonctionne, faites-le moi savoir et je peux apporter des modifications afin de rendre cette réponse plus correcte.
