Marqueurs/info-bulles personnalisés sur un graphique à courbes Dojo

Question

J'utilise Dojo 1.8 pour créer un graphique en courbes que j'utilise pour tracer des données de séries chronologiques. Les données sont constituées d'échantillons prélevés toutes les 5 minutes sur une période de 24 heures donnant jusqu'à 288 points de données (12x24).

Afin d'avoir des info-bulles sur le graphique, j'ai besoin d'activer les marqueurs sur le graphique (le Dojo l'exige). Le problème est que, par défaut, dojo crée un marqueur pour chaque point de données, ce qui entraîne un trop grand nombre de marqueurs. Idéalement, je montrerais un seul marqueur pour le dernier point de données et peut-être des marqueurs toutes les heures ou deux.

Il est possible de personnaliser l'apparence d'un marqueur mais jusqu'à présent, je n'ai pas réussi à trouver un moyen de personnaliser la fréquence d'apparition des marqueurs. Toute suggestion serait la bienvenue.

Answer 1

Essayez d'utiliser le module MarkersOnly:

require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Lines", "dojox/charting/plot2d/MarkersOnly", "dojox/charting/Series", "dojo/ready"], 
function(Chart, Default, Lines, MarkersOnly, Series, ready) { 
    ready(function(){ 
    var chart = new Chart("simplechart"); 
     chart.addPlot("plot_lines", { type: Lines }); 
     chart.addPlot("plot_markers", { type: MarkersOnly }); 
     chart.addAxis("x"); 
     chart.addAxis("y", {vertical:true}); 
     chart.addSeries("series_lines", [4, 2, 6, 4, 5, 8, 8, 1, 7, 9]); 
     // if you want your markers at data points 6 and 7; 
     chart.addSeries("series_markers", [{x:3,y:6}, {x:9,y:7}], { plot: "plot_markers" , stroke: { color: "blue" } }); 
     chart.render(); 
    }); 
}); 

Answer 2

J'ai été vraiment un moment difficile avec la documentation et je viens tout compris. Here is a jsFiddle avec un exemple de travail. J'ai utilisé la solution d'Andy W et j'ai travaillé avec ce que j'ai pu trouver sur DojoToolkit.org pour personnaliser les marqueurs.

D'abord vous devez créer un tracé MarkersOnly comme Andy explique, puis vous pouvez personnaliser les marqueurs. Vous pouvez trouver toutes les pièces on this documentation.

//found on http://dojotoolkit.org/reference-guide/1.8/dojox/charting.html 
//CIRCLE:   "m-3,0 c0,-4 6,-4 6,0 m-6,0 c0,4 6,4 6,0", 
//SQUARE:   "m-3,-3 l0,6 6,0 0,-6 z", 
//DIAMOND:   "m0,-3 l3,3 -3,3 -3,-3 z", 
//CROSS:   "m0,-3 l0,6 m-3,-3 l6,0", 
//X:    "m-3,-3 l6,6 m0,-6 l-6,6", 
//TRIANGLE:   "m-3,3 l3,-6 3,6 z", 
//TRIANGLE_INVERTED:"m-3,-3 l3,6 3,-6 z" 

var customTheme = new SimpleTheme({ 
    markers: { 
        DIAMOND: "m0,-3 l3,3 -3,3 -3,-3 z", 
        CROSS: "m0,-3 l0,6 m-3,-3 l6,0" 
       } 
      }); 

var chart = new Chart("chartCustomMarkers", 
    { 
      title: "Custom Markers Chart", 
      titlePos: "top", 
      titleFont: "normal normal normal 15pt Arial", 
    }); 
chart.addPlot("default", { type: MarkersOnly }) 
    .addAxis("x") 
    .addAxis("y", { vertical: true }) 
    .addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]) 
    .addSeries("Series 2", [2, 5, 4, 8, 5, 6, 6, 1]) 
    .setTheme(customTheme) 
    .render(); 

Un de mes collègues m'a montré comment personnaliser le chemin SVG (créer votre propre modèle). Juste go here pour plus d'informations.