Angular Highcharts - Hızlı Kılavuz

HighChart Angular Wrapperbir Angular uygulamasında zarif ve zengin özelliklere sahip Highcharts görselleştirmeleri sağlayan açık kaynaklı, açısal tabanlı bir bileşendir ve Angular bileşenleri ile sorunsuz bir şekilde kullanılabilir. Bir Angular uygulamasında, Highcharts'ın tüm temel bileşenlerini uygun örneklerle tartışan bölümler vardır.

Özellikleri

• Compatible- Tüm modern tarayıcılar, iPhone / iPad tarayıcıları ve Internet Explorer 6'dan itibaren desteklenir. Modern tarayıcılar, grafik oluşturma için SVG kullanır ve eski Internet Explorer'da grafikler VML kullanılarak çizilir.

• Pure TypeScript - Eksiksiz Highcharts API'si TypeScript'te mevcut olduğundan JavaScript gerekli değildir.

• No Flash - Highcharts yerel tarayıcı teknolojilerini kullandığından ve grafikler modern mobil cihazlarda değişiklik yapılmadan çalışabildiğinden, Flash oynatıcı veya Java gibi istemci tarafı eklentilerine gerek yoktur.

• Clean Syntax - Yöntemlerin çoğu zincirlenebilir, bu nedenle grafiğin yapılandırma seçenekleri JSON kadar sıkı sözdizimi kullanılarak yönetilebilir.

• Dynamic- Grafik oluşturulduktan sonra herhangi bir zamanda seriler ve noktalar dinamik olarak eklenebilir. Etkinlik kancaları desteklenir. Sunucu etkileşimleri desteklenir.

• Documented - Highcharts API'leri, çok sayıda kod ve sözdizimi örnekleriyle kapsamlı bir şekilde belgelenmiştir.

Bu eğitim, Highcharts ve Angular Framework ile çalışmanıza başlamak için bir geliştirme ortamını nasıl hazırlayacağınız konusunda size rehberlik edecektir. Bu bölümde, Angular 6 için gerekli Ortam Kurulumunu tartışacağız. Angular 6'yı kurmak için aşağıdakilere ihtiyacımız var -

• Nodejs
• Npm
• Açısal CLI
• Kodunuzu yazmak için IDE

Nodejs 8.11'den büyük olmalı ve npm 5.6'dan büyük olmalıdır.

Nodejs

Nodejs'nin sisteminizde kurulu olup olmadığını kontrol etmek için yazın node -vterminalde. Bu, sisteminizde şu anda yüklü olan nodej'lerin sürümünü görmenize yardımcı olacaktır.

C:\>node -v
v8.11.3

Herhangi bir şey yazdırmazsa, sisteminize nodejs yükleyin. Nodejs yüklemek için ana sayfaya gidinhttps://nodejs.org/en/download/ nodejs ve işletim sisteminize göre paketi yükleyin.

Nodejs ana sayfası aşağıdaki gibi görünecektir -

İşletim sisteminize bağlı olarak gerekli paketi kurun. Nodejs kurulduktan sonra, npm de onunla birlikte yüklenecektir. Npm'nin kurulu olup olmadığını kontrol etmek için terminale npm -v yazın. Npm'nin sürümünü görüntülemelidir.

C:\>npm -v
5.6.0

Angular 6 kurulumları, açısal CLI yardımıyla çok basittir. Ana sayfayı ziyaret edinhttps://cli.angular.io/ komutun referansını almak için açısal.

Tür npm install -g @angular/cli, sisteminize açısal cli kurmak için.

Angular CLI kurulduktan sonra, yukarıdaki kurulumu terminalinizde alacaksınız. İstediğiniz herhangi bir IDE'yi kullanabilirsiniz, yani WebStorm, Atom, Visual Studio Code, vb.

Highcharts'ı yükleyin

Oluşturulan projede highchart modülünü kurmak için aşağıdaki komutu çalıştırın.

highchartsApp>npm install highcharts --save
+ [email protected]
added 1 package in 137.534s

Oluşturulan projede highchart sarmalayıcı modülünü kurmak için aşağıdaki komutu çalıştırın.

highchartsApp>npm install highcharts-angular --save
+ [email protected]
added 1 package in 20.93s

HighchartsApp.module.ts dosyasına aşağıdaki girişi ekleyin

import { HighchartsChartComponent } from 'highcharts-angular';
declarations: [
   ...
   HighchartsChartComponent    
],

