Önemli grafikler - Hızlı Kılavuz

Highchartsetkileşimli grafik oluşturma özelliği ekleyerek web uygulamalarını geliştirmeyi amaçlayan tamamen JavaScript tabanlı bir grafik kitaplığıdır. Çok çeşitli grafikleri destekler. Grafikler, Chrome, Firefox, Safari, Internet Explorer (IE) gibi standart tarayıcılarda SVG kullanılarak çizilir. Eski IE 6'da, grafikleri çizmek için VML kullanılır.

Highcharts Kitaplığının Özellikleri

Şimdi Highcharts Kitaplığının birkaç önemli özelliğini tartışalım.

  • Compatability - Android ve iOS gibi tüm büyük tarayıcılarda ve mobil platformlarda sorunsuz çalışır.

  • Multitouch Support - Android ve iOS gibi dokunmatik ekran tabanlı platformlarda çoklu dokunmayı destekler. İPhone / iPad ve android tabanlı akıllı telefonlar / tabletler için idealdir.

  • Free to Use - Açık kaynaktır ve ticari olmayan amaçlarla kullanmak ücretsizdir.

  • Lightweight - Yaklaşık 35 KB boyutundaki highcharts.js çekirdek kitaplığı, son derece hafif bir kitaplıktır.

  • Simple Configurations - Grafiklerin çeşitli konfigürasyonlarını tanımlamak için json kullanır ve öğrenmesi ve kullanması çok kolaydır.

  • Dynamic - Grafik oluşturulduktan sonra bile grafiği değiştirmeye izin verir.

  • Multiple axes- x, y ekseniyle sınırlı değildir. Grafiklerde birden çok ekseni destekler.

  • Configurable tooltips- Araç ipucu, kullanıcı bir grafikteki herhangi bir noktanın üzerine geldiğinde gelir. Highcharts, araç ipucunu programlı olarak kontrol etmek için araç ipucu dahili biçimlendiricisi veya geri arama biçimlendiricisi sağlar.

  • DateTime support- Tarih saatini özel olarak kullanın. Tarihe göre kategoriler üzerinde çok sayıda dahili kontrol sağlar.

  • Export - Dışa aktarma özelliğini etkinleştirerek grafiği PDF / PNG / JPG / SVG formatına dışa aktarın.

  • Print - Web sayfasını kullanarak grafiği yazdırın.

  • Zoomablity - Verileri daha kesin bir şekilde görüntülemek için yakınlaştırma tablosunu destekler.

  • External data- Verilerin sunucudan dinamik olarak yüklenmesini destekler. Geri arama işlevlerini kullanarak veriler üzerinde kontrol sağlar.

  • Text Rotation - Etiketlerin herhangi bir yönde dönüşünü destekler.

Desteklenen Grafik Türleri

Highcharts kitaplığı aşağıdaki grafik türlerini sağlar -

Sr.No. Grafik Türü ve Açıklaması
1

Line Charts

Çizgi / eğri tabanlı grafikler çizmek için kullanılır.

2

Area Charts

Alan bilge grafikleri çizmek için kullanılır.

3

Pie Charts

Pasta grafikler çizmek için kullanılır.

4

Scatter Charts

Dağınık grafikler çizmek için kullanılır.

5

Bubble Charts

Kabarcık tabanlı grafikler çizmek için kullanılır.

6

Dynamic Charts

Kullanıcının grafikleri değiştirebileceği dinamik grafikler çizmek için kullanılır.

7

Combinations

Çeşitli grafiklerin kombinasyonlarını çizmek için kullanılır.

8

3D Charts

3D grafikler çizmek için kullanılır.

9

Angular Gauges

Hız göstergesi türü çizelgeleri çizmek için kullanılır.

10

Heat Maps

Isı haritalarını çizmek için kullanılır.

11

Tree Maps

Ağaç haritaları çizmek için kullanılır.

Sonraki bölümlerimizde, yukarıda bahsedilen çizelgelerin her bir türünü örneklerle ayrıntılı olarak tartışacağız.

Lisans

