Question

J'essaie difficile d'obtenir des graphiques fonctionnels avec ... dojo

Je veux créer un graphique en aires empilées avec 3 lignes. Pour les "bas", "moy" et "haut" comme vous le voyez dans les données JSON.

    var jStore = {"identifier":"mois",
                "items":[{"mois":1,  "bas":98,   "moy":122.5,   "haut":147},
                         {"mois":2,  "bas":91,   "moy":113.75,  "haut":136.5},
                         {"mois":3,  "bas":91,   "moy":113.75,  "haut":136.5},
                         {"mois":4,  "bas":84,   "moy":105,     "haut":126},
                         {"mois":5,  "bas":77,   "moy":96.25,   "haut":115.5},
                         {"mois":6,  "bas":63,   "moy":78.75,   "haut":94.5},
                         {"mois":7,  "bas":49,   "moy":61.25,   "haut":73.5},
                         {"mois":8,  "bas":42,   "moy":52.5,    "haut":63},
                         {"mois":9,  "bas":49,   "moy":61.25,   "haut":73.5},
                         {"mois":10, "bas":70,   "moy":87.5,    "haut":105},
                         {"mois":11, "bas":77,   "moy":96.25,   "haut":115.5},
                         {"mois":12, "bas":84,   "moy":105,     "haut":126}]
             };

Je veux mettre int l'axe x les mois comme indiqué dans le code. Appelez les données spécifiques dans le JSON pour créer toutes les lignes.

dojo.addOnLoad(function() {
                var chart1 = new dojox.charting.Chart2D('chart1');
                chart1.addPlot('default', {
                        type: 'StackedAreas',
                        markers: true,
                        tension: 'S',
                        lines: true,
                        areas: true,
                        labelOffset: -30,
                        shadows: {
                            dx:2, dy:2, dw:2
                        }
                     });
                chart1.addAxis('x', {max:12, 
                   labels:[
                      {value: 0, text: ""},
                      {value: 1, text: "Jan"},
                      {value: 2, text: "Feb"},
                      {value: 3, text: "Mar"},
                      {value: 4, text: "Apr"},
                      {value: 5, text: "May"},
                      {value: 6, text: "Jun"},
                      {value: 7, text: "Jul"},
                      {value: 8, text: "Aug"},
                      {value: 9, text: "Sept"},
                      {value: 10, text: "Oct"},
                      {value: 11, text: "Nov"},
                      {value: 12, text: "Dec"}
               ]});
                chart1.addAxis('y', { vertical: true, max:200, includeZero: true });
                chart1.addSeries('Basse', (jStore, {query: {bas: "*"}}, "bas"),{ stroke: 'red', fill: 'pink' });
                chart1.addSeries('Moyenne',(jStore, {query: {moy: "*"}}, "moy"), { stroke: 'green', fill: 'lightgreen' });
                chart1.addSeries('Haute',(jStore, {query: {haut: "*"}}, "haut"), { stroke: 'blue', fill: 'lightblue' });
                chart1.render();
                var anim1a = new dojox.charting.action2d.Magnify(chart1, "default");
                var anim1b = new dojox.charting.action2d.Tooltip(chart1, "default");
                var legend1 = new dojox.charting.widget.Legend({
                    chart:chart1
                },"legend1");
                chart1.render();
            });

Il ne fonctionne pas, je ne sais pas wath je dois mettre à la place de (jStore, {query: {haut: "*"}}, "haut") appeler mes données spécifiques.

S'il vous plaît aider! Thanx beaucoup.

Était-ce utile?

La solution

De la documentation officielle En utilisant dojo.data Sources de données avec des graphiques :

  

dojox.charting.DataSeries est utilisé pour se connecter à dojo.data magasins. L'utilisateur doit créer et transmettre au lieu d'un tableau de données dans chart.addSeries () appel.

Exemple d'utilisation se trouve dans dojox/charting/tests/test_DataSeries.html.

Une autre pièce manquante dans votre exemple est un objet magasin. D'une certaine façon, vous essayez de passer une structure JSON autour, qui dispose de données, mais pas de méthodes nécessaires. Vous devez créer un magasin de données d'abord de vos données. Je ne sais pas ce magasin de données que vous souhaitez utiliser, mais si vous voulez simplement montrer votre structure de données, vous pouvez utiliser dojo.data.ItemFileReadStore:

dojo.require("dojo.data.ItemFileReadStore");

var jStore = ...; // not really a store, but your JSON-like object
var realStore = new dojo.data.ItemFileReadStore({data: jStore});
...
chart1.addSeries(
  'Basse',
  new dojox.charting.DataSeries(realStore, {query: {bas: "*"}}, "bas"),
  {stroke: 'red', fill: 'pink'}
);

lien ci-dessus pour utilisation en apprendre davantage sur dojox.charting.DataSeries. Pour tout savoir sur dojo.data dans la documentation officielle: http://docs.dojocampus.org/dojo/data

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top