d'affichage graphique

**drake56** · 18/01/2011, 17h47

Bonsoir à tous,

Donc en fait je dois faire des graphiques via Dojo et svg à la base, pour cela j'ai du code flash que je dois adapter, je connais aucune des deux technologies mais j'ai toruvé un exemple complet de Dojo que voici :

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
87
88
89
90
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <style type="text/css">
            #seriesInputs .dijitInputField, #seriesInputs .dijitInputField input {
                width: 30px;
            }
        </style>
        <script type="text/javascript">
            dojo.require("dojox.charting.Chart2D");
            dojo.require("dijit.form.NumberSpinner");
		</script>
 
        <script type="text/javascript">    
            var chart1;
 
            // The data to use.
            var seriesData = [1, 2, 2, 3, 4, 5, 5, 7];
 
            // This function creates the chart, and is really all you
            // need. All other code is to allow you to update it on the
            // fly.
            dojo.addOnLoad(function(){
                chart1 = new dojox.charting.Chart2D("simplechart");
                chart1.addPlot("default", {
                    type: "Pie",
                    fontColor: "white",
                    labelOffset: 40,
                    radius: 100
                });
                chart1.addSeries("Series 1", seriesData);
                changeColor("blue");
            });
 
            function changeColor(color){
                // Load the required color plot information
                dojo.require("dojox.charting.themes.PlotKit." + color);
                chart1.setTheme(dojox.charting.themes.PlotKit[color]);
                chart1.render();
            }
 
            //Create the inputs that allow you to update the chart
            //on the fly.
            function createInputs(){
                var div = dojo.byId("seriesInputs");
 
                var inputs = [];
                dojo.forEach(seriesData, function(item, index){
                    var input = new dijit.form.NumberSpinner({
                        value: item,
                        constraints: {
                            min: 0,
                            max: 100
                        }
                    });
                    inputs.push(input);
                    div.appendChild(input.domNode);
                    dojo.style(input.domNode, "width", "60px");
                    var updateFn = function(value){
                        seriesData[index] = value;
                        chart1.updateSeries("Series 1", seriesData);
                        chart1.render();
                    };
                    // Update the change when the values are changed.
                    dojo.connect(input, "setValue", updateFn);
                });
            }
 
            dojo.addOnLoad(createInputs);
        </script>
    </head>
    <body>
        Select a color: 
        <select onchange="changeColor(this.value);">
            <option value="blue" selected>Blue</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="cyan">Cyan</option>
            <option value="orange">Orange</option>
            <option value="purple">Purple</option>
        </select>
        <div id="seriesInputs">
            Choose Values: 
        </div>
        <div id="simplechart" style="width: 350px; height: 350px;">
        </div>
    </body>
</html>

Normalement je devrais avoir un graphique circulaire et un tableau modifiable avec des chiffres avec aussi la possibilité de changer de couleurs et mon navigateur affiche seulement la liste déroulante des couleurs ainsi que le texte "Chooses values :" comment cela fait-il ? Que faut-il que je fasse pour récupérer mon graphique ?

Un grand merci d'avance pour votre aide

**Daniel_Gibot** · 19/01/2011, 09h34

Bonjour,

Dojo Toolkit est un framework contenant bon nombre d'objets graphiques et de fonctions qui lui sont propres. Afin de pouvoir l'utiliser il est nécessaire de l'intégrer à la page sur laquelle vous souhaitez l'appliquer.
En d'autres termes, pour pouvoir utiliser dojo, il faut télécharger le pack de scripts lui permettant de fonctionner et ensuite l'insérer dans la page.
Par exemple :

Code :

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

1
2
 
<script type="text/javascript" src="../dojotoolkit-1.5.0/dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>

Sans cette commande, vous ne pourrez pas voir votre graphique ni utiliser tout le panel de fonctionnalités.
Il est important, également, de connaître la version de Dojo. Dernièrement le script a évolué avec la 1.5. Cela ne sera peut être pas fonctionnel avec une version antèrieure.

Bienvenu sur le forum de Dojo