Bu bölümde, Highcharts API'sini Angular'da kullanarak bir grafik çizmek için gereken yapılandırmayı göstereceğiz.

Adım 1 - Açısal Uygulama Oluşturun

Angular 6 - Project Setup bölümünde oluşturduğumuz Angular uygulamasını güncellemek için aşağıdaki adımları izleyin -

Adım	Açıklama
1	Angular 6 - Project Setup bölümünde açıklandığı gibi highchartsApp adıyla bir proje oluşturun .
2	Değiştir app.module.ts , app.component.ts ve app.component.html olarak aşağıda açıklanmıştır. Geri kalan dosyaları değiştirmeden tutun.
3	Uygulanan mantığın sonucunu doğrulamak için uygulamayı derleyin ve çalıştırın.

Değiştirilmiş modül tanımlayıcısının içeriği aşağıdadır app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HighchartsChartComponent } from 'highcharts-angular';
@NgModule({
   declarations: [
      AppComponent,
      HighchartsChartComponent    
   ],
   imports: [
      BrowserModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

Aşağıda, değiştirilmiş HTML ana bilgisayar dosyasının içeriği verilmiştir app.component.html.

<highcharts-chart
   [Highcharts] = "highcharts" 
   [options] = "chartOptions" 
   style = "width: 100%; height: 400px; display: block;">
</highcharts-chart>

Yapılandırmaları anladıktan sonra güncellenmiş app.component.ts'i sonunda göreceğiz.

Adım 2 - Yapılandırmaları Kullanın

Highcharts oluşturun ve chartOptions oluşturun

highcharts = Highcharts;
   chartOptions = {   
}

Grafik Oluştur

ChartOptions kullanarak grafiğin türünü, başlığını ve alt başlığını yapılandırın.

chart: {
   type: "spline"
},

xAxis

ChartOptions kullanarak X Ekseni üzerinde görüntülenecek olan kayan bandı yapılandırın.

xAxis:{
   categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},

yAxis

ChartOptions kullanarak Y Ekseninde görüntülenecek başlığı yapılandırın.

yAxis: {          
   title:{
      text:"Temperature °C"
   } 
},

araç ipucu

Araç ipucunu yapılandırın. ChartOptions kullanarak değerden (y ekseni) sonra eklenecek soneki koyun.

tooltip: {
   valueSuffix:" °C"
},

dizi

ChartOptions kullanarak grafikte görüntülenecek verileri yapılandırın. Seri, bu dizinin her öğesinin grafikte tek bir satırı temsil ettiği bir dizidir.

series: [
   {
      name: 'Tokyo', 
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
   },
   {
      name: 'New York', 
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
   },
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   },
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
]

Misal

Yapılandırma Sözdizimini daha iyi anlamak için aşağıdaki örneği düşünün -

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {   
      chart: {
         type: "spline"
      },
      title: {
         text: "Monthly Average Temperature"
      },
      subtitle: {
         text: "Source: WorldClimate.com"
      },
      xAxis:{
         categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun",
            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      },
      yAxis: {          
         title:{
            text:"Temperature °C"
         } 
      },
      tooltip: {
         valueSuffix:" °C"
      },
      series: [
         {
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
         },
         {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,24.1, 20.1, 14.1, 8.6, 2.5]
         },
         {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
         },
         {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
         }
      ]
   };
}

Sonuç

Sonucu doğrulayın.

Çizgi grafikler, çizgi / spline tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı çizgi ve eğri tabanlı çizelgeleri tartışacağız.

Sr.No	Grafik Türü ve Açıklaması
1	Temel çizgi Temel çizgi grafiği.
2	Veri etiketleri ile Veri etiketleri içeren grafik.
3	Zaman serileri, yakınlaştırılabilir Zaman serileri ile grafik.
4	Ters eksenli spline Ters eksenlere sahip eğri grafik.
5	Sembollerle eğri çizgi Isı / yağmur için semboller kullanan eğri grafik.
6	Çizim bantlı spline Çizim bantları içeren eğri grafik.

Alan grafikleri, alan tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı alan tabanlı grafik türlerini tartışacağız.

Sr.No.	Grafik Türü ve Açıklaması
1	Temel Alan Temel alan grafiği.
2	Negatif değerli alan Negatif değerlere sahip alan grafiği.
3	Yığılmış alan Üst üste yığılmış alanları olan grafik.
4	Yüzde alanı Yüzde cinsinden veriler içeren grafik.
5	Eksik noktaları olan alan Verilerdeki eksik noktaları içeren grafik.
6	Ters eksenler Ters eksenleri kullanan alan.
7	Alan-eğri Spline kullanarak alan grafiği.

