Morris.js é uma biblioteca de gráficos javascript baseada no competente raphael.js, eu comecei a incluí-los em muitos projetos recentemente porque eles são muito simples de implementar e agora, no branch master, suportam a capacidade de nativamente redimensionar com a página, em outras palavras, eles são responsivos, o que é muito procurado no momento.
Agora eles podem ser implementados em conteúdo que alterna entre display: block; e exibir: nenhum; como as guias do bootstrap?
Estou trabalhando em um protótipo para um de meus clientes que precisa exibir dados para seus usuários em forma gráfica. É mais fácil digerir os dados na forma gráfica, é mais fácil detectar anomalias, etc etc …
Um contratempo com o uso de elementos gráficos é que eles tendem a ocupar muito espaço. O que torna outros conteúdos menos visíveis e em interfaces de usuário com muitos dados, o estado real da tela vale muito em muitos sentidos. Assim, os desenvolvedores lutam com o problema tradicional de permitir que os usuários fiquem com o bolo e comam ao mesmo tempo.
Solução -> Guias. Ótimo, o problema de espaço foi resolvido, mas com a implementação de guias geramos outro problema:
Problema -> O conteúdo com guias tem a exibição do atributo seletor: nenhum;
E por que isso é um problema? Os gráficos são geralmente desenhados em documentos prontos, o que significa que a página carrega, todos os elementos estão no lugar (exceto para a nossa guia de fundo) e o javascript começa a desenhar gráficos nos elementos que pode ver, portanto, nossa guia oculta não terá nada nela quando for clicado.
Exemplo:
http://jsfiddle.net/rbsthlm/cD6dd/2/
Agora que há uma solução para isso, podemos usar a função redraw () que vem com morris, e vamos conectá-la ao evento de bootstrap que determina que a guia está ativa, mostrado.bs.tab. Então, quando a guia bootstrap é mostrada, desenhamos alguns gráficos.
Forneceremos a cada guia os identificadores de dados HTML5 dos gráficos que estão presentes neles no HTML. No javascript vamos determinar em qual guia estamos, pegar esses identificadores e executar a função redraw () neles, para não tentarmos redesenhar gráficos que não deveriam ser mostrados naquele momento, economia economia …
A solução de trabalho completa pode ser encontrada aqui:
http://jsfiddle.net/rbsthlm/cD6dd/12/
Então aí está, lindos gráficos Morris em guias de bootstrap. Vou incluir todos os trechos de código no final aqui se você preferir ler aqui do que no jsFiddle.
Recursos adicionais necessários:
- bootstrap 3 css e js
- fontawesome
- jquery
O código-fonte completo pode ser encontrado aqui:
<a href=” http://blog.b3rgstrom.se/post/68081765878/morris-js-charts-in-bootstrap-tabs”> Gráficos Morris.js responsivos nas guias do Bootstrap 3 < / a>
Aproveitar