Chart.js'e Giriş - Medium

Trang chủ » Html Css Grafik Oluşturma » Chart.js'e Giriş - Medium

Có thể bạn quan tâm

Chart.js’e GirişMuhsin KöseMuhsin Köse3 min readOct 14, 2019

--

Share

Giriş

Chart.js açık kaynak kodlu bir veri görselleştirme kütüphanesidir. Chart.js ile grafik, çizgi, pie vb grafikler oluşturabilir.

Chart.js orijinal dökümantasyonuna buradan ulaşabilirsiniz.

Gereksinimler

Temel seviyede HTML ve CSS bilgisi.(canvas, background-color, border-color)

Javacript OOP(objeye yönelik programlama) ve Arrays(diziler) bilmeniz gerekiyor. Js objeleri bilmiyorsanız buradan öğrenebilirsiniz.

1. Kurulum

Chart.js direk html içine link olarak eklemek isterseniz.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" >

Bilgisayarınıza indirmek isterseniz:

Npm için: npm install chart.js --save

Yarn için: yarn add chart.js

2. Kanvas Oluşturmak

Chart.js kanvas aracı ile çalışır başta html kodları içerisine istenen boyutta kanvas oluşturulur.

<canvas id="ilk" width="800" height="400"></canvas>

Kanvas hakkında daha fazla bilgi için tıklayın.

3. Bölümden itibaren javascript yazılacaktır html kısmı bu kadar.

3. Veriyi Hazırlamak

Aşağıdaki 2018 telefon satışları verisini kullanacağız.

Samsung 72.3M

Huawei 52M

Apple 46.9M

Xiaomi 35.7M

Oppo 33.9M

Veriler dizi(array) şeklinde yazılarak kullanılır. Verileri let ile miktar ve markalar olarak oluşturduk.

let miktar = [72, 52, 46, 35, 33 ,30];let markalar = ['Samsung', 'Huawei', 'Apple','Xiaomi' , 'Oppo', 'Vivo'];

4. Chart Oluşturmak

İlk olarak oluşturduğumuz kanvası seçerek bir değişkene atıyoruz.

let kanvas = document.getElementById(‘ilk’);

Yeni bir Chart oluşturuyoruz. Objeye yönelik programlama burada kullanılıyor.

let grafik = new Chart(kanvas, { type: 'bar', data: {}});

Type: grafiğin biçimini belirler.(“bar”,”pie” vs). ilk olarak “bar” kullanacağız.

Data: Verilerin, başlığın ve css yazıldığı yer.

data’yı Özelleştirelim

let grafik = new Chart(kanvas, { type: 'bar', data: { labels: markalar, datasets: [{ label: '2018Q3 Telefon Satışı', data: miktar }] }});

labels: Markaları isimleri yazacağımız obje. (markalar)

datasets >> label : Grafiğin başlığı.

datasets >> data : sayısal veriler (miktar)

Her şey doğru ise aşağıdaki gibi bir grafik çıkacaktır.

Bu grafik biraz kötü olduğu için renk ekleyelim. Renkleri de CSS dosyasının içine değil Javascript’e nesne olarak ekliyoruz.

BackgrounColor

BackgroundColor datasets içerisine dizi olarak, istenilen renkler her bir veri için ayrı ayrı yazılır.

backgroundColor: [ "rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)" ]

BorderColor

Aynı şekilde borderColor eklediğimiz zaman daha güzel bir görüntü elde edebiliriz.

borderColor: [ "rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)", "rgba(153, 102, 255, 1)" ],

BorderColor eklediğiniz zaman direk bir sınır rengi koymayacaktır bunun için datasets içine border genişliği veriyoruz.

borderWidth: 1
Press enter or click to view image in full size
Grafiğin renkli hali.

Kodları buradan inceleyip değiştirebilirsiniz.

5. Pasta Şeklinde Grafik Oluşturmak

Kodlarda sadece type “pie” yaparak direk olarak sonucu görebiliriz.

6. Çizgi Şeklinde Grafik Oluşturmak

type “line” yaparak çizgi grafik oluşturabiliriz. Eğer tek renk için sadece backgroundColor ve borderColor’a bir tane değer yazabilirsiniz.

Press enter or click to view image in full size

6.1 Çizgi Özelleştirme

lineTension

Eğer çizgide yumuşak geçişler değilde keskinlik isterseniz datasets içerisine lineTension: 0 yazarak yuvarlaklığı kaldırabilirsiniz. Eğer lineTension’a 2, 3 gibi değerler verirseniz daha değişik sonuçlar görebilirsiniz.

fill

fill grafiğin içindeki renkleri siler. Datasets içine fill: false yazarak grafik içindeki renkleri silebilirsiniz.

Press enter or click to view image in full size

Okuduğunuz için teşekkürler biraz kötü bir yazı oldu ama benim için bir başlangıç.

Kaynaklar:

Chart.js Docs

Stanley Ulili

Từ khóa » Html Css Grafik Oluşturma