Forum : Ajout image sur Chart

Hello,

Besoin d'aide pour le code ci-dessous, besoin d'insérer des images sur mon graph depuis un url.

Pouvez-vous m'aider?

<!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>

var xValues = ["resultat 1", "resultat 2", "resultat 3", "resultat 4", "resultat 5", "resultat 6"];
var
var yValues = [55, 49, 24, 24, 15, 20];
var barColors = [
"#b91d47",
"#00aba9",
"#2b5797",
"#e8c3b9",
"#1e7145"
];

new Chart("myChart", {
type: "doughnut",
data: {
labels: xValues,
datasets: [{
backgroundColor: barColors,
data: yValues
}]
},
options: {
title: {
display: true,
text: "Pack Blockchain"
}
}
});
</script>

</body>
</html>

Ce que je veux

Un lien me permettant d'ajouter des images sur chaque Valeur

Ce que j'obtiens

Impossible d'afficher les images...

4 réponses

gillesr

Bonjour,
à la deuxième ligne de ton script, tu as un 'var' qui traine tout seul.
Si tu le supprime, le diagramme s'affiche.

dp287517

Auteur

Merci beaucoup, sa fonctionne.
Est-ce que vous savez comment je peux faire pour insérer une image avec un url ?
Je souhaite avoir une image au dessus du graph pour chaque résultat.
Merci.

gillesr

Je vois deux méthodes simples :
1 - gérer l'image dans le canvas comme dans la doc de chart.js https://www.chartjs.org/docs/latest/configuration/canvas-background.html#image
2 - ajouter ton image en arrière plan en CSS.


#myChart {
  background-image: url(url_de_l_image);
}

puananiila99

Click the chart area of the chart. On the Insert tab, in the Illustrations group, click Pictures. Locate the picture that you want to insert, and then double-click it. Tip: To add multiple pictures, hold down CTRL while you click the pictures that you want to insert, and then click Insert.
MyFiosGateway Verizon
mobdro