Criar gráficos interativos em 2

Sep 16, 2025

Como

Quando você trabalha em uma pequena equipe, ele tende a ser difícil de escrever e manter um código separado para Android, iOS e Windows. É aí que as estruturas híbridas como Ionic entram na foto. Eles não só nos permitem escrever uma única peça de código que pode ser usada em todas as três plataformas, mas significa que podemos fazer isso usando nossa pilha de tecnologia existente.

Neste tutorial, vamos explorar como enfrentar uma tarefa comum como visualização de dados em 2, uma das estruturas de aplicativos híbridas mais promissoras por aí. Vou usar a biblioteca de gráficos JavaScript (FusionCharts.com), para este projeto, pois oferece uma grande biblioteca de mais de 90 gráficos, é compatível com todos os dispositivos e navegadores, e é muito fácil de trabalhar.

Configurando iônicos 2

Para desenvolver aplicativos com 2 ionic 2, você precisa de node.js versão 4+ e NPM em execução no seu sistema operacional. Você pode baixar o pacote node.js de nodejs.org/en/download. e o NPM será instalado junto com ele. Se você já tem uma versão diferente do Node.js em execução e deseja executar a versão 4+, você pode fazer isso Nó Version Manager. .

Em seguida, você precisa instalar o Beta Ionic 2 usando NPM. Para fazer isso, execute NPM install -g ionic @ beta No seu terminal de uma conta de usuário com privilégios raiz (estamos instalando o módulo globalmente). Para simular o aplicativo iônico, estamos criando em várias plataformas, precisamos de mais um módulo de nó: Cordova. . Você pode instalar isso usando globalmente NPM install -g cordova .

Agora estamos prontos para criar nosso primeiro aplicativo iônico. No entanto, com esta configuração, só poderemos ver o aplicativo em um navegador. Para simular o aplicativo para um dispositivo iOS ou Android, precisamos construir esse módulo de plataforma específico para Cordova. Neste tutorial estaremos construindo o módulo iOS, então você precisa correr Plataforma iônica Adicionar ios .

Finalmente, você precisa instalar o Xcode. Você encontrará instruções para isso aqui .

Criando um aplicativo iônico 2

Neste tutorial, vamos criar um aplicativo Ionic 2 chamado 'gráficos'. Vamos criar uma pasta 'gráficos' em seu diretório de trabalho atual e bootstrap o aplicativo com um aplicativo de amostra. O aplicativo de amostra conterá uma página básica, conforme descrito aqui.

Para criar este aplicativo, execute Gráficos de início iônico --v2 no diretório de trabalho atual ( gráficos é o nome do aplicativo e --v2. Diz-se iónico Queremos criar um aplicativo iônico 2). Na execução deste comando, um gráficos pasta será criada no diretório de trabalho atual. Para testar o aplicativo no navegador, navegue até o gráficos pasta e corrida servir iônico . Isso iniciará o aplicativo no seu navegador padrão.

Adicionando uma nova página

Agora vamos adicionar uma página / componente ao gráficos Aplicativo que criará gráficos JavaScript. Primeiro, vamos apenas adicionar uma página HTML simples com 'Hello World' nele.

Em Ionic 2, as páginas podem ser adicionadas ao aplicativo iônico usando o @Página Decorator (um módulo iônico com base em componentes angulares 2), que tem acesso à funcionalidade iônica completa. Uma página numa mínima requer um arquivo HTML de modelo (que contém a marcação) e um arquivo JavaScript (contendo a lógica necessária). Você pode encontrar mais detalhes sobre páginas iônicas aqui .

Para criar a página, vamos adicionar Donut-Chart.js. e donut-chart.html. arquivos para o Gráficos / App / Páginas Donut-Gráfico diretório. No arquivo HTML, podemos adicionar o código para navegação de aplicativos e um simples "Hello World"):

 & lt; ion-navbar * navbar & gt;
Botão MenuToggle & GT;
  & lt; ion-icon name = "menu" & gt; & lt; / ion-icon & gt;
& lt; / botão & gt;
& lt; ion-title & gt; olá ionic & lt; / ion-title & gt;
& lt; / ion-navbar & gt;

e lt; ion-content & gt;
  & lt; h1 & gt; olá mundo & lt; / div & gt;
& lt; / ion-content & gt;

No arquivo JavaScript, nós referimos o arquivo HTML criado como modelo para este componente. Como não estamos fazendo nada de fantasia ainda, podemos simplesmente adicionar um construtor vazio ChartsPage .

 Importar {Página} de 'ionic-angular';

@Página({
  Modelado: 'Build / Páginas / PIE-Chart / Pie-Chart.html'
})

Export Class ChartsPage {
  construtor () {
  }
}

Acabamos de criar um componente autônomo; Agora precisamos vincular isso ao aplicativo principal. Para isso, precisamos referenciar o componente que criamos no app.js. arquivo na pasta App e use o componente no Páginas propriedade do construtor de componentes do aplicativo.

 Importar {ChartsPage} de './pages/donut-chart/donut-chart'

