javascript - lineas - Marcadores/información sobre herramientas personalizadas en un gráfico de líneas Dojo

grafico de lineas en excel

Question

Estoy usando Dojo 1.8 para crear un gráfico de líneas que estoy usando para trazar datos de series de tiempo. Los datos constan de muestras tomadas cada 5 minutos durante un período de 24 horas que dan hasta 288 (12x24) puntos de datos.

Para tener información sobre herramientas en el gráfico, necesito habilitar marcadores en el gráfico (Dojo lo requiere). El problema es que, de forma predeterminada, Dojo crea un marcador para cada punto de datos y esto da como resultado demasiados marcadores. Idealmente, mostraría un solo marcador para el último punto de datos y tal vez marcadores cada hora o dos.

Es posible personalizar la apariencia de un marcador, pero hasta ahora no he podido encontrar ninguna forma de personalizar la frecuencia con la que aparecen los marcadores. Cualquier sugerencia sería muy bienvenida.

Answer 1

Estaba pasando un momento difícil con la documentación y lo descubrí. Aquí hay un jsFiddle con un ejemplo de trabajo. Usé la solución de Andy W y trabajé con lo que pude encontrar en DojoToolkit.org para personalizar los marcadores.

Primero necesita crear un diagrama de MarkersOnly como explica Andy, luego puede personalizar los marcadores. Puedes encontrar todas las piezas en esta documentación .

//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();

Uno de mis compañeros de trabajo me mostró cómo personalizar el camino SVG (crea tu propio patrón). Solo ve aquí para más información.

Answer 2

Intenta usar el módulo 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();
  });
});