Verileri etkileşimli diyagramlara dönüştürmek için Chart.js kullanın

Sep 13, 2025
Nasıl Yapılır

Teoride, diyagramlar oluşturmak zor değildir. Bir pasta grafiği için gereken trigonometri kullanımı, eğitim programcıları için kullanılan en klasik işler arasındadır. Şu anda geliştiricilerin dikkatini çeken bir sürü diyagramcılık kütüphanesi var, ancak bu makalede, açık kaynaklı araç chart.js'in nasıl kullanılacağına odaklanacağız.

Kütüphaneyi saygılarıyla koyacağız, rastgele oluşturulan verilerden bir dizi yazdırılabilir diyagramlar oluştururuz. Chart.js özellikle popüler Web Tasarım Aracı Çünkü, kullanım kolaylığı ile gelişmiş özellikler arasında benzersiz bir takas sunar ve etkileşimli grafikler oluşturmanıza ve ilgi çekicidir. infographics .

Chart.js ile, web sitelerinize minimum çabayla eklemek için sekiz farklı grafik türünden birini seçebilirsiniz. Yakın zamanda eklenen animasyonlar modülü şemlileri şık görünümlü görsellerle zenginleştirir. Diyagramlarınızı barındırmak için yeni bir site oluşturma? Senin ağ sağlayıcısı spot açık ve bir üst denemek için emin olun Web Sitesi Oluşturucu . Tamam, başlayalım.

Büyütmek için her görüntünün sağ üstündeki simgeye tıklayın.

01. Kütüphaneyi dağıtın

Chart.js'in kullanımı yaygındır, minifiker versiyonunu CloudFlare gibi çeşitli CDN'lerden bulabilirsiniz. Sadece bir ile yükleyin & lt; script & gt; etiketleyin ve emin olun & lt; tuval ve gt; Nesne yakındır - chart.js, bu widget'ta verilen işleme altyapısını kullanarak sihrini yapar. 

 & lt; html & gt;
& lt; head & gt;
& lt; script src = "https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.4.0/
Chart.min.js "& gt;
& lt; / script & gt;
/ head & gt;
& lt; vücut ve gt;
& lt; Canvas ID = "Workarea" & gt;
& lt; / tuval ve gt;
& lt; / body & gt;
& lt; / html & gt;

02. Başlatmaya başlayın

First, load up the framework

İlk önce çerçeveyi yükleyin

Çerçeve yüklendiğinde, bir sonraki adım, bir tuval2d kolunu işaret ederek & lt; tuval ve gt; Önceki adımda oluşturulan örnek. Bu daha sonra yeni bir örneği oluşturmak için kullanılabilir. Grafik() Veri işleme, işleme ve etkileşimden sorumlu olan sınıf. 

 & lt; script & gt;
(işlev () {
var ctx = belge.
getElementbyid ('işçi'). GetContext ('2D');
Var Chart = Yeni Grafik (CTX,
{
Tip: 'Hat',
Seçenekler: {},
. . .
});
}) ();
& lt; / script & gt;

03. Bir veri kaynağı ekleyin

line chart

Çizgi grafiğimiz için sadece bir veri kümesi gereklidir

Grafik sınıfları bir veya daha fazla sağlayan bir veri işaretçisi alır DataSet Gerçek ölçüm bilgilerini içeren nesneler. Çizgi grafiğimiz durumunda, yalnızca bir veri kümesi gerekir. Zorunlu veri elemanı ve gerçek ekran işlemini düzenleyen birkaç isteğe bağlı parametre ile birlikte gelir. 

 Var Chart = Yeni Grafik (CTX, {
Tip: 'Hat',
Seçenekler: {},
veri: {
Etiketler: ["Ocak",
"Şubat", "Mart", "Nisan", "Mayıs", "Haziran",
"Temmuz"],
veri kümeleri: [{
Etiket: "İlk VeriSet'im",
arka plan rengi:
        'RGB (255, 99, 132)',
sınır rengi:
'RGB (255, 99, 132)',
Veriler: [0, 10, 5,
2, 20, 30, 45],
}]
}
});

04. Flickering'i durdurun

Grafik.js, sofistike yeniden boyutlandırma mantığı ile birlikte gelir, bu da - maalesef - zaman zaman ekran boyutlarını yanlışlar alma eğilimindedir. Boyutunu sınırlamak & lt; tuval ve gt; CSS ile öğe, ne yazık ki, hile yapmaz. Bunun yerine, hem en boy oranı bakımı ve sorumluluğu, grafik sınıfları yapıcısına eşlik eden seçenekler aracılığıyla devre dışı bırakılmalıdır. 

 & lt; Canvas ID = "Workarea" style = "genişlik: 800px;
