Znáte Apache ECharts?
Publikováno: 20.3.2024
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…
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.