Escreva aplicativos rapidamente usando gráficos de dados do Ignite UI para JavaScript

Configurando o projeto

Baixe o projeto inicial desta lição clicando aqui. (Você também pode baixar o projeto final clicando aqui.)

Após baixar o projeto, navegue até o diretório e execute os comandos abaixo:

• npm install
• npm start

A execução do comando npm install instala todas as dependências; A execução do comando npm start executa o aplicativo Angular. Se a configuração do projeto estiver correta, você terá um aplicativo Angular em execução, conforme mostrado abaixo. Se você receber um erro durante a execução do aplicativo, pare e execute o comando npm start novamente.

Passo 1 Importar e declarar o componente

Para trabalhar com componentes Angular Ignite UI para JavaScript, você deve importá-los e declará-los no módulo. Por exemplo, para usar o componente igDataChart em um aplicativo Angular, importe e declare IgDataChartComponent no módulo do aplicativo.

No projeto, navegue até a pasta Aplicativo de Finanças e, em seguida, a pasta do aplicativo. Abra o arquivo app.module.ts e você verá que igDataChartComponent foi adicionado. Adicione as instruções de importação abaixo, após as instruções de importação existentes.

import{PriceChartComponent} from './charts/pricechart.component';

Depois de importar os componentes necessários, você deve declará-los no módulo do aplicativo. Adicione PriceChartComponent na matriz de declaração do AppModule. Modifique @NgModule decorador em app.module.ts conforme mostrado abaixo:

@NgModule({ imports: [BrowserModule, HttpModule], declarations: [AppComponent, IgZoombarComponent, IgDataChartComponent, InfoComponent, IndicatorChartComponent, VolumeChartComponent, IgGridComponent, GridComponent, PriceChartComponent], providers: [AppService], bootstrap: [AppComponent] })

Agora você adicionou PriceChartComponent na matriz de declaração do módulo AppModule. Outros componentes adicionados e outras propriedades, como provedores, serão descritos nas lições subsequentes.

Step 2 Create a Data Source

Os dados necessários para vincular o gráfico de dados podem ser uma matriz JavaScript ou uma matriz de objetos JSON e podem ser locais ou fornecidos por um serviço REST.

Idealmente, você deve criar uma função para retornar dados no serviço Angular para que os dados possam funcionar em vários componentes. Para esta lição, já existe uma função chamada getData na classe PriceChartComponent, que retorna uma matriz de objetos JSON. Na pasta app\charts, abra o pricechart.component.ts de arquivos e localize a função getData(). Em lições futuras, você aprenderá a criar uma grade que usa dados dos serviços REST.

Step 3 Get Data

Para usar os dados retornados da função getData(), chame a função dentro do gancho do ciclo de vida Angular ngOnInit() e atribua um valor retornado à propriedade PriceChartComponent.

Saiba mais sobre Angular ganchos do Ciclo de Vida.

Na pasta app\charts, abra o pricechart.component.ts de arquivos e modifique a função ngOnInit() conforme mostrado abaixo:

ngOnInit() { this.stocks = this.getData(); }

Step 4 Configure Axes

Para criar um gráfico de dados, você deve configurar as opções do gráfico. As opções de gráfico consistem em três propriedades principais:

1. Eixos X e Y
2. Data source
3. Série

Outras propriedades importantes incluem altura, largura, título, etc.

Para configurar eixos, abra o arquivo pricechart.component.ts. Diretamente após a função ngOnInit(), adicione a função getPriceChartAxes() conforme mostrado abaixo:

getPriceChartAxes() { return [ { name: "xAxis", type: "categoryX", label: "Date" }, { name: "yAxis", type: "numericY", labelLocation: "outsideRight", labelExtent: 40 } ]; }

Passo 5 Configurar Série

Um gráfico de dados Ignite UI para JavaScript pode ter qualquer número de séries, mas deve ter pelo menos uma. Para adicionar uma série em um gráfico de dados na pasta app\charts, abra pricechart.component.ts arquivo. Diretamente após a função getPriceChartAxes(), adicione a função getPriceChartSeries() conforme mostrado abaixo:

getPriceChartSeries() { return [ { name: "stockSeries", type: "splineArea", title: "Price Data", isHighlightingEnabled: true, isTransitionInEnabled: true, xAxis: "xAxis", yAxis: "yAxis", valueMemberPath: "High", showTooltip: true, Outline: "#00AADE" } ]; }

Na lista acima:

• O valor do tipo de série é definido como splineArea para criar uma série de área de spline. Se você quiser criar uma série de linhas, defina o valor do tipo como "linha". O IgniteUI fornece mais de 25 tipos de séries possíveis para o gráfico de dados, incluindo área, barra e coluna.
• Para uma série valueMemberPath, você precisa definir a propriedade da matriz de dados a ser exibida no gráfico. Aqui você está definindo a propriedade "Altura" da fonte de dados a ser renderizada na série de gráficos de dados.
• O valor isTransitionInEnabled da série é definido como true para habilitar a animação quando uma fonte de dados é atribuída.

Step 6 Configure Chart Option

Você configurou eixo e série. Em seguida, configure uma opção de gráfico para definir todas as outras propriedades importantes de um gráfico de dados.

Para saber mais sobre as propriedades do gráfico, consulte Ignite UI para Gráfico de Dados JavaScript.

Para configurar um gráfico de dados, na pasta app\charts, abra pricechart.component.ts arquivo. Diretamente após a função getPriceChartSeries (), adicione a função getPriceChartOption() conforme mostrado abaixo:

getPriceChartOptions() { return { axes: this.getPriceChartAxes(), series: this.getPriceChartSeries(), windowResponse: "deferred", horizontalZoomable: true, width: "100%", height: this.desiredHeight, leftMargin: 0, rightMargin: 30, windowRectMinWidth: 0.05, syncChannel: "channel1", synchronizeVertically: false, synchronizeHorizontally: false }; }

Na lista acima:

• A propriedade syncChannel do gráfico é definida para que o gráfico possa ser sincronizado com outros gráficos do aplicativo para interagir com funcionalidades de outros controles, como ZoomBar. Os gráficos sincronizados no mesmo canal podem usar uma única barra de zoom para aumentar e diminuir o zoom.
• A propriedade windowResponse do gráfico é definida como "adiada", portanto, a atualização do modo de exibição do gráfico será adiada até que a ação do usuário seja concluída. Você também pode definir o valor como "imediato".

Passo 7 Opção de Gráfico de Inicialização e Fonte de Dados

Para inicializar a opção de gráfico e a fonte de dados, no arquivo pricechart.component.ts, modifique a função ngOnInit() conforme mostrado abaixo:

ngOnInit() { this.stocks = this.getData(); this.desiredHeight = 0.22 * (window.screen.height) + "px"; this.chartOptions = this.getPriceChartOptions(); }

Step 8 Create Chart

Para criar um gráfico, abra pricechart.component.html arquivo e adicione a marcação abaixo:

<ig-data-chart [(options)]="chartOptions" [(dataSource)]="stocks" widgetId="pricechart"></ig-data-chart>

Passo 9 Uso na aplicação

Para usar o PriceChartComponent em um aplicativo, na pasta do aplicativo, abra o arquivo app.component.html. Logo após o elemento <info-screen> e antes do elemento <indicatorchart>, adicione o código mostrado abaixo:

<pricechart></pricechart>

Navegue até o aplicativo, role para baixo e, na parte inferior da página, você encontrará o gráfico adicionado conforme mostrado abaixo: