2009-03-28 6 views
0

J'ai une page Web HTML avec des codes JS côté client basés sur dojox.charting. Je n'ai pas de bibliothèque dojo sur mon site web local (en fait, pas de serveur web). J'utilise xDomain la fonction de référence de dojos avec src sur le site d'hébergement de Google comme ceci:Problèmes avec dojox.charting et référence xDomain à la bibliothèque dojo/dojox

<head> 
... 
<script type="text/javascript" 
    djConfig1="isDebug:true"   
    src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js"> 
</script> 
<script type="text/javascript" 
    dojo.require("dojox.gfx"); 
    dojo.require("dojox.gfx.move"); 
    dojo.require("dojo.html"); 

    dojo.require("dojox.charting.Chart2D"); 
    dojo.require("dojox.charting.themes.PlotKit.green"); 

    dojo.require("dojox.charting.action2d.Highlight"); 
    dojo.require("dojox.charting.action2d.Magnify"); 
    dojo.require("dojox.charting.action2d.MoveSlice"); 
    dojo.require("dojox.charting.action2d.Shake"); 
    dojo.require("dojox.charting.action2d.Tooltip"); 
    dojo.require("dojox.charting.themes.MiamiNice"); 

    dojo.require("dojox.charting.widget.Legend"); 
</script> 
.... 
</head> 

Voici la fonction pour créer diagramme de courbe, sur la base des codes à Dojo: Now With Drawing Tools.

function drawCurve(nodeChart, nodeLegend) { 
    var chart1 = new dc.Chart2D(nodeChart) 
    .setTheme(dc.themes.PlotKit.green) 
    .addPlot("default", { 
     type: "Default", 
     lines: true, 
     markers: true, 
     tension: 2 
    }) 
    .addAxis("x", { 
     min: 0, 
     max: 6, 
     majorTick: { stroke: "black", length: 3 }, 
     minorTick: { stroke: "gray", length: 3 } 
    }) 
    .addAxis("y", { 
     vertical: true, 
     min: 0, 
     max: 10, 
     fixLower: "major", 
     fixUpper: "major", 
     majorTick: { stroke: "black", length: 3 }, 
     minorTick: { stroke: "gray", length: 3 } 
    }) 
    .addSeries("Series A", [ 
     { x: 0.5, y: 5 }, 
     { x: 1.5, y: 1.5 }, 
     { x: 2, y: 9 }, 
     { x: 5, y: 0.3 } 
    ]) 
    .addSeries("Series B", [ 
     { x: 0.3, y: 8 }, 
     { x: 4, y: 6, tooltip: "Custom tooltip"}, 
     { x: 5.5, y: 2 } 
    ]); 
    var series = chart1.series; 

    var anim_a = new dc.action2d.Tooltip(chart1, "default"); 
    var anim_c = new dc.action2d.Magnify(chart1, "default"); // not working 
    chart1.render(); 

    var legendChart = new dc.widget.Legend(
    {chart: chart1, horizontal: false}, nodeLegend.id); 
} 

Ma première question est que pour le graphique de la courbe, le nombre le long de l'axe y affiche seulement 0 et 10. Tous les chiffres du milieu 1 à 9 ne sont pas affichés. Les valeurs pour l'axe x de 1 à 6 sont visibles. L'instantané de graphique original dans l'article affiche également les valeurs de l'axe y, mais celle sur DojoToolKit Demos affiche des valeurs le long de l'axe y. Je ne suis pas sûr de ce que j'ai manqué dans mes codes. Comment puis-je activer l'affichage des valeurs de l'axe y?

La question suivante concerne le Magnify(). Le diagramme de courbe du site de démonstration DojoToolKit fonctionne correctement, mais la fonction d'agrandissement de mon graphique ne fonctionne pas. Je pense que cela peut être causé par la référence xDomain. Il se peut que je doive spécifier un fichier js spécifié dans la bibliothèque dojox de xDomain. Je ne suis pas sûr de savoir lequel je dois spécifier.

Une chose que je remarque que mes KPL affiche erreurs suivantes après diagramme de courbe est tracée:

_4.fx.combine is not a function http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojox/charting/action2d/Magnify.xd.js Line 8 
_11.action is undefined http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojox/charting/action2d/Magnify.xd.js Line 8 

Je pense que ces erreurs non définies peuvent indiquer me manque le chargement des fichiers de bibliothèque dojox dans ma section de tête. A propos, je n'ai pas de serveur web et je préfère utiliser l'option de référence xDomain de dojo. De cette façon, je peux éditer un fichier html n'importe où et l'envoyer à d'autres personnes. Pas besoin de télécharger et d'installer la bibliothèque source dojo.

Répondre

0

En ce qui concerne les valeurs de l'axe des y, je trouve aussi moyen facile de les afficher (0 à 9):

.addAxis("y", { 
    vertical: true, 
    //min: 0 
    //max: 10 
.... 

Vous pouvez également commenter min seulement et laisser max avec 10 (0, 1,. .. à 10).Voir DojoCampus.org pour plus d'informations sur les paramètres de l'axe.

0

Je pense que je suis la partie manquante:

dojo.require("dojo.fx"); 

Quand j'ai ajouté cette ligne à la tête de mon code HTML setction voir ci-dessus, la partie de l'animation définie par Mangify() fonctionne. C'est uniquement dans le cas où vous définissez la référence xDomain à dojox pour la bibliothèque dojox.charting.

Ce que j'ai trouvé c'est en utilisant Firebug pour regarder DojoToolKit's Event 2D web page. Dans la section head, il y a le code:

<script src="http://../action2/Magnify.js" type="text/javascript"></script> 

Cette page a le débogage activé. Par conséquent, dans la fenêtre FireBug, vous verrez les codes sources de js dans une belle présentation. J'ai vu trois conditions, et une est pour "dojo.fx". J'ai essayé d'ajouter celui-ci. Puis plus d'erreurs et je peux voir l'animation de l'effet de grossissement lorsque je déplace la souris sur des points dans la courbe du graphique. Une chose intéressante à propos du script < src = ".." > est que si le js est xDomain référencé, les codes source js sont affichés partiellement dans un long temps. Si vous avez la bibliothèque dojo installée sur votre page web, c'est-à-dire le même domaine, les codes source du dojo sont bien affichés.

Questions connexes