HTML5 Sparkline Chart for Data-Intense Visualizations

Es una versión reducida y simplificada de su gráfico normal que es excelente para el análisis rápido de una gran cantidad de datos y la detección de tendencias. Para los más curiosos, el inventor del Sparkline organiza un foro de preguntas y respuestas sobre la teoría y la práctica del Sparkline donde se pueden encontrar algunos consejos generales sobre lo que se debe y no se debe hacer, así como varios escenarios en los que la gente encontró útiles los Sparklines. También hay un blog muy rico visualmente sobre Sparklines en los blogs de Excel si quieres más. El ejemplo típico es "en línea con el texto", sin embargo, hay varios casos en los que sería útil como parte de una cuadrícula. Al menos por lo que he visto, acepto el término como sinónimo de pequeña visualización de cualquier tipo adecuado: líneas y áreas, por supuesto, pero también columnas y barras, con / o sin ejes, rangos, marcadores, líneas de tendencia. No es la plétora de interruptores y perillas que tiene la Gráfico de datos, pero puede ser igual de intensivo en datos mientras se mantiene pequeño. Solo como nota: estos gráficos están destinados a ser simples e incluso si puede mostrar cada bit de información adicional en uno, ¡es posible que no siempre sea el mejor diseño!

The Ignite UI Sparkline

Después de que una serie de controles de visualización de datos hicieran su aparición en nuestro producto Ignite UI, el poderoso Gráfico de datos, luego Pie, el mapa geográfico, traducido de C# a jQuery, era lógico expandirse más. El Sparkline es parte de otra ola de controles que toman la ruta de HTML5 Canvas, lo que significa que no hay complementos y está disponible en la mayoría de los dispositivos móviles. Este gráfico específico está diseñado para ser liviano, así que no espere demasiado volumen adicional: una sola serie compatible con 4 tipos de visualización y un solo conjunto de ejes con una cantidad limitada de etiquetado, etc.

El valor predeterminado es serie de líneas:

$("#Spark0").igSparkline({
    displayType: "line",
    dataSource: employees,
    valueMemberPath: "SickLeaveHours",
    height: "50px",
    width: "50%",
    normalRangeMaximum: 49,
    normalRangeMinimum: 45,
    normalRangeVisibility: "visible",
    verticalAxisVisibility: "visible",
    highMarkerVisibility: "visible",
    lowMarkerVisibility: "visible"
});

Cambia la línea por área y los marcadores por otro eje:

Serie de columnas con una línea de tendencia:

and Win / Loss :

Ambos gráficos de barras utilizan los mismos datos. La diferencia entre es que Ganar-Perder está en una escala booleana, lo que significa que los puntos presentados no coinciden con sus valores: es ganancia total, pérdida total o neutral.

Hay algunos tipos de marcadores y 13 tipos diferentes de líneas de tendencia y hay un artículo muy agradable de descripción general de igSparkline con imágenes para todo, por lo que es totalmente necesario que lo compruebes en caso de que no hayas visto todo lo que este control tiene para ofrecer. Por supuesto, como notarás en los artículos vinculados, el Sparkline está destinado principalmente a inline y los de arriba son algo más grandes. Con algunos ajustes, también puede hacer que funcionen en línea:

Todo en nombre de tener una visualización significativa para cantidades muy altas de datos aplastados en un espacio muy pequeño y aprovechar al máximo eso. Por lo tanto, sí, en línea con el texto es excelente, al igual que las celdas internas de la cuadrícula, donde un gráfico de este tipo puede proporcionar la "esencia" de una tabla completa en una sola celda y también ser más fácil de leer. ¡Más sobre eso en un blog de seguimiento que tendré muy pronto!

Consejos y trucos

Así que aquí viene una variedad de cosas que pueden resultarle interesantes y útiles. Por ejemplo, el hecho de que los valores y las rutas de acceso de los miembros sean opcionales: el origen de datos puede ser una simple matriz de números y, por lo tanto, no es necesario especificar una ruta de acceso de valor. La ruta de la etiqueta solo es necesaria cuando se muestra un eje.

Embellece tus datos: Guía de estilo

Otro tema interesante, ya que sigue siendo un control de visualización de datos y está destinado a la Web. Así que espero que hayas visto más el estilo igDataChart con temas y tal vez para algunos otros controles y si te preguntas si el Sparkline puede hacer lo mismo ... ¡Por qué sí, sí se puede! Y aquí viene una buena lista de clases CSS que se pueden usar para modificar el aspecto de este control.

Todas las clases tienen el prefijo "ui-sparkline-" e indican a qué se aplican: "sparkpath", "negativesparkpath", "trendline", "markers", "firstmarker", "lastmarker", "highmarker", "lowmarker", "negativemarkers", "range". Por ejemplo, tiene la ruta de la chispa, los marcadores alto y bajo:

El color de fondo CSS junto con la opacidad CSS, si lo proporciona, se asigna al color del pincel del elemento en cuestión. La anchura del borde (y sólo la anchura, independientemente de que en este ejemplo se muestre una declaración abreviada) corresponde al tamaño del pincel. Creo que es lo suficientemente visible como para ver que el marcador alto es más grande que el bajo. Tenga en cuenta que casi todo tiene un valor mínimo de 1.5px y simplemente ignorará los valores más bajos. Hay valores disponibles para todos los marcadores, líneas y rangos:

/* "background-color", "opacity", "border-width" apply */
.ui-sparkline-sparkpath {
    background:#00AADE;
    border:1.5px solid
}
.ui-sparkline-negativesparkpath {
    background:#D0284C;
    border:1px solid
}
.ui-sparkline-trendline {
    background:#555;
    border:2px solid
}
.ui-sparkline-markers {
    background:#36C0F3;
    border:3px solid
}
.ui-sparkline-firstmarker {
    background:#19994F;
    border:5px solid
}
.ui-sparkline-lastmarker {
    background:#FCB025;
    border:5px solid
}
.ui-sparkline-highmarker {
    background:#BFE107;
    border:4px solid
}
.ui-sparkline-lowmarker {
    background:#AF39FF;
    border:3px solid
}
.ui-sparkline-negativemarkers {
    background:#E5516F;
    border:3px solid
}
.ui-sparkline-range {
    background:gray;
    opacity:.2
}

En cuanto a las columnas, la ruta también se aplica obviamente como relleno. Para los ejes, tiene reglas ligeramente diferentes: el borde corresponde al trazo del eje, esta vez también se tiene en cuenta el color, obviamente no hay fondo, sin embargo, se usan la fuente y el color para las etiquetas de los ejes:

/* "border-width", "border-color", "color", "font" apply */
.ui-sparkline-axis-x {
    font-family:"Segoe UI", Arial, sans-serif;
    border:2px solid #989EA3;
    color:#4B4B4D
}
.ui-sparkline-axis-y {
    font-family:"Segoe UI", Arial, sans-serif;
    border:2px solid #989EA3;
    color:#4B4B4D;
}

Una nota importante es que esas clases corresponden a las opciones de control que se ven en la API, sin embargo, se tienen en cuenta durante la inicialización. Por lo tanto, es bueno tener una separación de preocupaciones entre lo visual y la funcionalidad. y dejar que los diseñadores elijan mejores colores que yo, por ejemplo 🙂. Sin embargo, si desea modificar el aspecto en tiempo de ejecución, tendrá que usar las opciones de jQuery.

Varios

Como habrás notado en los fragmentos, el ancho del minigráfico se puede establecer en porcentajes y, al igual que los otros gráficos de Ignite UI, tiene un manejo incorporado de cambio de tamaño. Eso significa que este gráfico es bueno para el diseño receptivo y también funcionará bien en el interior que contiene elementos de diferentes tamaños, lo que jugará un papel importante cuando probemos el gráfico como una celda de cuadrícula.

Además, dado que el escenario que tiene más sentido (independientemente de los malos datos en mis demostraciones) es para analizar tendencias, lo que significa continuidad y, por lo general, un eje con límite de tiempo, y todos conocemos el infierno de la salida de cadena predeterminada de las fechas de JavaScript. No es ni mucho menos apropiado para un gráfico tan pequeño, sin embargo, puede formatear las etiquetas a su gusto con una función simple. Toma el valor "would've-been" como parámetro y, en su lugar, debe devolver el nuevo valor de etiqueta deseado. Tenga en cuenta que este evento puede y probablemente se activará varias veces y también se activará para el otro eje (si tiene uno visible), en cuyo caso, compruebe siempre si está formateando el valor correcto. Y una última cosa: los valores de fecha ya se convierten en una cadena cuando le llegan, por lo tanto:

$("#Spark1").igSparkline({
    labelMemberPath: "HireDate",
    verticalAxisVisibility: "visible",
    horizontalAxisVisibility: "visible",
    formatLabel : function formatFunction(val) {
        if (typeof val === "string") {
            // remove time from the label
            val = val.split("T")[0];
        }
        return val;
    }
    //...
});

Cierre y recursos

Realmente espero que la información anterior sea útil. A continuación, hay un enlace a las demostraciones con diferentes tipos de elementos visuales de minigráfico, ejemplos de configuración en línea, inicializaciones, control de eventos de información sobre herramientas y estilo. Tengo una publicación más basada en esta información que pronto se publicará, así que estén atentos a esa también.

• La teoría y la práctica de Sparkline es una lectura obligada para todos los interesados en el uso adecuado y en la búsqueda de ideas
• Sparklines in the Excel Blogs has some more good scenarios
• La documentación sobre el Ignite UI minigráfico tiene una referencia visual para todos los elementos de este gráfico
• ​Véalo en acción en nuestras muestras
• La demostración ASP.NET MVC con definiciones mixtas de MVC helper / jQuery
• JSFiddle para una visualización rápida que muestra la mayoría de las cosas descritas anteriormente
• Consigue el tuyo:
  

  

Me encantaría escuchar algunas ideas, así que deja un comentario a continuación o @DamyanPetev.

Y como siempre, puedes seguirnos en Twitter@ Infragisticsy mantenerte en contacto enFacebook,Google+yLinkedIn.