construtor (aplicativo, plataforma, menu) {
    // construtor de aplicativos padrão
    this.app = app;
    esta.platform = platform;
    este.menu = menu;
    este.InitializeApp ();
    // Defina as páginas do nosso aplicativo - estamos adicionando gráfico de donut aqui
    este.pages = [
      {Título: 'Bem-vindo', componente: hellooionicpage},
      {Título: 'Gráfico de donut', componente: ChartsPage}
    ];

    // Faça hellooionicpage a página raiz (ou primeira) - etapa padrão
    this.rootpage = hellooionicpage;
}

Depois de fazer essas alterações, o aplicativo iônico no navegador deve recarregar automaticamente (ou usar o servir iônico do terminal novamente). Agora, um novo link deve ser visível no menu lateral do aplicativo, e clicando em que você deve ver o 'Hello World' escrito na tela.

Criando um gráfico JavaScript

Agora é hora de modificar nossa página 'Hello World' para criar um gráfico de donuts. Para poder usar a biblioteca FusionCharts, precisamos primeiro incluir o FusionCharts.js. e fusioncharts.charts.js. arquivos no www / index.html. Arquivo.

Dica rápida: Se os dois arquivos estiverem na mesma pasta, adicionando FusionCharts.js. será suficiente, pois isso incluirá automaticamente fusioncharts.charts.js. .

 & lt; script type = "text / javascript" src = "caminho / para / fusioncharts.js" & gt; & lt; / script & gt;

Agora modificaremos o HTML da etapa anterior para criar um contêiner de gráfico:

 & lt; div id = "recipiente gráfico" & gt; & lt; / div & gt;

No construtor em Donut-Chart.js. , que criamos acima, precisamos adicionar o seguinte código para criar o gráfico dentro do contêiner de gráfico:

 FusionCharts.Ready (função () {
  var Revenuechart = novos fusioncharts ({
    Tipo: 'doughnut2d',
    renderat: 'recipiente gráfico',
    Largura: '100%',
    Altura: '450',
    DataFormat: 'JSON',
    fonte de dados: {
      "gráfico": {
        "Legenda": "dividida de receita por categorias de produtos",
        "Subcaption": "No ano passado",
        "numberprefix": "$",
        "Palettecolors": "# 0075c2, # 1aaf5d, # F2C500, # F45B00, # 8e0000",
        // Mais atributos do gráfico
      },
      "dados": [{
          "Etiqueta": "comida",
          "Valor": "28504"
        } // mais dados
      ]
    }
  }). render ();
});

Neste código, estamos criando um novo gráfico através do construtor do FusionCharts. As propriedades usadas são brevemente explicadas abaixo:

modelo Define o tipo de gráfico

renderat. é o id do recipiente onde queremos renderizar o gráfico

largura e altura são usados para definir as dimensões do gráfico

formato de dados é o formato em que vamos alimentar os dados do gráfico (você pode usar o JSON, bem como XML)

fonte de dados contém cosméticos de gráfico dentro dos fusioncharts gráfico objeto e os dados reais a serem plotados dentro do dados variedade

Embora eu tenha mostrado apenas quatro atributos no gráfico Objeto, há mais de cem outros que você pode usar para melhorar o design do seu gráfico. Você pode ler mais sobre isso aqui .

Uma vez que este código é adicionado, execute servir iônico para relançar o aplicativo. Você deve ver um link 'Donut Gráfico' no menu lateral. Se você seguiu todos os meus passos corretamente, quando você clica nesse link, você deve ver um gráfico de donuts! Se não, por favor, consulte o código no Repo do github para este projeto para ver onde você deu errado.

Nota: Depois de verificá-lo no navegador, use imitações iônicas iOS. para carregar seu aplicativo no simulador do iOS.

Resumindo

Our doughnut chart representing the revenue split of a hypothetical company by product categories — Nosso gráfico de donut representando a divisão de receita de uma empresa hipotética por categorias de produtos

Como você acabou de ver, não é difícil começar com a visualização de dados em iônicos 2. Embora acabei de fazer um simples gráfico de donut para demonstrar o processo, é possível criar gráficos complexos com vários conjuntos de dados usando o mesmo processo . A única coisa que você precisa descobrir é o formato em que os FusionCharts aceitam os dados para esse tipo de gráfico específico. Depois de você ser capaz de fazer isso, você poderá fazer qualquer gráfico da biblioteca.

Se você precisar de ajuda com este tópico ou se tiver alguma dúvida sobre o conteúdo deste tutorial, sinta-se à vontade para me pegar no Twitter .Estou sempre feliz em ajudar!

Este artigo originalmente apareceu em Revista Net. edição 283; compre aqui .

Criar gráficos interativos em 2

Configurando iônicos 2

Criando um aplicativo iônico 2

Adicionando uma nova página

Criando um gráfico JavaScript

Resumindo

Como - Artigos mais populares

17 dicas para desenhar rostos mangá

Como kitbash em movimento com shapr3d

Criar perspectiva no Adobe Illustrator

Procrie tutorial: Como pintar como os antigos mestres

Criar Animações de UI Slick

Criar retratos ilustrados das fotos

Crie um efeito splash em Realflow

Top Dicas para esculpir uma criatura em Zbrush

Categorias