Highcharts açık kaynaklıdır ve ticari olmayan amaçlarla kullanımı ücretsizdir. Highcharts'ı ticari projelerde kullanmak için, şu bağlantıyı izleyin - Lisans ve Fiyatlandırma

Bu bölümde, web uygulaması geliştirmede kullanılacak Highcharts kitaplığının nasıl kurulacağını tartışacağız.

Highcharts, bağımlılık olarak jQuery gerektirir. Önce jQuery kitaplığını ve ardından Highcharts kitaplığını kuracağız.

JQuery'yi yükleyin

JQuery'yi kullanmanın iki yolu vardır.

  • Download- jQuery.com'dan yerel olarak indirin ve kullanın.

  • CDN access- Ayrıca bir CDN'ye erişiminiz var. CDN size dünyanın her yerinden bölgesel veri merkezlerine erişim sağlayacaktır; bu durumda, Google barındırıcı. Bu, CDN kullanmanın, dosyaları kendi sunucularınızdan bir dizi harici sunucuya barındırma sorumluluğunu taşıdığı anlamına gelir. Bu ayrıca, web sayfanızın ziyaretçisi aynı CDN'den jQuery'nin bir kopyasını zaten indirmişse, yeniden indirilmesine gerek kalmaması gibi bir avantaj sunar.

İndirilen jQuery'yi kullanma

Aşağıdaki komut dosyasını kullanarak jQuery JavaScript dosyasını HTML sayfasına ekleyin -

<head>
   <script src = "/jquery/jquery.min.js"></script>
</head>

CDN kullanma

Bu eğitim boyunca jQuery kitaplığının CDN sürümlerini kullanıyoruz.

Aşağıdaki komut dosyasını kullanarak jQuery JavaScript dosyasını HTML sayfasına ekleyin -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
   </script>
</head>

Highcharts'ı yükleyin

Aşağıdakiler, Highcharts'ı kullanmanın iki yoludur.

  • Download - Yerel olarak indirin highcharts.com ve onu kullanın.

  • CDN access- Ayrıca bir CDN'ye erişiminiz var. CDN size dünyanın her yerinden bölgesel veri merkezlerine erişim sağlayacaktır; bu durumda, Highcharts ana bilgisayarı - Code.Highcharts.Com.

İndirilen Özet Grafikleri Kullanma

Aşağıdaki komut dosyasını kullanarak Highcharts JavaScript dosyasını HTML sayfasına ekleyin -

<head>
   <script src = "/highcharts/highcharts.js"></script>
</head>

CDN kullanma

Bu eğitim boyunca Highcharts kitaplığının CDN sürümlerini kullanıyoruz.

Aşağıdaki komut dosyasını kullanarak Highcharts JavaScript dosyasını HTML sayfasına ekleyin -

<head>
   <script src = "https://code.highcharts.com/highcharts.js"></script>
</head>

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

1. Adım: HTML Sayfası Oluşturun

JQuery ve Highcharts javascript kitaplıklarıyla bir HTML sayfası oluşturun.

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

İşte container div, Highcharts kitaplığı kullanılarak çizilen grafiği içermek için kullanılır.

2. Adım: Konfigürasyonlar Oluşturun

Highcharts kitaplığı, json sözdizimini kullanan çok basit yapılandırmalar kullanır.

$('#container').highcharts(json);

Burada json, Highcharts kitaplığının highcharts () yöntemini kullanarak konteyner div içinde bir grafik çizmek için kullandığı json verilerini ve yapılandırmasını temsil eder. Şimdi, gerekli json dizesini oluşturmak için çeşitli parametreleri yapılandıracağız.

Başlık

Grafiğin başlığını yapılandırın.

var title = {
   text: 'Monthly Average Temperature'   
};

alt yazı

Grafiğin alt başlığını yapılandırın.

var subtitle = {
   text: 'Source: WorldClimate.com'
};

xAxis

Kayan şeridi X Ekseni üzerinde görüntülenecek şekilde yapılandırın.

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

yAxis

Y Ekseninde görüntülenecek başlık, çizim çizgilerini yapılandırın.

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

araç ipucu

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

var tooltip = {
   valueSuffix: '\xB0C'
}

efsane

Göstergeyi, diğer özelliklerle birlikte grafiğin sağ tarafında görüntülenecek şekilde yapılandırın.

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

dizi

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.

var 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]
   }
];

3. Adım: json verilerini oluşturun

Tüm konfigürasyonları birleştirin.

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

Adım 4: Grafiği çizin

$('#container').highcharts(json);

Misal

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

highcharts_configuration.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'   
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var 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]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

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 Ajax yüklenen veriler, tıklanabilir noktalar

Sunucudan veri alındıktan sonra çizilen grafik.

4 Zaman serileri, yakınlaştırılabilir

Zaman serileri ile grafik.

5 Ters eksenli spline

Ters eksenlere sahip eğri grafik.

6 Sembollerle eğri çizgi

Isı / yağmur için semboller kullanan eğri grafik.

7 Çizim bantlı spline

Çizim bantları içeren eğri grafik.

8 Düzensiz aralıklarla zaman verileri

Zamana dayalı büyük bir veri kümesinin grafiği.

9 Logaritmik eksen

Logaritmik ekseni gösteren 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.

8 Alan aralığı

Aralıkları kullanan alan grafiği.

9 Alan aralığı ve çizgi

Aralık ve çizgi kullanan alan grafiği.

Çubuk grafikler, alan 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 Yığılmış alan

Negatif yığın 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 Ayrıntılı inceleme içeren sütun

Detaya inme özelliğine sahip Sütun Grafiği.

8 Sabit yerleşimli sütun

Sabit yerleşimli Sütun Grafiği.

9 HTML tablosunda tanımlanan veriler

HTML tablosunda tanımlanan Verileri kullanan Sütun Grafiği.

10 Sütun Aralığı

Aralıkları kullanan Sütun Grafiği.

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ı.

4 Yarım daire Donut

Yarım daire Halka grafiği.

5 Detaya inen pasta

Detaya inme özelliğine sahip pasta grafik.

6 Gradyan içeren pasta grafik

Degrade dolgulu pasta grafik.

7 Tek renkli pasta grafik

Tek renkli dolgulu pasta grafik.

Dağılım grafikleri, dağılım tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı dağılım tabanlı grafik (ler) i tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 Dağılım çizelgesi

Dağılım çizelgesi.

Kabarcık grafikler, kabarcık tabanlı grafikler çizmek için kullanılır. Bu bölümde, farklı kabarcık tabanlı grafik (ler) i tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 Kabarcıklar Tablosu

Kabarcıklar Şeması.

2 3D Baloncuk Şeması

3D Kabarcıklar Şeması.

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 Boş değer içeren 3B Sütun

Boş ve 0 değerlere sahip 3B Sütun Grafiği.

3 İstiflemeli 3D Sütun

İstifleme ve gruplama ile 3D Sütun Grafiği.

4 3D Pasta

3D Pasta Grafiği.

5 3D Çörek

3D Halka Şeması.

Açısal Göstergeler çizelgeleri, sayaç / gösterge tipi çizelgeleri çizmek için kullanılır. Bu bölümde, farklı Açısal Ölçer çizelgeleri türlerini tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 Açısal Ölçer

Açısal Gösterge Tablosu.

2 Katı Ölçer

Katı Ölçü Tablosu.

3 Saat

Saat.

4 Çift eksenli gösterge

Çift eksenli Gösterge Tablosu.

5 VU Ölçer

VU Metre Tablosu.

Isı Haritası çizelgeleri, ısı haritası türü çizelgeleri çizmek için kullanılır. Bu bölümde, farklı Isı Haritaları türlerini tartışacağız.

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

Sıcaklık haritası.

2 Büyük Isı Haritası

Büyük Isı Haritası.

Ağaç Haritası grafikleri, ağaç haritası türü grafikler çizmek için kullanılır. Bu bölümde, farklı Ağaç Haritaları türlerini tartışacağız.

Sr.No. Grafik Türü ve Açıklaması
1 Ağaç Haritası

Renk eksenli Ağaç Haritası.

2 Seviyeli Ağaç Haritası

Düzeyleri ile Ağaç Haritası.

3 Büyük Ağaç Haritası

Büyük Ağaç Haritası.