Discussion :

[denisduval75]

Bonjour,
J'utilise ChartJS pour réliser différents graphiques.
Je souhaite externaliser le code Javascript pour les données d'un graphique; pour cela, je construis 1 variable qui contient le code que je transmets au script JS.

Voici mon code coté serveur (java):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
setDonnee("[{".concat("type:").concat("'line'")
                 ...
                 ...

Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function drawChartUtilisateur(canvas, donnee) {
   new Chart(document.getElementById(canvas).getContext('2d'), { 
        data: {
            datasets: donnee
        },

Tout ceci fonctionne très bien, sauf si je remplace dans la variable Donnee : "'line'" par "'bar'"
Rien ne s'affiche sur le canvas dans ce cas !

Et là j'avoue être perdu !
Pouvez-vous m'aider SVP ?
Merci.

[NoSmoking]

Bonjour,
il serait bon que tu nous montres à quoi correspond le résultat de ton setDonnee("[{".concat("type:").concat("'line'").

Déjà, pourquoi y a t-i des simples quottes autour de line et/ou bar.

[denisduval75]

Voici le contenu de la variable Donnee :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[{
  type: 'line',
  label: 'Label graphique',
  borderColor: colorBleu,
  backgroundColor: colorBleu,
  fill: false,
  datalabels: {
    display: false
  },
  data: [2.9581124E7, 3.0960236E7, 3.1504709E7, 2.8674547E7, 3.0815519E7, 3.245989E7, 3.3069909E7, 3.3260666E7, 3.2609402E7, 3.2469211E7, 3.2245313E7, 3.2377454E7, 3.2412141E7, 3.2597479E7, 3.2874362E7, 3.3118456E7, 3.3393418E7, 3.3562877E7]
}, {
  label: 'Label graphique',
  borderColor: colorRouge,
  backgroundColor: colorRouge,
  fill: false,
  datalabels: {
    display: false
  },
  data: [2.4530004E7, 2.5934992E7, 2.754116E7, 2.8806649E7, 2.9834727E7, 3.0357998E7, 3.138067E7, 3.1461084E7, 3.1765944E7, 3.1623695E7, 3.2044735E7, 3.2744114E7, 3.2369866E7, 2.7807343E7, 2.8148157E7, 2.8489739E7, 2.8835521E7, 2.9185559E7]
}]

Les quotes sont nécessaires pour JS. Exemple : type: 'line', label: 'Label graphique', ...

[Toufik83]

Bonjour,

Apparemment le type n'est attribué que pour le premier élément des données, t'es sûr qu'avec "line" tout fonctionne comme prévu ?

[denisduval75]

Bonjour,
Oui tout fonctionne très bien avec 'line'.

[Toufik83]

Bonjour,

je n'ai pas réussi à afficher le graphique avec un seul type et sans la propriété labels comme ton exemple.

Tu peux voir cet exemple en ligne pour voir la différence avec ton code...