Yükseklik: 600px; "& gt; / tuval ve gt; / tuval ve gt;
& lt; script & gt;
(işlev () {
var ctx = belge.
getElementbyid ('işçi'). GetContext ('2D');
Var Chart = Yeni Grafik (CTX,
{
Tip: 'Hat',

Seçenekler: {
Duyarlı: Yanlış, bakımıaspectratio:
false},

05. Düzenler ekleyin

PARACHRASE ANDREI TUPOLIV: Şimdi küçük olanı uçuyor, daha büyük olanı getirelim. Bu aşamaya eşlik eden iskele, "Çarpır 'diyagramımızı - bir tuval elemanıyla çalışmak yerine, şimdi toplam dördü oluştururuz ve onları bir Lekroy osiloskisine benzer bir şekilde ekranda düzenliyoruz. Ne yazık ki, bu amaçlandığı gibi çalışmıyor. 

 & lt; Canvas ID = "Workarea"
Stil = "Konum: Mutlak; Üst: 0%; Sol:% 0;
Genişlik:% 49; Yükseklik:% 49; "& gt; / tuval ve gt; & lt; / tuval ve gt;
& lt; tuval kimliği = "workarea2"
Style = "Konum: Mutlak; Üst: 0%; Sol:% 51;
Genişlik:% 49; Yükseklik:% 49; "& gt; / tuval ve gt; & lt; / tuval ve gt;
& lt; tuval kimliği = "workarea3"
Stil = "Konum: Mutlak; Üst:% 51; Sol:% 0;
Genişlik:% 49; Yükseklik:% 49; "& gt; / tuval ve gt; & lt; / tuval ve gt;
& lt; tuval kimliği = "workarea4"
Style = "Konum: Mutlak; Üst:% 51; Sol:% 51;
Genişlik:% 49; Yükseklik:% 49; "& gt; & lt; / tuval ve gt;

06. Herhangi bir işleme hatalarını evcilleştirin

Wrapper <div> tags enforce a structure from the outside

Sarmalayıcı; div & gt; Etiketler dışarıdan bir yapıyı uygular

Karmaşık düzenlerdeki şemalarla işlenmenin en güvenli yolu sarmalayıcı kullanılmayı içerir. & lt; div & gt; Etiketler. Dışarıdan bir yapıyı uygularlar, böylece iç düzen motorunun gerektiğinden daha fazla zarar veremeyeceğini garanti ederler. Bununla birlikte, bu durumda, sorumluluk özelliğini yeniden etkinleştirmenizi sağlar. 

 & lt; div style = "konum: mutlak; üst: 0%; sol:
% 0; Genişlik:% 49; Yükseklik:% 49; "& gt;
& lt; Canvas ID = "Workarea" & gt; & lt; / / tuval;
tuval ve gt;
& lt; / div & gt;
& lt; div style = "Konum: mutlak; üst: 0%; sol:
% 51; Genişlik:% 49; Yükseklik:% 49; "& gt;
& lt; Canvas ID = "WorkARea2" & gt; & lt; / / / / /
tuval ve gt;
& lt; / div & gt;
& lt; div style = "pozisyonu: mutlak; üst: 51%; sol:
% 0; Genişlik:% 49; Yükseklik:% 49; "& gt;
& lt; Canvas ID = "workarea3" & gt; & lt; / / / / / / / tuval;
tuval ve gt;
& lt; / div & gt;
& lt; div style = "pozisyonu: mutlak; üst: 51%; sol:
% 51; Genişlik:% 49; Yükseklik:% 49; "& gt;
& lt; Canvas ID = "WorkSarea4" & gt; & lt; / / / / / / tuval;
tuval ve gt;
& lt; / div & gt;
& lt; script & gt;
belge.addeventlistener ("domcontentl
oaded ", işlev () {
var ctx = belge.
getElementbyid ('işçi'). GetContext ('2D');
var şeması = yeni
Grafik (ctx, {
Tür:
'hat',
Seçenekler:
{},

07. Barları deneyin

Creating bar charts is simple

Çubuk çizelgeleri oluşturmak basittir

Her zaman çizgi çizelgeleri oluşturmak hızlı bir şekilde sıkıcı hale gelir. Tip özelliğini çubuğun değiştirilmesini değiştirerek bir şeyler yapalım, böylece bu adıma eşlik eden şekilde gösterilen gibi çubuk diyagramları verir. Yeniden kullanımı ortadan kaldırmak için veri alanını 'Global' kapsamını tanıtıyoruz. 

 & lt; script & gt;
belge.addeventlistener ("domcontentloaded", işlevi () {
var myfield = {
Etiketler: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz"],
veri kümeleri: [{
etiket:
"İlk veri setim",

BackgroundColor: 'RGB (255, 99, 132)',

BorderColor: 'RGB (255, 99, 132)',
Veriler: [0, 10, 5, 2, 20, 30, 45],
}]
};

. . .
CTX = belge.
getElementbyid ('workarea4'). getcontext ('2d');
Grafik = Yeni Grafik (CTX, {
Tip: 'Bar',
Seçenekler: {},
Veri: myfield
});
});
& lt; / script & gt;

08. Turtalıklardan kaçının

pie charts taking over the screen

Pasta grafikleri, tüm ekranınızı doldurmalarını istemiyorsanız özel tedavi gerektirir

Teoride, aynı çizgiler boyunca bir pasta grafiği oluşturulabilir. Üniforma görünümünü önlemek için renk özelliklerini çıkarın ve Tip özelliğini turtaya ayarlayın. Ne yazık ki, bu oldukça işe yaramaz - bittiğinde pasta grafiği tüm ekranı doldurur. Bu, pasta yarıçapını belirlemek için iki özelliğin 'daha büyük' ​​kullanan pasta oluşturucusunun bir uzmanlığından kaynaklanmaktadır. 

 var mypie = {
Etiketler: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz"],
veri kümeleri: [{
Etiket: "İlk VeriSet'im",
Veriler: [0, 10, 5, 2, 20, 30, 45],
}]
};
ctx = document.getElementbyid ('workarea2').
getContext ('2d');
Grafik = Yeni Grafik (CTX, {
Tip: 'Pie',
Seçenekler: {},
Veri: MyPie
});

09. Sorunu çözün

1. adımda oluşturulan 'index.js' dosyasını açın. Grafik türünü satır olarak belirleyerek ve aşağıda gösterildiği gibi görsel olarak gösterilecek verileri ekleyerek başlayın. 

 & lt; vücut & gt;
& lt; div style = "pozisyonu: mutlak; üst: 0%;
Sol:% 0; Genişlik:% 49; Yükseklik:% 49; "& gt;
& lt; Canvas ID = "Workarea" & gt;
tuval ve gt; / tuval ve gt;
& lt; / div & gt;
& lt; div style = "pozisyonu: mutlak; üst: 0%;
Sol:% 51; Genişlik:% 29; Yükseklik:% 49; "& gt;
& lt; Canvas ID = "WorkAREA2" & gt;
tuval ve gt; / tuval ve gt;
& lt; / div & gt;

10. Leton.js diyagramı kurtarın

Sorunu çözmek için başka bir yaklaşım, yeniden devre dışı bırakmayı içerir. bakımıaspectratio özellik.Bu şekilde, diyagramlama motorunun, şemayı değiştirmesine izin verilir ve tüm dairenin ekranda görünmesini sağlayın. 

 CTX = document.getElementbyid ('workarea2').
getContext ('2d');
Grafik = Yeni Grafik (CTX, {
Tip: 'Pie',
Seçenekler: {MorcateSpecTratio: Yanlış
}
Veri: MyPie
});

Sonraki Sayfa: Chart.js ile etkileşimli grafiğinizi oluşturmayı bitirin

  • 1
  • 2

Geçerli sayfa: Chart.js: Adım 01-10

Nasıl Yapılır - En Popüler Makaleler

Adobe Fresco Eğitimi: Boyama uygulamasında bir portre oluşturun

Nasıl Yapılır Sep 13, 2025

(Resim Kredi: Phil Galloway) Bu Adobe Fresco Eğitimi için, hayatınıza hayat ve gerçekçiliği sağlamak için uy..

Zbrush UI'nizle Akıllı Çalışma

Nasıl Yapılır Sep 13, 2025

Aklımızı teşvik eden herhangi bir şey, verimliliğimizi etkileyebilir ve işimizi destekleyen faktörleri, bunun doğru türden bir arka plan müziği veya hatta aydınlatma seçimimizi ..

Afinity Tasarımcısı: Piksel Persona Nasıl Kullanılır

Nasıl Yapılır Sep 13, 2025

Afinity Designer, Mac, pencereler için popüler bir vektör düzenleme aracıdır ve şimdi ipad . Uygulamaya ak�..

Bir burun nasıl çizilir

Nasıl Yapılır Sep 13, 2025

Bir burun nasıl çizileceğini ustalaşmak, bir yüz çizmenin en kötü parçalarından biridir. Belki de her gün gördüğüm..

19 Büyük Poser Sanatı için İpuçları

Nasıl Yapılır Sep 13, 2025

Sayfa 1/2: Sayfa 1 Sayfa 1 Sayfa 2 ..

Doğru prototipleme aracı nasıl seçilir

Nasıl Yapılır Sep 13, 2025

Prototipleme Belki de web tasarım sürecinin en önemli bölümlerinden biridir. Bir inşa ederek Web sitesi..

Illustrator'da 3B yazı nasıl yapılır

Nasıl Yapılır Sep 13, 2025

Geçtiğimiz hafta Adobe, bazı videoları kullanışlı hale getirdi, şimdi çalma listesine, yaratıcıları sadece 60 saniye veya daha kısa sürede bir dizi pratik beceriyi alma şansın..

3B modellemenizi hızlandırın

Nasıl Yapılır Sep 13, 2025

Bu öğretici, bir varlık oluşturma sürecini kapsar - bu durumda uzay gemisi tasarımı - 'Hızlı simetri kavr..

Kategoriler