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