HTML5 Sparkline Chart for Data-Intense Visualizations

Descritos como "gráficos intensos, simples e do tamanho de palavras", os Sparklines vão além de uma simples linha.

Damyan Petev Last Updated Feb 25, 2025 8min read

É uma versão simplificada e reduzida do seu gráfico normal que é excelente para análise rápida de muitos dados e detecção de tendências. Para os mais curiosos, o inventor do Sparkline hospeda um quadro de perguntas e respostas sobre a teoria e a prática do Sparkline, onde você pode encontrar alguns FAÇAs e CONTRAS gerais, bem como vários cenários em que as pessoas acharam os Sparklines úteis. Há também um blog muito rico visualmente sobre Minigráficos nos Blogs do Excel, se você quiser mais. O exemplo típico é "embutido com texto", no entanto, há vários casos em que seria útil como parte de uma grade. Pelo menos pelo que vi, aceito o termo como sinônimo de pequena visualização de qualquer tipo adequado – linhas e áreas, é claro, mas também colunas e barras, com/ou sem eixos, intervalos, marcadores, linhas de tendência. Não é a infinidade de interruptores e botões que o Data Chart possui, mas pode ser tão intensivo em dados, mantendo-o pequeno. Apenas como nota - esses gráficos ainda devem ser simples e, mesmo que você possa mostrar todas as informações extras em um, nem sempre é o melhor design!

The Ignite UI Sparkline

Depois que uma série de controles de visualização de dados apareceram em nosso produto Ignite UI– o poderoso gráfico de dados, depois o Pie, o mapa geográfico, traduzido de C# para jQuery, era lógico expandir mais. O Sparkline faz parte de outra onda de controles que seguem a rota do HTML5 Canvas, o que significa que não há plug-ins e está disponível na maioria dos dispositivos móveis. Este gráfico específico foi projetado para ser leve, portanto, não espere muito volume extra - séries únicas suportadas com 4 tipos de exibição e um único conjunto de eixos com quantidade limitada de rotulagem e assim por diante.

O padrão é série de linhas:

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

Linha com faixa normal e marcadores alto/baixo

Troque a linha por área e marcadores por outro eixo:

Série de colunas com uma linha de tendência:

and Win / Loss :

Ganho/Perda com eixo vertical e linha de tendência 'exponentialAverage' mostrando os mesmos dados que as colunas acima

Ambos os gráficos de barras usam os mesmos dados. A diferença entre eles é que Win-Loss está em uma escala booleana, o que significa que os pontos apresentados não correspondem aos seus valores - é ganho total, perda total ou neutro.

Existem alguns tipos de marcadores e 13 tipos diferentes de linhas de tendência e há um artigo de visão geral do igSparkline muito bom com recursos visuais para tudo, então você precisa verificar esse caso não tenha visto tudo o que esse controle tem a oferecer. Claro, como você notaria nos artigos vinculados, o Sparkline destina-se principalmente ao inline e os acima são um pouco maiores. Com alguns ajustes, você também pode fazê-los funcionar em linha:

Minigráficos com CSS ajustado (inline, borda removida e plano de fundo) e tamanho reduzido para mostrar ao lado do texto

É tudo em nome de ter uma visualização significativa para quantidades muito altas de dados espremidos em um espaço muito pequeno e tirar o máximo proveito disso. Então, sim, embutido com o texto é ótimo, assim como dentro das células da grade, onde esse gráfico pode fornecer a 'essência' de uma tabela totalmente diferente em uma única célula e ser mais fácil de ler também. Mais sobre isso em um blog de acompanhamento que tenho em breve!

Dicas e truques

Então, aqui vem uma variedade de coisas que você pode achar interessantes e úteis. Como, por exemplo, o fato de que valores e caminhos de membros são opcionais – a fonte de dados pode ser uma matriz simples de números e, em seguida, você não precisa especificar um caminho de valor. O caminho do rótulo só é necessário quando você está exibindo um eixo.

Embeleze seus dados: Guia de estilo

Mais um tópico interessante, pois ainda é um controle de Visualização de Dados e é destinado à Web. Então, espero que você tenha visto mais o Styling igDataChart com Temas e talvez para alguns outros controles e se você está se perguntando se o Sparkline pode fazer o mesmo ... Por que sim, sim, pode! E aqui vem uma boa lista de classes CSS que podem ser usadas para modificar a aparência desse controle.

Todas as classes são prefixadas com "ui-sparkline-" e indicam a que se aplicam - "sparkpath", "negativesparkpath", "trendline", "markers", "firstmarker", "lastmarker", "highmarker", "lowmarker", "negativemarkers", "range". Por exemplo, você tem o caminho da faísca, os marcadores alto e baixo:

Uma representação de como as classes CSS Sparkline são mapeadas para opções dos elementos visuais

A cor de fundo CSS junto com a opacidade CSS, se você fornecê-la, mapeia para a cor do pincel do elemento em questão. A largura da borda (e apenas a largura, independentemente deste exemplo mostrar uma declaração abreviada) corresponde ao tamanho do pincel. Acho que é visível o suficiente para ver que o marcador alto é maior que o baixo. Observe que quase tudo tem um valor mínimo de 1,5px e simplesmente ignorará valores mais baixos. Os valores estão disponíveis para todos os marcadores, linhas e intervalo:

/* "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
}

Em termos de colunas, o caminho também é obviamente aplicado como preenchimento. Para os eixos, você tem regras ligeiramente diferentes - a borda corresponde ao traço do eixo desta vez com a cor levada em consideração também, obviamente não há plano de fundo, no entanto, a fonte e a cor para os rótulos dos eixos são usadas:

/* "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;
}

Uma observação importante é que essas classes correspondem às opções de controle que você vê na API, no entanto, elas são levadas em consideração durante a inicialização. Portanto, é bom ter uma separação de preocupações entre visuais e funcionalidade. e deixar os designers escolherem cores melhores do que eu, por exemplo 🙂 No entanto, se você quiser modificar a aparência em tempo de execução, terá que usar as opções do jQuery.

Misc

Como você deve ter notado nos trechos, a largura do Minigráfico pode ser definida em porcentagens e, como os outros gráficos Ignite UI, possui um tratamento interno de redimensionamento. Isso significa que este gráfico é bom para o design responsivo e também funcionará bem dentro de elementos com tamanhos variados - que desempenharão um papel importante quando tentarmos o gráfico como uma célula de grade.

Além disso, como o cenário que faz mais sentido (independentemente dos dados ruins em minhas demonstrações) é para analisar tendências, o que significa continuidade e geralmente eixo com limite de tempo - e todos nós sabemos o inferno da saída de string padrão das datas JavaScript. De longe, não é apropriado para um gráfico tão pequeno, no entanto, você pode formatar os rótulos ao seu gosto com uma função simples. Ele usa o valor "would'veen-been" como parâmetro e deve retornar o novo valor de rótulo desejado. Lembre-se de que esse evento pode e provavelmente será acionado várias vezes e também será acionado para o outro eixo (se você tiver um visível) – nesse caso, sempre verifique se você está formatando o valor correto. E uma última coisa – os valores de data já são convertidos em uma string quando chegam até você, assim:

$("#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;
    }
    //...
});

Fechamento e Recursos

Eu realmente espero que as informações acima sejam úteis. Há um link para demonstrações abaixo com diferentes tipos de visuais do Minigráfico, exemplos de configuração embutida, inicializações, manipulação de eventos de dica de ferramenta e estilo. Tenho mais um post sobre essas informações em breve, então fique de olho nisso também.

A teoria e a prática do Sparkline são uma leitura obrigatória para todos os interessados no uso adequado e na busca de ideias
Sparklines in the Excel Blogs has some more good scenarios
A documentação no minigráfico Ignite UI tem referência visual para todos os elementos deste gráfico
Veja isso em ação em nossas amostras
A demonstração ASP.NET MVC com definições mistas de MVC helper / jQuery
JSFiddle para visualização rápida mostrando a maioria das coisas descritas acima
Adquira o seu:

Eu adoraria ouvir alguns pensamentos, então deixe um comentário abaixo ou @DamyanPetev.

E como sempre, você pode nos seguir no Twitter@ Infragisticse manter contato noFacebook,Google+eLinkedIn!

Como