Execute rapidamente com grandes conjuntos de dados em Ignite UI para gráficos JavaScript

Configurando o projeto

Você pode baixar 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

Execute o comando npm install para instalar todas as dependências e execute o comando npm start para executar o aplicativo Angular. Se o projeto estiver configurado corretamente, você terá um aplicativo Angular em execução, conforme mostrado na imagem abaixo. Se você receber um erro durante a execução do aplicativo, pare e execute o comando npm start novamente.

Atualmente, o primeiro gráfico do aplicativo está configurado para funcionar com um pequeno conjunto de dados. Ele está renderizando uma fonte de dados com dez linhas e funcionando sem problemas para que você possa aumentar e diminuir o zoom no gráfico. Ignite UI para gráficos JavaScript são criados para trabalhar com conjuntos de dados grandes e pequenos. Se você estiver dividindo 10 pontos de dados ou 1000 pontos de dados, os gráficos Ignite UI para JavaScript se comportarão da mesma maneira suave e contínua para ajudar a executar o aplicativo mais rapidamente.

Para vê-lo em ação, modifique o gráfico para trabalhar com um grande conjunto de dados que retorna da API REST.

Passo 1 Obter dados em um componente

Atualmente, o pequeno conjunto de dados do gráfico está configurado na primeira linha de código na função ngOnInit(). Para obter um grande conjunto de dados no PriceChartComponent, você deve usar AppService no componente. Para fazer isso, na pasta app, abra o arquivo pricechart.component.ts, navegue até a função ngOnInit() e (na função) exclua a primeira linha de código e faça uma chamada para o método appService getStcoks(). Substitua apenas a primeira linha de código, conforme mostrado abaixo, e deixe outros códigos de ngOnInit() funcionarem como estão.

ngOnInit() { this._appService.getStocks() .subscribe( stocks => this.stocks = stocks, error => this.errorMessage =erro); this.desiredHeight = 0,22 * (window.screen.height) + "px"; this.chartOptions = this.getPriceChartOptions(); }

No momento, você está buscando dados do AppService no PriceChartComponent. O método getStocks() do AppService está buscando dados da API REST, que tem mais de 200 pontos de dados. Essencialmente, você reconfigurou o gráfico para trabalhar com um grande conjunto de dados.

Step 2 Run the Application

Navegue até o aplicativo e você verá que o gráfico Ignite UI para JavaScript está renderizando um grande conjunto de mais de 200 pontos de dados de forma muito rápida e suave.

Quando você reduz o zoom para um ponto de dados específico, o gráfico Ignite UI para JavaScript será renderizado da mesma maneira para ajudar o aplicativo a ser executado mais rapidamente.