Interaktivní grafy s JavaScriptem a Highcharts

Highcharts je knihovna napsaná v HTML5 a čistém Javascriptu:

Podívejme se, jak to funguje, jak je to strukturováno a jak to implementovat na našem webu.
Adresářová struktura
Nejprve si stáhneme zip, který obsahuje naši knihovnu, rozbalíme ji a můžeme vidět náš adresář souborů a strukturu.

Podívejme se, co každý adresář obsahuje a k čemu slouží:

• index.html: Toto je testovací stránka HTML, pomocí které můžete provádět testy a zobrazovat výchozí možnosti.
• příklady: Tato složka obsahuje veškerý zdrojový kód pro příklady.
• grafika: Tato složka obsahuje obrázky použité v příkladech.
• exportní server: Toto je adresář, který obsahuje funkci na straně serveru pro export grafiky do obrázku.
• js: Toto je hlavní adresář Highcharts. Každý soubor Javascriptu má dvě přípony, první .src.js obsahuje zdrojový kód s komentářem a druhý .js je jeho minimalizovanou verzí.
• adaptéry: Zde jsou pluginy, které lze použít Mootools nebo Prototyp jako rámce v tomto adresáři je následující:

• exporting.js: tento soubor nám poskytuje funkce pro export a tisk.

• témata: Tato složka obsahuje řadu předem připravených souborů Javascript s nastavením, jako je barva pozadí, styly, mimo jiné. Jeden z těchto souborů můžeme načíst do grafiky pro různé styly.

Když vidíme, jak tato knihovna funguje a jak je organizována, přejděme k praktickému příkladu implementace Highcharts na našem webu.

Nejprve zahrneme knihovny souboru Highcharts, stejně jako knihovny jQuery pro extra funkce:

 Highcharts První příklad 

Křivkový graf je definován ve specifikaci objektu, který obsahuje všechny vlastnosti a datové řady.

 var chart = new Highcharts.Chart ({chart: {…}, title: '…' …}); 

Jakmile je tento objekt vytvořen, grafika se zobrazí v prohlížeči, v rámci tohoto objektu existuje řada možností, které vysvětlíme níže.
Pokyn renderTo říká Highcharts, aby zobrazily graf v HTML, konkrétně vs id = "kontejner". Možnost typ definuje typ grafu, možnosti mohou být: oblast, čára, spline atd. V tomto příkladu použijeme spline.

 chart: {renderTo: 'container', type: 'spline'} 

Následně nastavíme nadpis a podtitul, které se objeví v horní části grafu.

 nadpis: {text: 'Webové prohlížeče …'}, podtitul: {text: 'Od roku 2008 do současnosti'}, 

Ve volbě kategorií ve vlastnosti xAxis obsahuje pole s popisky každého záznamu dat as tickIntervals Oddělujeme způsob tisku těchto štítků.

 xAxis: {kategorie: ['led 2008', 'únor', …. ], tickInterval: 3}, 

Možnosti na nemovitosti osa Umožňují nám přiřadit název ose a nastavit minimální a maximální hodnotu, ve které budeme omezovat náš graf.

 yAxis: {title: {text: 'Percentage%'}, min: 0}, 

Vlastnost plotOptions Kdo určuje, jak se budou zobrazovat jednotlivé datové řady v závislosti na typu grafu.

 plotOptions: {řada: {lineWidth: 2}}, 

Vlastnost series je středem celého konfiguračního objektu, který definuje data, která budou krmit graf.

 řada: [{název: 'Internet Explorer', data: [54,7, 54,7, 53,9, 54,8, 54,4, …]}}, {název: 'FireFox', data: [36,4, 36,5, 37,0, 39,1, 39,8, …] }, { 

Nyní, když jsou vysvětleny všechny části kódu, pojďme se podívat, jak by to vypadalo v našem prohlížeči.

Nakonec nechávám kompletní kód, abyste si ho mohli sami vyzkoušet a nezapomněli, že jej lze přizpůsobit tak, aby jej přizpůsobil jakékoli potřebě.

 Highcharts První příklad

Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod