[FusionCharts] Graphique ne s'affiche pas sur toute la page

**Ange HALA** · 11/01/2019, 16h28

Bonsoir à tous,

Je souhaite utiliser FusionCharts pour les rendus graphiques de mes travaux. Je viens de le découvrir.
J'ai téléchargé le package et suivi le processus de chargement.

Cependant, les graphiques ne s'affichent pas correctement sur toute la page. Voici Les codes:

Graph1.js

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
const dataSource = {
  "chart": {
    "caption": "Average Fastball Velocity",
    "yaxisname": "Velocity (in mph)",
    "subcaption": "[2005-2016]",
    "numbersuffix": " mph",
    "rotatelabels": "1",
    "setadaptiveymin": "1",
    "theme": "fusion"
  },
  "data": [
    {
      "label": "2005",
      "value": "89.45"
    },
    {
      "label": "2006",
      "value": "89.87"
    },
    {
      "label": "2007",
      "value": "89.64"
    },
    {
      "label": "2008",
      "value": "90.13"
    },
    {
      "label": "2009",
      "value": "90.67"
    },
    {
      "label": "2010",
      "value": "90.54"
    },
    {
      "label": "2011",
      "value": "90.75"
    },
    {
      "label": "2012",
      "value": "90.8"
    },
    {
      "label": "2013",
      "value": "91.16"
    },
    {
      "label": "2014",
      "value": "91.37"
    },
    {
      "label": "2015",
      "value": "91.66"
    },
    {
      "label": "2016",
      "value": "91.8"
    }
  ]
};
 
FusionCharts.ready(function() {
   var myChart = new FusionCharts({
      type: "line",
      renderAt: "chart-container",
      width: "100%",
      height: "100%",
      //dataFormat: "json", 
      dataSource
   }).render();
});

Code.html

Code HTML :

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
<!doctype HTML>
<html lang=”fr ”>
<head>
    <!-- Step 1 - Including the fusioncharts core library -->
     <script type="text/javascript" src="C:/Ange Hala/fusioncharts-suite-xt/js/fusioncharts.js"></script>
    <!-- Step 2 - Including the fusion theme -->
     <script type="text/javascript" src="C:/Ange Hala/fusioncharts-suite-xt/js/themes/fusioncharts.theme.fusion.js"></script>
 
 
</head>
 
<body>
 
 <div id="chart-container">  <script type="text/javascript" src="C:/Ange Hala/fusioncharts-suite-xt/Graph1.js"></script>  </div> 
 
 
</body>
 
</html>

J'ajoute une capture d'écran sur l'affichage du graphique:
Nom : Graphique FC.JPG
Affichages : 236
Taille : 28,5 Ko

Je vous remercie d'avance pour votre aide.

**NoSmoking** · 14/01/2019, 10h31

Bonjour,
il te faut donner une dimension à la hauteur de ton élément.

Code css :

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

1
2
3
4
5
#chart-container {
  width: 40em;        /* par défaut 100% du conteneur */
  height: 20em;       /* par défaut vaut 0 et s'adapte au contenu */
  border: 1px solid #CCC;
}

Nota : pas franchement conseillé des « url » de script du type <script src="C:/Ange Hala/fusioncharts-suite-xt/js/fusioncharts.js"> !

**Ange HALA** · 14/01/2019, 10h50

Merci pour votre réponse.

J'ai ajouté le code css mais le rendu est toujours pareil.
Aussi, concernant les "url" j'ai pas vraiment compris. Que me conseillez-vous?

Ange HALA

**NoSmoking** · 14/01/2019, 14h16

J'ai ajouté le code css mais le rendu est toujours pareil.

Aucune raison que cela ne fonctionne pas, problème de cache ???

Aussi, concernant les "url" j'ai pas vraiment compris. Que me conseillez-vous?

l'utilisation d'URL relatives à l'emplacement du fichier HTML par exemple en local.

**Ange HALA** · 14/01/2019, 14h52

Merci beaucoup NoSmoking

C'était effectivement le code css qui manquait. En fait, il ne passait pas parce que je n'avais pas respecté la hiérarchie dans mon code html.

Là il fonctionne parfaitement et j'ai mes graphiques.

Milles mercis

[FusionCharts] Graphique ne s'affiche pas sur toute la page

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager