Criando seu primeiro gráfico JavaScript interativo

b) Depois disso, vamos incluir nossos dados:

var data = [{x: 'DVD player', y: 19},{x: 'Home theater system', y: 24},{x: 'Karaoke player', y: 30},{x: 'Projector', y: 34},{x: 'TV receiver', y: 42}];

c) Em seguida, especificamos que tipo de gráfico queremos chamando a função construtora relevante:

    var chart = anychart.bar();

d) Para tornar as coisas mais claras para os espectadores, quero dar um título ao gráfico:

    chart.title('Product Sales');

e) Agora, vamos criar uma série:

    chart.addSeries(data);// or we can specify a simple dataset within the method:chart.addSeries([19, 24, 30, 34, 42]);

f) Nosso gráfico deve ser colocado em um container, então estamos especificando o que acabamos de criar:

    chart.container('container');

g) Tudo parece bem, então podemos desenhar nosso gráfico agora:

    chart.draw();

Aqui está o resultado:

O seguinte é todo o código para sua conveniência:

Parece bem simples, não é? E agora podemos comparar convenientemente o total de vendas por categoria.

Criando Gráficos de Barras Múltiplas e Empilhadas

Agora que aprendemos as noções básicas de criação de gráficos com JavaScript, podemos continuar a criar um gráfico um pouco mais complexo, que exibe mais informações. Como afirmei anteriormente, mostrarei a você uma maneira fácil de criar um gráfico de barras multi-série e depois um gráfico empilhado.

Basicamente, os procedimentos são bastante semelhantes. Como sempre, tudo começa com dados.

Dados de uma tabela

No contexto do gráfico de barras acima, tivemos uma variável (a série de dados de vendas do produto) e várias categorias (tipos de produto). Para exibir adicionalmente a composição de cada valor, que é a essência dos gráficos de barras empilhados, precisamos de dados mais detalhados.

Para isso, podemos usar dados já exibidos na página. Por exemplo, se você já tiver uma tabela HTML, poderá criar facilmente um gráfico com base nela. Se você usar o AnyChart's Módulo adaptador de dados Tudo que você precisa é especificar essa tabela como a fonte de dados.

1) Obtenha o adaptador de dados:

2) Prepare os dados da tabela:

    var tableData = anychart.data.parseHtmlTable('#tableWithData');

3) Crie um gráfico e especifique a fonte de dados:

    var chart = anychart.bar();chart.data(tableData);

O resultado imediato é um gráfico de barras multi-série que nos permite, por exemplo, comparar rapidamente o desempenho de cada produto dentro de cada categoria.

Mudando o tipo de série

Todos os detalhes necessários, incluindo dados, já estão especificados. Agora podemos alterar o tipo de série e obter um gráfico de barras empilhadas a partir daquele gráfico multi-série convencional. Não é difícil, pois você precisa apenas de uma linha de código para ter os valores empilhados:

    chart.yScale().stackMode('values');

Voila!

Acabamos de criar um gráfico de barras empilhadas sem alterar a configuração daquela multi-série. Como resultado, não apenas estamos prontos para comparar as vendas totais por categoria como no gráfico de barras de uma única série desde o início do artigo, mas também podemos identificar qual produto é responsável por tornar uma categoria total menor ou maior que outras. .

Já que concordamos com antecedência que nosso objetivo final é um gráfico de barras 100% empilhados, vamos apenas mudar o modo para obtê-lo:

    chart.yScale().stackMode('percent');

É um gráfico de barras 100% empilhadas, que permite destacar as relações de parte para todo e avaliar a contribuição de cada produto para o total da categoria.

Personalização de design

O design é muito importante na visualização de dados, para atrair a atenção, aumentar a clareza e manter a integridade visual em seu projeto da web. Com ajuda desta biblioteca de gráficos, a customização é bem simples.

Adicionando Texto

Para maior clareza, você pode fornecer sua visualização com textos adicionais. Por exemplo, darei um título ao eixo vertical e adicionarei um rótulo de gráfico temporariamente:

    chart.xAxis().title('Products');chart.label({text: 'Classified!'});

Configurações de cor

Você pode adicionar cores através de uma paleta ( chart.palette () ) e alterar as configurações de fundo ( chart.background () ) entre outras coisas. Ou você pode usar um tema:

Então precisamos especificá-lo nas configurações do gráfico:

    anychart.theme(anychart.themes.wines);

Interatividade do Gráfico

Tornar um gráfico JavaScript pelo menos um pouco interativo não é um grande problema.

Provavelmente, a abordagem mais básica consiste em ativar o estado de foco nos pontos de dados, fazê-los mudar de cor e adicionar ou modificar marcadores. O estado de seleção determina como cada ponto parece após ser clicado.

Alguns simples hover e selecionar interatividade baseada é incluído por padrão, então agora não vamos adicionar nada ao exemplo acima. Por favor, retorne a ele para explorar a interatividade básica, se você quiser.

Vale a pena falar sobre o elemento tooltip, que pode flutuar quando um ponto é passado. Eu sempre tento fazer bom uso das dicas de ferramentas fazendo com que elas exibam algumas informações úteis sobre a qual série um ponto pertence, qual valor ele representa e assim por diante. Você pode facilmente ajustar suas dicas para mostrar qualquer coisa. Estamos apresentando a dica de ferramenta e especificando o que mostrar nela:

    var tooltip = chart.tooltip();tooltip.displayMode('union');tooltip.textFormatter('{%SeriesName}: {%Value} ({%YPercentOfCategory}%)');

Aqui está o resultado:

Este é apenas um breve olhar sobre as opções de personalização, para entrar em detalhes seria um artigo inteiro por si só. Por enquanto, sugiro que você leia o seção de interatividade da documentação para mais informações.

Conclusão

Como você vê, não é difícil criar gráficos interativos com JavaScript. Além disso, você pode encontrar todos os exemplos do tutorial no meu coleção no CodePen e facilmente usá-los em seu trabalho. Basta copiar o código, alterar meus dados para o seu e colocar seu projeto em funcionamento muito rapidamente.

Lembre-se sempre de verificar a documentação e / ou referência da API, bem como prestar atenção às demonstrações da biblioteca que você está usando, como galeria deste AnyChart . Normalmente, não é complicado ver se há algo próximo ao que você precisa, encontrar um exemplo que se encaixe melhor, fazer algumas alterações simples e, em seguida, usá-lo da maneira que você precisa.