Çubuk grafikler, çubuk tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı çubuk tabanlı grafik türlerini tartışacağız.

Sr.No.	Grafik Türü ve Açıklaması
1	Temel Çubuk Temel çubuk grafik.
2	Yığılmış Çubuk Üst üste yığılmış çubuklara sahip çubuk grafik.
3	Negatif değerler içeren Çubuk Grafik Negatif değerler içeren Çubuk Grafik.

Sütun grafikleri, sütun tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı sütun tabanlı grafik türlerini tartışacağız.

Sr.No.	Grafik Türü ve Açıklaması
1	Temel Sütun Temel sütun grafiği.
2	Negatif değerler içeren sütun Negatif değerlere sahip sütun grafiği.
3	Yığılmış sütun Sütun üst üste yığılmış grafik.
4	Yığılmış ve Gruplanmış sütun Yığılmış ve gruplanmış formda sütun içeren grafik.
5	Yığın yüzdeli sütun Yığılmış yüzdeli grafik.
6	Döndürülmüş etiketli sütun Sütunlarda döndürülmüş etiketlere sahip Sütun Grafiği.
7	Sütun Aralığı Aralıkları kullanan Sütun Grafiği.

GWP Highcharts - Pasta Grafikleri

Pasta grafikler, pasta tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı pasta tabanlı grafik türlerini tartışacağız.

Sr.No.	Grafik Türü ve Açıklaması
1	Temel Pasta Temel pasta grafiği.
2	Efsanelerle Pasta Efsanelerle pasta grafik.
3	Halka Grafik Halka Şeması.

Aşağıda, temel bir dağılım grafiği örneği verilmiştir.

Highcharts Configuration Syntax bölümünde bir grafik çizmek için kullanılan konfigürasyonu daha önce görmüştük .

Temel dağılım grafiğine bir örnek aşağıda verilmiştir.

Konfigürasyonlar

Şimdi atılan ek yapılandırmaları / adımları görelim.

dizi

Grafik türünü dağılım tabanlı olacak şekilde yapılandırın. series.typegrafik için seri türüne karar verir. Burada varsayılan değer "line" dır.

var chart = {
   type: 'scatter',
   zoomType: 'xy'
};

Misal

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {         
      title : {
         text: 'Scatter plot'   
      },      
      series : [{
         type: 'scatter',
         zoomType:'xy',
         name: 'Browser share',
         data: [ 1, 1.5, 2.8, 3.5, 3.9, 4.2 ]
      }]
   };
}

Sonuç

Sonucu doğrulayın.

Dinamik grafikler, grafik oluşturulduktan sonra verilerin değişebileceği veri tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı dinamik grafik türlerini tartışacağız.

Sr.No.	Grafik Türü ve Açıklaması
1	Her saniye spline güncelleniyor Spline Grafiği her saniye güncelleniyor.
2	Bir nokta eklemek için tıklayın Nokta toplama özelliğine sahip grafik.

Karma grafikler, karma grafikler çizmek için kullanılır; örneğin, pasta grafik içeren çubuk grafik. Bu bölümde, farklı kombinasyon tablo türlerini tartışacağız.

Sr.No.	Grafik Türü ve Açıklaması
1	Sütun, Çizgi ve Pasta Sütun, Çizgi ve Pasta ile Grafik.
2	Çift Eksen, Çizgi ve Sütun Çift Eksenli, Çizgi ve Sütunlu Grafik.
3	Çoklu Eksenler Çoklu Eksene Sahip Grafik.
4	Regresyon çizgisiyle dağılım Regresyon çizgisine sahip dağılım grafiği.

3 boyutlu grafikler çizmek için 3 boyutlu grafikler kullanılır. Bu bölümde, farklı 3B grafik türlerini tartışacağız.

Sr.No.	Grafik Türü ve Açıklaması
1	3B Sütun 3D Sütun Şeması.
2	3B Dağılım 3D Dağılım Grafiği.
3	3D Pasta 3D Pasta Grafiği.

Harita grafikleri, ısı haritası veya Ağaç haritası grafikleri çizmek için kullanılır. Bu bölümde, farklı Harita grafiği türlerini tartışacağız.

Sr.No.	Grafik Türü ve Açıklaması
1	Sıcaklık haritası Sıcaklık haritası.
2	Ağaç Haritası Ağaç Haritası.