JavaScript ve Highcharts ile etkileşimli grafikler

Yüksek çizelgeler HTML5 ve saf Javascript ile yazılmış bir kütüphanedir:

Nasıl çalıştığını, nasıl yapılandırıldığını ve web sitemizde nasıl uygulanacağını görelim.
dizin yapısı
Önce kütüphanemizi içeren zip dosyasını indiriyoruz, zipten çıkarıyoruz ve dosya dizinimizi ve nasıl yapılandırıldığını görebiliyoruz.

Her dizinin ne içerdiğini ve ne için kullanıldığını görelim:

• index.html: Bu, HTML test sayfasıdır, bununla testler yapabilir ve varsayılan seçenekleri görüntüleyebilirsiniz.
• örnekler: Bu klasör, örnekler için tüm kaynak kodunu içerir.
• grafik: Bu klasör, örneklerde kullanılan resimleri içerir.
• sunucu dışa aktarma: Bu, grafikleri bir görüntüye aktarmak için sunucu tarafı işlevini içeren bir dizindir.
• js: Bu, ana Highcharts dizinidir. Her Javascript dosyasının iki soneki vardır, ilk .src.js, içinde yorumlar bulunan kaynak kodu içeren ve diğer .js, bunun küçültülmüş versiyonudur.
• adaptörler: İşte kullanabileceğiniz eklentiler mootools veya Prototip çerçeveler olarak, bu dizinde aşağıdakiler bulunur:

• export.js: bu dosya bize dışa aktarma ve yazdırma işlevleri sağlar.

• temalar: Bu klasör, diğerleri arasında arka plan rengi, stiller gibi ayarlara sahip bir dizi önceden oluşturulmuş Javascript dosyası içerir. Farklı stiller için bu dosyalardan birini grafiklere yükleyebiliriz.

Bu kütüphanenin nasıl çalıştığını ve nasıl düzenlendiğini görerek, nasıl uygulanacağına dair pratik bir örneğe geçelim. Yüksek çizelgeler Web sitemizde.

İlk önce kütüphaneleri dahil ediyoruz. Yüksek çizelgelerkütüphanelerinin yanı sıra jQuery ekstra işlevsellik için:

 Highcharts İlk Örnek 

Eğri grafiği, tüm özellikleri ve veri serilerini içeren nesnenin belirtiminde tanımlanır.

 var chart = new Highcharts.Chart ({chart: {…}, başlık: '…'…}); 

Bu nesne oluşturulduktan sonra, grafik tarayıcıda görüntülenir, bu nesne içinde aşağıda açıklayacağımız bir dizi seçenek vardır.
Talimat renderTo Highcharts'a HTML'de, özellikleile id = "konteyner". Seçenek tip grafiğin türünü tanımlar, seçenekler şunlar olabilir: alan, çizgi, eğri, vb. Bu örnekte kullanacağımız spline.

 grafik: {renderTo: 'konteyner', şunu yazın: 'spline'} 

Bunu takiben, grafiğin en üstünde görünecek bir başlık ve bir alt başlık belirledik.

 başlık: {metin: 'Web tarayıcıları …'}, alt başlık: {metin: '2008'den günümüze'}, 

Mülkiyetindeki kategoriler seçeneğinde x Ekseni her veri girişinin etiketlerini içeren bir dizi içerir ve tikAralıklar Bu etiketlerin yazdırılma şeklini ayırıyoruz.

 xAxis: {kategoriler: ['Ocak 2008', 'Şubat',…. ], tikAralık: 3}, 

Mülk üzerindeki seçenekler y Ekseni O eksenin başlığını atamamıza ve grafiğimizi sınırlayacağımız minimum ve maksimum değeri belirlememize izin veriyorlar.

 yEksen: {başlık: {metin: 'Yüzde%'}, min: 0}, 

mülkü arsaSeçenekleri Grafiğin türüne bağlı olarak her bir veri serisinin nasıl görüntüleneceğini kontrol eden kişidir.

 plotOptions: {series: {lineWidth: 2}}, 

series özelliği, grafiği besleyecek verileri tanımlayan tüm yapılandırma nesnesinin merkezidir.

 dizi: [{ad: 'Internet Explorer', veri: [54.7, 54.7, 53.9, 54.8, 54.4,…]}, {ad: 'FireFox', veri: [36.4, 36.5, 37.0, 39.1, 39.8,…] }, { 

Şimdi kodun tüm bölümleri açıklandıktan sonra tarayıcımızda nasıl görüneceğini görelim.

Son olarak, kendiniz test edebilmeniz için ve herhangi bir ihtiyaca göre özelleştirilebileceğini unutmadan kodun tamamını bırakıyorum.

 Highcharts İlk Örnek

Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.