[Echarts 3] Lecture de données json

**Julien0134** · 27/02/2018, 11h24

Bonjour,

Je vais bientôt entrer en stage et lors de ce stage j'aurai a utiliser la librairie echarts3 que je ne connais pas du tout. J'essaie donc de m'y prendre un peu a l'avance pour me familiariser avec celle-ci.

Cela-dit je bloque totalement sur ce que j'essaie de faire actuellement.

Lors de ma formation, j'ai déjà eu créer une base de données et à utiliser la librairie D3.js pour en sortir un simple histogramme représentant des données de cette base. (en passant par un encodage du resultat de la requete en json)

J'essaie maintenant de refaire la même chose avec echarts mais ça ne marche pas, et après avoir écumé le web je ne trouve pas vraiment d'aide sur mon problème.

Je suis parti un peu de cet exemple la : https://codepen.io/WebCodePro/pen/xdGrye/ qui semblait utiliser aussi du json avec echarts et voici mon code :

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
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
74
75
76
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Commandes par pays avec echarts3</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="echarts.min.js"></script>
    </head>
    <body>
        <div id="main"></div>
        <style>body {
                background-color: #fff;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 16px;
                color: #000;
            }
 
            a:link, a:visited {
                color: #4682b4;
            }
 
            a:hover {
                color: #4169e1;
            }
 
            #main   {
                width: 1000px;
                height: 700px;
            }</style>
        <script>
            var chart = echarts.init(document.getElementById('main'));
 
            chart.showLoading();
 
            $.getJSON('montantcommande.php', function (montantpays) {
                chart.hideLoading();
 
                option = {
                    title: {
                        text: 'Montant commandes par Pays'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                show: true
                            }
                        }
                    },
                    legend: {
                        data: ['total']
                    },
                    xAxis: {
                        data: montantpays.pays
                    },
                    yAxis: {},
                    series: [{
                            name: 'total',
                            type: 'bar',
                            data: montantpays.total
                        }]
                };
 
                chart.setOption(option);
 
            });
        </script>
    </body>
</html>

et le json que renvoie mon fichier "montantcommande.php" :
1

Code :

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

[{"pays":"Austria","total":"1227"},{"pays":"Ireland","total":"1103"},{"pays":"Denmark","total":"849"},{"pays":"Canada","total":"842"},{"pays":"USA","total":"798"},{"pays":"Germany","total":"792"},{"pays":"Belgium","total":"685"},{"pays":"Switzerland","total":"664"},{"pays":"Sweden","total":"639"},{"pays":"Brazil","total":"622"},{"pays":"Venezuela","total":"564"},{"pays":"France","total":"515"},{"pays":"Portugal","total":"490"},{"pays":"UK","total":"481"},{"pays":"Finland","total":"393"},{"pays":"Spain","total":"376"},{"pays":"Norway","total":"375"},{"pays":"Mexico","total":"350"},{"pays":"Italy","total":"337"},{"pays":"Argentina","total":"233"},{"pays":"Poland","total":"228"}]

Le problème semble vraiment venir de la lecture du json, puisque si je remplace les "montantpays" par des données tout marche correctement. Il y a peu être un soucis au niveau du jquery (j'avoue que je ne maitrise pas du tout ce coté x( )

Merci d'avance pour votre aide

**NoSmoking** · 27/02/2018, 11h50

Bonjour,
pas regardé plus avant mais visiblement tu récupères un tableau d'objets, donc tu ne peux pas écrire directement montantpays.pays, il te faut accéder aux données en écrivant montantpays[0].pays.

**Julien0134** · 27/02/2018, 13h35

Effectivement, merci =)
Maintenant quand je fait un console.log(montantpays[0].pays) j'ai bien le premier pays qui s'affiche, par contre si je met ça dans les paramétres du graphique (pour xAxis et Series) j'ai une erreur "invalid data"

**NoSmoking** · 27/02/2018, 15h48

Visiblement tes données sont mal structurées.

Quand on regarde l'exemple que tu as mis les données sont présentées comme un objet dont les valeurs sont des tableaux.

Dans ce que tu nous montres on à un tableau qui contient des objets, c'est l'inverse que tu devrais donc avoir.

• Ce que tu as :

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
74
75
76
77
78
79
80
81
82
83
84
85
86
var data = [
  {
    "pays": "Austria",
    "total": "1227"
  },
  {
    "pays": "Ireland",
    "total": "1103"
  },
  {
    "pays": "Denmark",
    "total": "849"
  },
  {
    "pays": "Canada",
    "total": "842"
  },
  {
    "pays": "USA",
    "total": "798"
  },
  {
    "pays": "Germany",
    "total": "792"
  },
  {
    "pays": "Belgium",
    "total": "685"
  },
  {
    "pays": "Switzerland",
    "total": "664"
  },
  {
    "pays": "Sweden",
    "total": "639"
  },
  {
    "pays": "Brazil",
    "total": "622"
  },
  {
    "pays": "Venezuela",
    "total": "564"
  },
  {
    "pays": "France",
    "total": "515"
  },
  {
    "pays": "Portugal",
    "total": "490"
  },
  {
    "pays": "UK",
    "total": "481"
  },
  {
    "pays": "Finland",
    "total": "393"
  },
  {
    "pays": "Spain",
    "total": "376"
  },
  {
    "pays": "Norway",
    "total": "375"
  },
  {
    "pays": "Mexico",
    "total": "350"
  },
  {
    "pays": "Italy",
    "total": "337"
  },
  {
    "pays": "Argentina",
    "total": "233"
  },
  {
    "pays": "Poland",
    "total": "228"
  }
];

• Ce que tu devrais avoir :

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
var data = {
  "pays": [
    "Austria",
    "Ireland",
    "Denmark",
    "Canada",
    "USA",
    "Germany",
    "Belgium",
    "Switzerland",
    "Sweden",
    "Brazil",
    "Venezuela",
    "France",
    "Portugal",
    "UK",
    "Finland",
    "Spain",
    "Norway",
    "Mexico",
    "Italy",
    "Argentina",
    "Poland"
  ],
  "total": [
    "1227",
    "1103",
    "849",
    "842",
    "798",
    "792",
    "685",
    "664",
    "639",
    "622",
    "564",
    "515",
    "490",
    "481",
    "393",
    "376",
    "375",
    "350",
    "337",
    "233",
    "228"
  ]
};

Il te faut donc opérer une conversion. Le plus simple est de modifier la structure côté serveur sinon tu peux le faire dans ta fonction avant utilisation avec par exemple une routine dans le style de

Code :

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

1
2
3
4
5
6
7
8
9
var obj = {};
data.forEach(function (elem) {
  Object.keys(elem).forEach(function (key) {
    if (!obj[key]) {
      obj[key] = [];
    }
    obj[key].push(elem[key]);
  })
});

Il te suffit ensuite d'utiliser obj.pays et obj.total pour tes données.

Le mieux restant la réalisation de la bonne structure côté serveur.

Cela devrait ne pas être loin de la vérité !

[Echarts 3] Lecture de données json

JavaScript

Discussions similaires

Partager

Partager