Uzun süredir araştırma sektöründe çalışan bir yazılımcı olduğum için Chart ve grafik kütüphaneleri benim için artık bir iş arkadaşı, ofis kankası olmuş durumda öyle ki “sabahları sana da poğaça alayım mı ChartJS/AmCharts/CanvasJS ?” diye sorasım geliyor.
Hal böyle olunca ortama yeni bir JavaScript Chart kütüphanesi girdiğinde “gel dostum gel buyur otur” gibi sıcak ve samimi bir şekilde karşılayıp hemen kendisiyle oynamaya başlıyorum.
Çıkışının üzerinden 10 ay geçmesine ve görece yeni olmasına rağmen asıl çıkışını VueJS’in müthiş yükselişi ile sağlamış bir kütüphane.
- Tamamen açık kaynak kodlu
- Fonlamasını ApuTime yapıyor fakat Patreon üzerinden destek olmak da mümkün.
- Tüm altyapısı benim kullanmaya bayıldığım SVG.js üzerine geliştirilmiş durumda, haliyle oldukça hızlı.
Örnek bir grafik hazırlamak gerekirse;
npm üzerinden;
npm install apexcharts --save
veya doğrudan script include ile;
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
Hard-Coded bir dataset ile kullanıldığında;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ApexChartsDemo - World Population</title>
<link href="styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
</style>
</head>
<body>
<div id="chart">
</div>
<script src="apexcharts.js"></script>
<script>
var options = {
chart: {
height: 380,
type: 'bar'
},
plotOptions: {
bar: {
barHeight: '100%',
distributed: true,
horizontal: true,
dataLabels: {
position: 'bottom'
},
}
},
colors: ['#33b2df', '#546E7A', '#d4526e', '#13d8aa', '#A5978B', '#2b908f', '#f9a3a4', '#90ee7e', '#f48024', '#69d2e7'],
dataLabels: {
enabled: true,
textAnchor: 'start',
style: {
colors: ['#fff']
},
formatter: function(val, opt) {
return opt.w.globals.labels[opt.dataPointIndex] + ": %" + val
},
offsetX: 0,
dropShadow: {
enabled: true
}
},
series: [{
data: [18.41, 17.14, 4.27, 3.49, 2.75, 2.60]
}],
stroke: {
width: 1,
colors: ['#fff']
},
xaxis: {
categories: ['China', 'India','USA','Indonesia','Brazil','Pakistan','Nigeria'],
},
yaxis: {
labels: {
show: false
}
},
title: {
text: 'Dünya Nüfusu Paylaşımı',
align: 'center',
floating: true
},
subtitle: {
text: 'Dünya Nüfusu 7,721,816,998 / Ülkelerin Nüfus Oranları',
align: 'center',
},
tooltip: {
theme: 'dark',
x: {
show: false
},
y: {
title: {
formatter: function() {
return ''
}
}
}
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
</script>
</body>
</html>
Çıktısı;
Veri kaynağı : https://www.worldometers.info/world-population/population-by-country/
Yine ChartJS gibi Server-Side kullanımı da oldukça basit, doğrudan bir Ajax fonksiyonunun içinde Data-Series ve X-Axis dizilerini doldurarak kullanılabilir. Örneğin;
<div class="row" style="text-align:center">
<h1>1. Türkiye’de ilk gayrimenkule sahip olma yaş ortalaması kaçtır?</h1>
<div id="chart"></div>
<a href="../Survey/Index" style="color:black"> Menü</a>
</div>
<script>
$(document).ready(function () {
$.ajax({
type: 'GET',
url: '../Result/CalcQuestion1',
dataType: 'json',
success: function (result) {
var options = {
chart: {
width: 550,
type: 'pie',
},
labels: [],
dataLabels: {
enabled: true,
textAnchor: 'start',
style: {
colors: ['#fff']
},
formatter: function (val, opt) {
return opt.w.globals.labels[opt.seriesIndex] + " Yaş : " + val
},
offsetX: 0,
dropShadow: {
enabled: true
}
},
series: [],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 400
},
legend: {
position: 'bottom'
}
}
}]
}
options.series = result.data.data;
options.labels = result.data.categories;
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
}
});
});
</script>
Son sözlere gelecek olursak, ChartJS gibi tamamen ücretsiz (Premium-Ücretli bir sürümü dahi yok) olduğu için doğrudan onunla karşılaştırmayı daha mantıklı buluyorum.
Yeni ve henüz ChartJS kadar kullanılmayan bir kütüphane olduğu için ChartJS’in yarısı kadar Q&A ve destek talebi yok. Bu sebeple büyük ölçekli veya detaylı projeler için ufak kalabiliyor.
Fakat öte yandan ChartJS’den çok daha güzel ve kımıl kımıl ( squishy:) ) göründüğünü de söylemeden edemeyeceğim.
elinize sağlık hocam çok yararlı bir paylaşım olmuş