Znáte Apache ECharts?
ECharts je javascriptová knihovna pro tvorbu grafů. Nedávno vyšla ve verzi 5.5 (přehled novinek). Pochází z úspěšné dílny Apache.
Již galerie příkladů naznačí, že se nejedná o malý projekt a možností najdete opravdu hodně.
Naučit se s knihovnou pracovat není náročné, všechny parametry grafu můžete předat ve formě JSON, viz jednoduchý příklad:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- Include the ECharts file you just downloaded -->
<script src="echarts.js"></script>
</head>
<body>
<!-- Prepare a DOM with a defined width and height for ECharts -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// Initialize the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('main'));
// Specify the configuration items and data for the chart
var option = {
title: {
text: 'ECharts Getting Started Example'
},
tooltip: {},
legend: {
data: ['sales']
},
xAxis: {
data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
},
yAxis: {},
series: [
{
name: 'sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// Display the chart using the configuration items and data just specified.
myChart.setOption(option);
</script>
</body>
</html>Máte data v tabulkovém procesoru a potřebujete je rychle převést do JSON? Žádný problém, použijte Spreadsheet Data Converter.
K dispozici je i řada rozšíření a témat vzhledu (vlastní téma si můžete snadno vytvořit online). Pokud je pro vás klíčová velikost knihovny, můžete si online vytvořit vlastní build obsahují jen ty komponenty, které potřebujete.
Možná používáte jinou knihovnu pro tvorbu grafů, ale o Apache ECharts je dobré vědět.
Martin Hassman
Martin Hassman založil a vede magazín Zdroják. Absolvoval VŠCHT Praha. Byl u založení projektu CZilla (dnes už nepamatujete, nevadí). Stavěl mosty a metal cestu pro HTML5 (to tu ještě máme). V GUG.cz organizoval akce pro vývojáře (a jestli neumřeli, kódují si dodnes…).
