11 Π»ΡΡΡΠΈΡ jQuery-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ
ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ Ρ Π»ΡΠ±ΡΠΌΠΈ Π²ΠΈΠ΄Π°ΠΌΠΈ Π΄Π°Π½Π½ΡΡ , Π²Ρ Π·Π½Π°Π΅ΡΠ΅, ΠΊΠ°ΠΊΠΈΠΌΠΈ ΠΌΡΡΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠΈΡΡΡ. ΠΠ΅ΠΏΡΠΎΡΡΠΎ ΠΏΡΠΎΠ±ΡΠ°ΡΡΡΡ ΡΠ΅ΡΠ΅Π· Π²ΡΠ΅ ΡΡΠΈ ΡΠΈΡΡΡ ΠΈ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΠΎΠ½ΠΈ ΠΎΠ·Π½Π°ΡΠ°ΡΡ. ΠΡΠΎ ΡΠ»ΡΡΠ°ΠΉ, ΠΊΠΎΠ³Π΄Π° Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ Π½Π° ΠΏΠΎΠΌΠΎΡΡ. ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΏΡΠΎΡΡΠ½ΡΠ΅Ρ Π΄Π°Π½Π½ΡΠ΅ ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π»ΠΈΡΠ°ΠΌ, ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡΠΈΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΠ·Π²Π»Π΅ΡΡ ΠΈΠ· Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΈΠ΄Π΅ΠΈ.
βDatavizβ ΡΠ²Π»ΡΠ΅ΡΡΡ Π°Π±Π±ΡΠ΅Π²ΠΈΠ°ΡΡΡΠΎΠΉ βΠ²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ β, ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅ΡΠΊΠ°Ρ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½Π°Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ°ΡΠΈΡΡΠΈΡΠ΅ΡΠΊΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΈ ΡΠ°Π±Π»ΠΈΡ.
ΠΠ°ΠΊ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈΠ· Π΄Π°Π½Π½ΡΡ , ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π΄Π΅ΡΠ°Π»Π΅ΠΉ, Π½Π΅ ΠΎΡΠ²Π»Π΅ΠΊΠ°Ρ ΠΎΡ ΠΊΠ°ΡΡΠΈΠ½Ρ Π² ΡΠ΅Π»ΠΎΠΌ.
ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ
jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ dataviz Π΄Π»Ρ Π²Π°ΡΠ΅ΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠΎ ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ
Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ? Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ Π½Π°Π·Π²Π°Π» ΡΠ²ΠΎΠΈΡ
ΡΠ°Π²ΠΎΡΠΈΡΠΎΠ², ΠΈ Π²ΡΠ΄Π΅Π»ΠΈΠ» ΠΈΡ
ΡΠΌΠ΅ΡΡΠ½ΠΎΡΡΡ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ
ΡΠΈΡΡΠ°ΡΠΈΡΡ
. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Ρ Π½Π΅ ΠΏΠΎΡΡΠ°ΡΠΈΡΠ΅ Π²ΡΠ΅ΠΌΡ ΠΈ ΡΡΠΈΠ»ΠΈΡ Π½Π° ΠΏΠΎΠΈΡΠΊΠΈ, ΠΈ Ρ Π²Π°Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠΈΡ
Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π²ΡΠ±ΠΎΡΠ°.
1. FusionCharts
ΠΠΎΠΌΠΈΠΌΠΎ JavaScript Charts, FusionCharts ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΏΠ°ΠΊΠΎΠ²ΡΠ²Π°Π΅Ρ Π²ΡΠ΅ Π΄ΠΎΠ±ΡΠΎ FusionCharts β ΡΠΌΠ°ΡΡ-Π΄ΠΈΠ·Π°ΠΉΠ½, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈ Π±ΠΎΠ³Π°ΡΡΠΉ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΎΠΏΡΡ. ΠΡΠ°ΡΠΈΠΊΠΈ ΠΏΠ»Π°Π²Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠ»Π°Π²Π½ΠΎ Π½Π° Π²ΡΠ΅Ρ ΡΠΈΠΏΠ°Ρ ΡΡΡΡΠΎΠΉΡΡΠ², Π²ΠΊΠ»ΡΡΠ°Ρ ΠΠ, Mac, Android ΡΡΡΡΠΎΠΉΡΡΠ²Π°, Π° ΡΠ°ΠΊΠΆΠ΅ iPads ΠΈ iPhones. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠ½ΠΎ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ Π΄ΠΎ IE6.
ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠΎΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ. ΠΡΠ°ΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ Π΄Π°Π½Π½ΡΠΌΠΈ JSON, XML Π΄Π°Π½Π½ΡΠΌΠΈ ΠΈΠ»ΠΈ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ HTML. ΠΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΡΡ Π² Π³ΡΠ°ΡΠΈΠΊΠ΅ (Π·Π΄Π΅ΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ), Ρ Π²Π°Ρ Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ°Π½ΡΠΎΠ², ΡΡΠΎ ΡΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ.
ΠΠ΄Π΅ΡΡ ΡΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Ρ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ ΠΈ ΡΠ΅Π°Π»ΡΠ½ΡΠΌΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. ΠΠ±ΡΠ°Π·ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Π° ΠΈ ΠΊΠΎΠ΄Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ Π½Π° Github.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΠΎ Π΄Π»Ρ Π½Π΅ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ ΡΠ΅Π»Π΅ΠΉ, ΠΏΠ»Π°ΡΠ½ΠΎ Π΄Π»Ρ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ .
2. Flot
Π Π΄Π°ΡΡΠΊΠΎΠΌ ΡΠ·ΡΠΊΠ΅, flot (ΡΠΈΡΠΌΡΠ΅ΡΡΡ Ρ βplotβ) ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΉ, ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ, Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΠΉ ΠΈ ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎ, ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Flot ΡΡΡΠ΅ΠΌΠΈΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ. ΠΠ½ΠΈ ΡΠΊΠΎΠ½ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½Ρ Π½Π° ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΏΡΠΎΡΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ, ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ². ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈ Π²ΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠΈΠΊΠ»ΠΎΠ², ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ ΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΡΡΠ³ΠΈΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΎΡΠ΅ΠΉ, ΠΌΠ½ΠΎΠ³ΠΎΡΡΡΡΠ½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ ΡΠ΅ΠΊΡΡ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° Ρ Canvas Π²ΠΌΠ΅ΡΡΠΎ HTML. ΠΠ½ΠΎΠ³ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΠΊΠ°ΠΊ ΠΏΠ»Π°Π³ΠΈΠ½Ρ.
ΠΡΡΡ ΡΡΠ΄ Π²ΠΈΠ΄Π΅ΠΎ, ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Flot, ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π‘ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΠΎ Π΄Π»Ρ Π»ΡΠ±ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
3. Highcharts
Highcharts ΡΠ²Π»ΡΠ΅ΡΡΡ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΉ JavaScript Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. ΠΠ½Π° Π±ΡΠ»Π° Π²ΡΠΏΡΡΠ΅Π½Π° Π² 2009 Π³ΠΎΠ΄Ρ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄ΠΎ ΡΠΈΡ
ΠΏΠΎΡ Π½Π°Π±ΠΈΡΠ°Π΅Ρ ΠΎΠ±ΠΎΡΠΎΡΡ. ΠΠ½Π° ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΎΠ±ΡΠΈΠ΅ ΡΡ
Π΅ΠΌΡ, ΠΊΠ°ΡΡΡ ΠΈ Π±ΠΈΡΠΆΠ΅Π²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°ΡΠ°ΡΡ Π°Π΄Π°ΠΏΡΠ΅Ρ jQuery Ρ Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΡΠ°ΠΌΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ Highcharts. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠ·ΡΡΠΈΡΡ Π²ΡΠ΅ ΠΌΠΎΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, Π±Π΅Π· Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΠΈΠΌΠ΅ΡΡ Π΄Π΅Π»ΠΎ Ρ vanilla JavaScript.
ΠΠ°ΠΊ FusionCharts, ΠΎΠ½Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ (Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ IE6), ΡΡΡΡΠΎΠΉΡΡΠ²Π° ΠΈ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ. Π‘ΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Highcharts ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π²ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ, ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠ΅ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎΠΌ Π½Π° ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΡΠ΅ ΠΎΠ΄Π½ΠΎΠΉ ΠΊΡΡΡΠΎΠΉ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΡ Highcharts ΡΠ²Π»ΡΠ΅ΡΡΡ Π΄Π΅ΠΌΠΎ ΡΠ°Π·Π΄Π΅Π», ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΎΡΠ΅Π½Ρ Π±ΡΡΡΡΠΎ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΠΎ Π΄Π»Ρ Π½Π΅ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ ΡΠ΅Π»Π΅ΠΉ, ΠΏΠ»Π°ΡΠ½ΠΎ Π΄Π»Ρ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ .
4. Morris.js
Morris.js ΡΡΠΎ ΠΌΠΎΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Ρ ΡΠΈΡΡΡΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ. ΠΠ½Π° ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° jQuery ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ RaphaΓ«l JavaScript. ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΡΠ΅Π»Ρ Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΡ
Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. Π’ΠΈΠΏΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ, Π±ΡΡΡΠΊΠΎΠ²ΡΡ, Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ ΠΎΠ±Π»Π°ΡΡΡΠΌΠΈ ΠΈ ΠΊΠΎΠ»ΡΡΠ΅Π²ΡΡ. Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π·Π³Π»ΡΠ½ΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΊΠΎΠ΄Π°, ΠΈ ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΊΠ°ΠΆΡΡ, ΠΊΠ°ΠΊ Π½Π°ΡΠ°ΡΡ ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΠΌΠΈΠ½ΡΡ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π£ΠΏΡΠΎΡΠ΅Π½Π½Π°Ρ Π»ΠΈΡΠ΅Π½Π·ΠΈΡ BSD.
5. CanvasJS jQuery
CanvasJS jQuery β jQuery ΠΏΠ»Π°Π³ΠΈΠ½ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ CanvasJS. ΠΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡΡΠΎΠ³ΠΎ jQuery ΠΏΠ»Π°Π³ΠΈΠ½Π°, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ CanvasJS, Π½Π°ΡΡΠ΄Ρ Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ, ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΠΎΠ±ΡΡΠΈΡ ΠΈ ΡΠΊΡΠΏΠΎΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠ°ΡΠΈΠΊΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Ρ ΠΎΡΠΎΡΠΈ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ Π½Π°Π±ΠΎΡΠΎΠ² Π΄Π°Π½Π½ΡΡ ΠΈ Π±Π°Π·ΠΎΠ²ΡΠΉ ΠΏΠ°ΠΊΠ΅Ρ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ 24 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΈ Π²ΡΠ΅ ΠΎΠ½ΠΈ ΡΠ²Π»ΡΡΡΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌΠΈ.
ΠΠΎΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΠΎΡΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ jQuery UI.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΠΎ Π΄Π»Ρ Π½Π΅ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ ΡΠ΅Π»Π΅ΠΉ, ΠΏΠ»Π°ΡΠ½ΠΎ Π΄Π»Ρ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ ..
6. Cytoscape.js
Cytoscape. js Π½Π΅ ΠΏΠΎΡ
ΠΎΠΆΠ° Π½Π° ΠΎΠ±ΡΡΠ½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², Π½ΠΎ ΠΎΠ½Π° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π²Π½ΡΡΠΈΡΠ΅Π»ΡΠ½Π° ΠΈ Π·Π°ΡΠ»ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Π² ΡΡΠΎΡ ΡΠΏΠΈΡΠΎΠΊ. Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ
ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ ΠΎΠ±ΡΡΠΆΠ΄Π°Π»ΠΈ Π΄ΠΎ ΡΠΈΡ
ΠΏΠΎΡ, Cytoscape β Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π³ΡΠ°ΡΠΈΠΊΠΎΠ² jQuery (Ρ.Π΅. ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΈΠ»ΠΈ ΡΠ΅ΡΠΈ). ΠΠ½Π° ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π°, Π΅ΡΠ»ΠΈ Π΄Π΅Π»ΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΡΡ
ΡΠ΅ΡΠ΅Π²ΡΡ
Π΄Π°Π½Π½ΡΡ
Π² Π³ΡΠ°ΡΡ ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΌΡ Π΄Π°Π½Π½ΡΡ
. Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠ° ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, CommonJS/NodeJS, jQuery ΠΈ Meteor/Atmosphere. ΠΠ½Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ ΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΠΆΠ΅ΡΡΡ. ΠΠ»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΏΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ΡΡ ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ΅ Cytoscape.js.
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Cytoscape.js Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ»ΡΡΠ°Π΅Π² ΠΈ ΠΏΠΎΠ»Π½ΡΠΉ Π½Π°Π±ΠΎΡ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΡ ΡΠ΅ΡΡΠΎΠ².
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π‘ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΠΎ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. (LGPL3+)
7. Peity
ΠΠ½ΠΎΠ³Π΄Π° Π½ΡΠΆΠ½Ρ ΠΏΡΠΎΡΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ Π³ΡΠ°ΡΡ Ρ Π²Π°ΡΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, Π° Peity ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΡΠ°ΠΊΠΈΡ
ΡΠΈΡΡΠ°ΡΠΈΠΉ. ΠΠ½Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Ρ Π»Π΅Π³ΠΊΠΎΡΡΡΡ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΌΡ Π΄Π°Π½Π½ΡΡ
Π² Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅, Π±ΡΡΡΠΊΠΎΠ²ΡΠ΅, ΠΊΠΎΠ»ΡΡΠ΅Π²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΎΠΉ ΠΊΠΎΠ΄Π°. ΠΠ½ΠΈ Π² Π²ΠΈΠ΄Π΅ svg ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡ Ρ Π»ΡΠ±ΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠΌ svg ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Chrome, Opera, Firefox, IE9+ ΠΈ Safari. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ²Π΅ΡΠ°. ΠΡΠ°ΡΠΈΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Ρ, ΡΡΠΎΠ±Ρ ΠΎΡΡΠ°Π·ΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² Π΄Π°Π½Π½ΡΡ
. Π‘ΠΎΠ±ΡΡΠΈΡ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ. ΠΡΠΈΠ»Π°Π³Π°ΡΡΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Ρ ΡΠ΅Π°Π»ΡΠ½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Github.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π‘ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ ΠΏΠΎΠ΄ Π»ΠΈΡΠ΅Π½Π·ΠΈΠ΅ΠΉ MIT.
8. Easy Pie Chart
ΠΠΎΠ²ΠΎΡΡ ΠΎ ΠΏΡΠΎΡΡΠΎΡΠ΅ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ, Ρ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΏΠΎΠΌΡΠ½ΡΡΡ Easy Pie Chart. ΠΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Ρ ΡΡΠ½ΠΊΡΠΈΡ β ΠΎΠ½ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΏΡΠΎΡΡΡΠ΅ ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ. ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ canvas, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΡΠ°ΡΠΈΠΊΠΈ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²ΡΠ΅Π³ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π°. ΠΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²Ρ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΊΡΠ°Π½Π°, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ΅ΡΠΊΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ, Π΄Π°ΠΆΠ΅ Π½Π° Π΄ΠΈΡΠΏΠ»Π΅ΡΡ
retina.
ΠΠ»Π°Π³ΠΈΠ½ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ canvas. ΠΠ° IE 8 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΡΡΠ°ΡΡΡ Π²Π΅ΡΡΠΈΡΡ , Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ excanvas. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠ΅ Π΄Π΅ΠΌΠΎ Π½Π° Github.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π‘ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ ΠΏΠΎΠ΄ Π»ΠΈΡΠ΅Π½Π·ΠΈΠ΅ΠΉ MIT.
9. jqPlot
jqPlot ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΡΠ°Π²Π»ΡΡΡ ΡΠΈΡΡΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. jqPlot ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡ Π²Π°ΡΡΠ°ΡΡΡΡ ΡΠΈΠ»ΡΠ½ΠΎΠΉ βpluggabilityβ Π·Π°ΠΊΠ»ΡΡΠ°ΡΡΠ΅ΠΉΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²ΡΠ΅ ΡΠ°ΡΡΠ΅ΡΡ ΠΈ ΡΠ΅ΡΡΠ΅ΠΆΠΈ β Π»ΠΈΠ½ΠΈΠΈ, ΠΎΡΠΈ, ΡΠ΅Π½ΠΈ, ΡΠ΅ΡΠΊΠΈ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅ β ΡΠ΄Π΅Π»Π°Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΎΡΠΎΠ². ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΡΠΈΡΠΈΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½ΠΎΠ²ΡΡ ΡΠΈΠΏΠΎΠ² Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΡΡΠ³ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ.
ΠΠΎΠ΄ΡΠΎΠ±Π½ΡΠ΅ ΡΡΠΎΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ jqPlot Π΄ΠΎΡΡΡΠΏΠ½Ρ Π·Π΄Π΅ΡΡ. Π’Π°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ½Ρ ΠΏΡΠΈΠΌΠ΅ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΡ ΡΠ΅ΡΡΠΎΠ².
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: ΠΡΠΎΠ΅ΠΊΡ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. ΠΠ²ΠΎΠΉΠ½Π°Ρ Π»ΠΈΡΠ΅Π½Π·ΠΈΡ β MIT ΠΈ GPL Π²Π΅ΡΡΠΈΡ 2.
10. jQuery Sparklines
1436351687jQuery-sparklines
jQuery Sparklines (ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° Peity) ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΡΡΠ°Π²Π»ΡΡΡΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² HTML ΠΈΠ»ΠΈ ΡΠ΅ΡΠ΅Π· Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ JavaScript. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠ° Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π²ΡΡΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄Π½Ρ ΡΡΡΠΎΠΊΡ ΠΊΠΎΠ΄Π°. ΠΠ°ΠΌ Π΄Π°ΠΆΠ΅ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠΈΡΠ°ΡΡ ΠΊΠΎΠ΄ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ ΠΊΠΎΠ΄Π° (ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ βΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π΅Π³ΠΎβ), Π³Π΄Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π²Π΅ΡΡΠΈ Π΄Π°Π½Π½ΡΠ΅ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π΄Π»Ρ Π²Π°Ρ ΠΊΠΎΠ΄. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π²Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ ΠΌΠ΅ΡΠΊΠΈ Π² ΡΠΏΠ°ΡΠΊΠ»Π°ΠΉΠ½Ρ. ΠΠ½ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΡ Ρ Π²Π°ΡΠΈΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ. ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ Π°Π½Π½ΠΎΡΠ°ΡΠΈΠΈ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, Π²Π°ΠΌ Π»ΡΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΎ ΠΊΠΎΡΠΎΡΡΡ
ΠΌΡ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°Π»ΠΈ Π²ΡΡΠ΅.
Π ΡΠ»ΡΡΠ°Π΅ Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½, Π΅ΡΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ², ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π‘ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΠΎ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
11. jQuery.Gantt
ΠΠΎ ΡΠΈΡ
ΠΏΠΎΡ ΠΌΡ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΈΠ²ΡΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΠΏΠ»Π°Π³ΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Ρ ΡΠ΅ΡΠ΅Π²ΡΠΌΠΈ Π³ΡΠ°ΡΠΈΠΊΠ°ΠΌΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π»Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ
ΠΌΠΈΠ½ΠΈ-Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. ΠΠΎ Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΠΏΠ°Π½Π΅Π»Ρ Ρ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌΠΈ, Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ Gantt. ΠΠ»Π°Π³ΠΈΠ½ jQuery.Gantt ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Gantt, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Ajax Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ
Π² ΡΠΎΡΠΌΠ°ΡΠ΅ JSON. Π€ΡΠ½ΠΊΡΠΈΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΏΠΎΠΈΡΠΊ, Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π·Π°Π΄Π°Ρ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ²Π΅ΡΠ° Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ, ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²ΠΊΠ° ΠΏΡΠ°Π·Π΄Π½ΠΈΠΊΠΎΠ² ΠΈ Π΄ΡΡΠ³ΠΎΠ΅. Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎΠ± ΡΡΠΎΠΌ ΠΏΠ»Π°Π³ΠΈΠ½Π΅, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ°ΡΡΠΊΠ°ΠΆΠ΅Ρ ΠΎ Π΅Π³ΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°Ρ
ΠΈ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠ°Π²ΡΡΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Gantt, ΡΠΎ Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ Π²Π°ΠΌ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΡΡΠ°ΡΡΡ βΠ‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ Π³ΡΠ°ΡΠΈΠΊΠ° Gantt Ρ Webixβ, Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΡ Sergey Laptick, ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Gantt, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Webix Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ JavaScript Gantt, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠΉ dhtmlxGantt. ΠΠ΅ ΡΡΠΎΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡΡ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: ΠΡΠΎΠ΅ΠΊΡ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ. ΠΠ²ΠΎΠΉΠ½Π°Ρ Π»ΠΈΡΠ΅Π½Π·ΠΈΡ β MIT ΠΈ GPL.
ΠΡΠ²ΠΎΠ΄Ρ
Π‘ΠΏΠΈΡΠΎΠΊ ΠΌΠΎΠΈΡ
Π»ΡΠ±ΠΈΠΌΡΡ
jQuery-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² β ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, ΡΠ΅Ρ
, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» β ΠΏΠΎΠ΄ΠΎΡΠ΅Π» ΠΊ ΠΊΠΎΠ½ΡΡ. ΠΠ½ΠΈ ΠΎΡ
Π²Π°ΡΡΠ²Π°ΡΡ ΠΏΠΎΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠΈΠΏ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ.
ΠΡΡΠΎΠΊΠΈΡ ΠΊΠΎΠ½Π²Π΅ΡΡΠΈΠΉ!
14-03-2016
ΠΡΠ°ΡΠΈΠΊΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery ΠΏΠ»Π°Π³ΠΈΠ½Π° Flot
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π΄Π°Π½Π½ΡΡ , ΡΡΠ°Π·Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ ΠΈΡ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΡΡ ΠΈ ΠΏΡΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ. ΠΠ»Ρ ΡΡΠΈΡ ΡΠ΅Π»Π΅ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, Π½ΠΎ ΠΌΠ½Π΅ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π½ΡΠ°Π²ΡΡΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ, Ρ.ΠΊ. ΠΏΠΎ Π½ΠΈΠΌ ΠΏΡΠΎΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ½ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΡ ΡΠΎΠ±ΡΡΠΈΡ ΠΈ ΡΠΏΡΠΎΠ³Π½ΠΎΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π΅ Π΅Π³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.
ΠΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π·Π°Π΄Π°ΡΠΈ
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΡΡΡΠΎΠΈΡΡ Π³ΡΠ°ΡΠΈΠΊ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ Π΄Π°Π½Π½ΡΡ . ΠΠ»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° Π°Π½Π°Π»ΠΈΠ·Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠ΄ΡΠΌΠ°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΏΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΡΠΌ ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΡΠΎΡΠΊΠ°Ρ .
Π ΠΈΡΠΎΠ³Π΅ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π½Π΅ΡΡΠΎ, Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡΠ΅Π΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Π² ΡΠ΅ΡΠ²ΠΈΡΠ΅ Google Analytics (ΠΎΠ½ΠΈ ΠΌΠ½Π΅ ΠΎΡΠ΅Π½Ρ Π½ΡΠ°Π²ΡΡΡΡ)
ΠΠΎΠΈΡΠΊ ΡΠ΅ΡΠ΅Π½ΠΈΡ
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΡΡ ΠΏΡΠΈΠΊΡΡΡΠΈΡΡ ΡΡΠ°ΡΠΈΡΡΠΈΠΊΡ, Π½Π°ΠΏΠΈΡΠ°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ API BitrixβΠ° ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΡΠ°ΠΉΡΠ°Ρ
ΠΏΠΎΠ΄ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π±ΠΈΡΡΠΈΠΊΡΠ°.
Π ΡΠΎΠΌΡ ΠΆΠ΅, Π½Π° ΡΡΡ ΠΌΡΡΠ»Ρ ΠΏΠΎΠ΄ΡΠ°Π»ΠΊΠΈΠ²Π°Π΅Ρ Π½Π°Π»ΠΈΡΠΈΠ΅ Π² Π±ΠΈΡΡΠΈΠΊΡΠ΅ ΠΌΠΎΠ΄ΡΠ»Ρ Π°Π½Π°Π»ΠΈΡΠΈΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΌΠ΅Π΅Ρ ΡΠ΅ΡΡΠΈΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°.
ΠΠ΅Π± Π°Π½Π°Π»ΠΈΡΠΈΠΊΠ° ΠΠΈΡΡΠΈΠΊΡ: Π³ΡΠ°ΡΠΈΠΊ ΠΏΠΎΡΠ΅ΡΠ°Π΅ΠΌΠΎΡΡΠΈ ΡΠ°ΠΉΡΠ° ΠΏΠΎ ΡΠ°ΡΠ°ΠΌ.
ΠΠΎ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π±ΠΈΡΡΠΈΠΊΡ ΡΠΌΠ΅Π΅Ρ ΡΡΡΠΎΠΈΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ. ΠΠ° ΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡΡ, Ρ.ΠΊ. ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΠΈΠ΄ΠΈΡ Π³ΠΎΡΠΎΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠΎ-Π»ΠΈΠ±ΠΎ Π½Π° Π½Π΅ΠΉ Π²ΡΠ΄Π΅Π»ΠΈΡΡ. Π ΡΠΎΠΌΡ ΠΆΠ΅, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π·Π°Ρ ΠΎΡΠ΅Ρ ΠΏΠΎΠ΄ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π²Ρ ΠΎΠ΄Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅, ΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΡΠΈΠ΄ΡΡΡΡ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π·Π°Π½ΠΎΠ²ΠΎ. ΠΡΠΎ Π½Π΅ ΡΠ°ΠΌΡΠΉ Π±ΡΡΡΡΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄.
Π’.ΠΊ. ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ Π±ΠΈΡΡΠΈΠΊΡΠ° Π·Π°Π΄Π°ΡΡ Π½Π΅ ΡΠ΅ΡΠΈΡΡ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π½Π°ΠΉΡΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠ΅Π±ΡΠ΅ΠΌΡΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π». Π§ΡΠΎΠ±Ρ Π³ΡΠ°ΡΠΈΠΊΠΈ Π±ΡΠ»ΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ Π½Π° ΠΊ. ΡΡΠΎΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΈ ΡΠ°Π΄ΡΠ΅Ρ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΎΡΡΠΎΡΠΎΠΉ ΠΈ Π»ΠΎΠ³ΠΈΡΠ½ΠΎΡΡΡΡ.
ΠΠΎΡΠ»Π΅ Π°Π½Π°Π»ΠΈΠ·Π° Π²ΡΠ΅Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΎΡΡΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π²Π° Π²Π°ΡΠΈΠ°Π½ΡΠ° β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ API Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΎΡ Google (ΡΡΡΠ»ΠΊΠ°) ΠΈ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² jQuery ΠΏΠ»Π°Π³ΠΈΠ½Π΅ Flot (ΡΡΡΠ»ΠΊΠ°).
ΠΡΠ±ΠΎΡ ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Π³ΡΠ°ΡΠΈΠΊΠ°
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΡΠ΅ΠΌ ΡΡΠΎ ΡΠΌΠ΅Π΅Ρ Π΄Π΅Π»Π°ΡΡ Π²ΡΠ±ΡΠ°Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΡΠΎΡΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ². ΠΠ»Ρ ΠΌΠΎΠΈΡ ΡΠ΅Π»Π΅ΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ:
- ΠΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠΎΡΠ΅ΠΊ Π½Π° Π³ΡΠ°ΡΠΈΠΊΠ΅ ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π² ΡΡΠΈΡ ΡΠΎΡΠΊΠ°Ρ (ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ)
- ΠΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΎΡΡΠ΅Π·ΠΊΠΎΠ² Π³ΡΠ°ΡΠΈΠΊΠ° Π΄Π»Ρ Π΄Π΅ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΠΎΡΡΠ° (ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ)
- ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Ajax (ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ)
Π‘ΠΏΠΎΡΠΎΠ± Π²Π²ΠΎΠ΄Π° Π½Π°ΡΠ°Π»ΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ Ρ Π½Π΅ Π²ΠΈΠΆΡ ΡΠΌΡΡΠ»Π° ΠΌΡΠ΄ΡΠΈΡΡ Ρ Ρ
ΠΈΡΡΡΠΌΠΈ ΠΈ Π½Π΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ.
Π€ΠΎΡΠΌΠ° Π²ΡΠ±ΠΎΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° Π½Π° Π³ΡΠ°ΡΠΈΠΊΠ΅
ΠΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ Β«ΠΡΠΊΠ°ΡΡΒ» Π΄Π°Π½Π½ΡΠ΅ Ρ ΡΠΎΡΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡΡΡ ΡΠ΅ΡΠ΅Π· Ajax ΠΊ ΡΠΊΡΠΈΠΏΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Π½Π°ΠΌ Π΄Π°Π½Π½ΡΠ΅ Π² Π²ΠΈΠ΄Π΅ JSON, Π² ΡΠΎΡΠΌΠ°ΡΠ΅, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠΌ ΠΏΠ»Π°Π³ΠΈΠ½Ρ. ΠΠΎΡΠ»Π΅ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅Ρ Π³ΡΠ°ΡΠΈΠΊ.
ΠΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΠ΅, Π³ΡΠ°ΡΠΈΠΊ ΠΎΡΡΠΈΡΡΠ΅ΡΡΡ Π·Π°Π½ΠΎΠ²ΠΎ, Π½ΠΎ ΡΡΡΠ°Π½ΠΈΡΠ° Π½Π΅ ΠΏΠ΅ΡΠ΅Π·Π°Π³ΡΡΠ·ΠΈΡΡΡ. ΠΠ° Π²ΡΠ΅ ΡΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΡ ΠΎΠ΄ΠΈΡ Π½Π΅ Π±ΠΎΠ»ΡΡΠ΅ ΡΠ΅ΠΊΡΠ½Π΄Ρ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ ΠΎΡΠ΅Π½Ρ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΌ.
ΠΡΠ²ΠΎΠ΄ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π½Π° Π³ΡΠ°ΡΠΈΠΊΠ΅
ΠΠ»Π°Π³ΠΈΠ½ Π²ΡΠ²Π΅Π΄Π΅Ρ ΡΡΠΎΠ»ΡΠΊΠΎ ΠΊΡΠΈΠ²ΡΡ , ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΡ Π΅ΠΌΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π΄ΠΈΠΌ Π² ΠΎΠ±ΡΠ΅ΠΊΡΠ΅ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ. ΠΠΎΠΆΠ½ΠΎ Π²ΡΠ²Π΅ΡΡΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄Π½Ρ ΠΊΡΠΈΠ²ΡΡ. ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠ°ΡΠΈΡΡΠΈΠΊΠΈ Π² ΠΌΠΎΡΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ Π·Π°ΠΏΠΈΡΠΈ Π½Π° reception:
ΠΡΠ°ΡΠΈΠΊ Π·Π°Π²Π΅Π΄Π΅Π½ΠΈΡ Π·Π°ΠΏΠΈΡΠ΅ΠΉ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅ΡΠ΅ Π·Π°ΠΏΠΈΡΠ΅ΠΉ Π½Π° Reception
ΠΠΎΠΆΠ½ΠΎ Π²ΡΠ²Π΅ΡΡΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΡΠΈΠ²ΡΡ
.
ΠΡΠ°ΡΠΈΠΊ Π·Π°Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΈ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π·Π°ΠΏΠΈΡΠ΅ΠΉ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅ΡΠ΅ Π·Π°ΠΏΠΈΡΠΈ Π½Π° Reception
ΠΠ° ΠΎΡΡΡ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΡΡΠΎ ΡΠ³ΠΎΠ΄Π½ΠΎ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²ΠΎΡ ΡΡΠΎΡ ΠΆΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π² ΠΌΠΎΡΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ Π·Π°ΡΠ²ΠΎΠΊ Ρ Π²Π΅Π± ΡΠΎΡΠΌ Π²ΡΠ²ΠΎΠ΄ΠΈΡ ΠΏΠΎ ΠΎΡΠΈ Π°Π±ΡΡΠΈΡΡ ΡΡΠ΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ Π·Π°ΡΠ²ΠΊΠΈ, Π° ΠΏΠΎ ΠΎΡΠΈ ΠΎΡΠ΄ΠΈΠ½Π°Ρ Π΄Π°ΡΡ.
Π‘ΡΠ΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ Π·Π°ΡΠ²ΠΊΠΈ Ρ Π²Π΅Π± ΡΠΎΡΠΌΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π² Internet Explorer
ΠΠ»Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Flot ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Canvas. ΠΡΠΎΡ ΡΠ°ΠΊΡ Π·Π°ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΡΠΈΠ±Π΅Π³Π°ΡΡ ΠΊ ΡΡ ΠΈΡΡΠ΅Π½ΠΈΡΠΌ, Ρ.ΠΊ. IE Π²Π΅ΡΡΠΈΠΈ Π½ΠΈΠΆΠ΅ 9ΠΎΠΉ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ. ΠΠ»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ Π² ΡΡΠ»ΠΎΠ²Π½ΠΎΠΌ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ExplorerCanvas (ΡΠΊΠ°ΡΠ°ΡΡ), ΡΠΎΠ³Π΄Π° Π²ΡΡ Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ =)
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½?
ΠΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ΄ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Ρ Π½Π΅ Π²ΠΈΠΆΡ ΡΠΌΡΡΠ»Π°, ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΠΆ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΠ±ΡΡΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ. ΠΠ΄Π΅ΡΡ Ρ ΠΏΡΠΈΠ²Π΅Π΄Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅Ρ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π³ΡΠ°ΡΠΈΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π».
//ΡΠΎΡΠΌΠ°Ρ Π΄Π°ΡΡ var timeFormat = "%d.%m.%y"; // ΡΠ²ΠΎΠΉΡΡΠ²Π° Π³ΡΠ°ΡΠΈΠΊΠ° var plot_conf = { Β Β series: { Β Β Β Β lines: { Β Β Β Β Β Β show: true, Β Β Β Β Β Β lineWidth: 2 Β Β Β Β }, Β Β Β Β points: { Β Β Β Β Β Β show: true Β Β Β Β } Β Β }, Β Β selection: {mode: "x"}, Β Β xaxis: { Β Β Β Β mode: "time", Β Β Β Β timeformat: timeFormat Β Β }, Β Β legend:{ Β Β Β Β show: true, Β Β Β Β noColumns: 6, Β Β Β Β container: $("#legend") Β Β }, Β Β grid: { Β Β Β Β backgroundColor:{ Β Β Β Β Β Β colors: ["#fff", "#eee"] Β Β Β Β }, Β Β Β Β hoverable: true, Β Β Β Β clickable: true Β Β } }; //ΡΠ²ΠΎΠΉΡΡΠ²Π° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ var over_conf = { Β Β series: { Β Β Β Β lines: { Β Β Β Β Β Β show: true, Β Β Β Β Β Β lineWidth: 1 Β Β Β Β }, Β Β Β Β shadowSize: 0 Β Β }, Β Β xaxis: { Β Β Β Β ticks: [], Β Β Β Β mode: "time", Β Β Β Β timeformat: timeFormat Β Β }, Β Β yaxis: { Β Β Β Β ticks: [], Β Β Β Β min: 0, Β Β Β Β autoscaleMargin: 0.
1 Β Β }, Β Β selection: { Β Β Β Β mode: "x" Β Β }, Β Β legend:{ Β Β Β Β show: false Β Β }, Β Β grid: { Β Β Β Β backgroundColor:{ Β Β Β Β Β Β colors: ["#fff", "#eee"] Β Β Β Β } Β Β } }
Π‘ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ Π²ΡΠ²Π΅ΡΡΠΈ Π³ΡΠ°ΡΠΈΠΊ Π»Π΅Π³ΠΊΠΎ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠ΅Π² Π² ΠΊΠΎΠ΄ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² (ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ). ΠΡΠ»ΠΈ ΡΡΠΎ-Π»ΠΈΠ±ΠΎ Π½Π΅ΠΏΠΎΠ½ΡΡΠ½ΠΎ, ΡΠΎ Π²ΡΡ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π² Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠΌ API (ΡΠΈΡΠ°ΡΡ)
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°Ρ , Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π½Π°ΡΠ΅ΠΉ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΡΠ»ΠΊΡ Π½Π° Π½ΠΈΡ Ρ Π΄Π°ΡΡ Π½Π΅ ΠΌΠΎΠ³Ρ. ΠΠΎ Π΅ΡΠ»ΠΈ Ρ ΠΊΠΎΠ³ΠΎ-ΡΠΎ Π΅ΡΡΡ Π²ΠΎΠΏΡΠΎΡΡ ΠΏΠΎ ΡΠ°Π±ΠΎΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π°, Ρ ΠΏΠΎΡΡΠ°ΡΠ°ΡΡΡ ΠΎΡΠ²Π΅ΡΠΈΡΡ
ΡΠ²Π΅ΡΠΎΠ² | Chart.js
ΠΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠ° ΡΠ²Π΅ΡΠ°:
- Π΄Π»Ρ Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΡΠΎΠ½Π° ΠΈ Π³ΡΠ°Π½ΠΈΡΡ ;
- Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ ΡΡΠΈΡΡΠ° .
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²Π΅ΡΡ ΡΠΎΠ½ Ρ ΠΎΠ»ΡΡΠ°.
Π¦Π²Π΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΡΠ»ΠΈ ΡΠ²Π΅Ρ Π½Π΅ ΡΠΊΠ°Π·Π°Π½, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΈΠ· Chart.
: defaults
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ | Π’ΠΈΠΏ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ | ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ |
---|---|---|---|
backgroundColor | Π¦Π²Π΅Ρ | Π¦Π²Π΅Ρ ΡΠΎΠ½Π° | rgba(0, 0, 0, 0.1) |
borderColor | Π¦Π²Π΅Ρ | Π¦Π²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ | rgba(0, 0, 0, 0.1) |
ΡΠ²Π΅Ρ 9 0022 | Π¦Π²Π΅Ρ | Π¦Π²Π΅Ρ ΡΡΠΈΡΡΠ° | #666 |
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ±ΡΠΎΡΠΈΡΡ ΡΠ²Π΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΎΠ±Π½ΠΎΠ²ΠΈΠ² ΡΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° Chart.defaults
:
ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΠ²Π΅ΡΠ°
ΠΡΠ»ΠΈ Π²Π°ΡΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π°Π±ΠΎΡΠΎΠ² Π΄Π°Π½Π½ΡΡ
, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ Π½Π°Π±ΠΎΡΡ Π΄Π°Π½Π½ΡΡ
Π½Π΅ΡΠ°Π·Π»ΠΈΡΠΈΠΌΡΠΌΠΈ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ backgroundColor
ΠΈ borderColor
Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ
:
ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ²Π΅ΡΠΎΠ² Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ
ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ, ΠΊΠΎΡΠΎΡΡΡ Π²Ρ Π½Π΅ Ρ
ΠΎΡΠ΅Π»ΠΈ Π±Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ
ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Ρ ΠΏΡΠ΅Π΄ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΌΠΈ ΠΈΠ»ΠΈ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΌΠΈ ΠΏΠ°Π»ΠΈΡΡΠ°ΠΌΠΈ.
Π¦Π²Π΅ΡΠΎΠ²Π°Ρ ΠΏΠ°Π»ΠΈΡΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π½Π΅Ρ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΡΠ²Π΅ΡΠ°ΠΌ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Colors
. ΠΠ½ Π±ΡΠ΄Π΅Ρ ΡΠΈΠΊΠ»ΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΎΡ
ΠΎΠ΄ΠΈΡΡ ΡΠ΅ΡΠ΅Π· ΠΏΠ°Π»ΠΈΡΡΡ ΠΈΠ· ΡΠ΅ΠΌΠΈ ΡΠΈΡΠΌΠ΅Π½Π½ΡΡ
ΡΠ²Π΅ΡΠΎΠ² Chart.js:
ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½:
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ UMD-Π²Π΅ΡΡΠΈΡ Chart.js, ΡΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ Π±ΡΠ΄Π΅Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ Π΅Π³ΠΎ, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ² Π΄Π»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° enable
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ false
:
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠ²Π΅ΡΠΎΠ² ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π±Π΅Π· ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠ²Π΅ΡΠΎΠ² Π΄Π»Ρ Π³ΡΠ°Π½ΠΈΡΡ ΠΈΠ»ΠΈ ΡΠΎΠ½Π°.
ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠ²Π΅ΡΠΎΠ² Π²ΡΠ΅Π³Π΄Π° ΠΎΠΊΡΠ°ΡΠΈΠ²Π°Π» Π²Π°ΡΠΈ Π½Π°Π±ΠΎΡΡ Π΄Π°Π½Π½ΡΡ
, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ
Π½Π°Π±ΠΎΡΠΎΠ² Π΄Π°Π½Π½ΡΡ
Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄Π»Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°
Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ true:
Π Π°ΡΡΠΈΡΠ΅Π½Π½ΡΠ΅ ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΠΏΠ°Π»ΠΈΡΡΡ
Π‘ΠΌ. ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ) Π΄Π»Ρ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π°Π΄ΡΡ Π²Π°ΠΌ Π±ΠΎΠ»ΡΡΠ΅ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ ΠΏΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ ΡΠ²Π΅ΡΠΎΠ²ΡΡ
ΠΏΠ°Π»ΠΈΡΡ.
Π¦Π²Π΅ΡΠΎΠ²ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΡ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ²Π΅Ρ Π² Π²ΠΈΠ΄Π΅ ΡΡΡΠΎΠΊΠΈ Π² Π»ΡΠ±ΠΎΠΉ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π½ΠΎΡΠ°ΡΠΈΠΉ:
ΠΠΎΡΠ°ΡΠΈΡ | ΠΡΠΈΠΌΠ΅Ρ | ΠΡΠΈΠΌΠ΅Ρ Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ |
---|---|---|
Π¨Π΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½ΡΠΉ (ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅) | #36A2EB | #36A2EB80 |
RGB (ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅) ΠΈΠ»ΠΈ RGBA (ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅) | rgb(54, 162, 235) 9 0022 | rgba(54, 162, 235, 0.5) |
HSL (ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅) ΠΈΠ»ΠΈ HSLA (ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅) | hsl(204, 82%, 57%) 9004 2 | hsla(204, 82%, 57%, 0,5) |
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΡ CanvasPattern (ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅) ΠΈΠ»ΠΈ CanvasGradient (ΠΎΡΠΊΡΡΠ²Π°Π΅ΡΡΡ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅) Π²ΠΌΠ΅ΡΡΠΎ ΡΠ²Π΅ΡΠ° ΡΡΡΠΎΠΊΠΈ Π΄Π»Ρ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ
ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ².
Π£Π·ΠΎΡΡ ΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ ΡΠ·ΠΎΡΠΎΠΌ ΠΈΠ· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠ°Π»ΠΈΠ²ΠΊΠ° ΡΠ·ΠΎΡΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ Π·ΡΠΈΡΠ΅Π»ΡΠΌ Ρ Π½Π°ΡΡΡΠ΅Π½ΠΈΡΠΌΠΈ Π·ΡΠ΅Π½ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ Π΄Π°Π»ΡΡΠΎΠ½ΠΈΠ·ΠΌΠΎΠΌ ΠΈΠ»ΠΈ ΡΠ°ΡΡΠΈΡΠ½ΡΠΌ Π·ΡΠ΅Π½ΠΈΠ΅ΠΌ) Π»Π΅Π³ΡΠ΅ ΠΏΠΎΠ½ΡΡΡ Π²Π°ΡΠΈ Π΄Π°Π½Π½ΡΠ΅ (opens new window).
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Patternomaly (opens new window) Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² Π΄Π»Ρ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π½Π°Π±ΠΎΡΠΎΠ² Π΄Π°Π½Π½ΡΡ :
jQuery Chart & Graph Plugins β Π‘ΡΡΠ°Π½ΠΈΡΠ° 1
ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΠΊΡΡΠ³ΠΎΠ²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ jQuery, Π»ΠΈΠ½Π΅ΠΉΡΠ°ΡΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΠΊΠΎΠ»ΡΡΠ΅Π²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π² Π½Π°ΡΠ΅ΠΌ ΡΠ°Π·Π΄Π΅Π»Π΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² jQuery. Π‘ΡΡΠ°Π½ΠΈΡΠ° 1 .
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
OrgChart β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ, Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΈ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΡΡΡΠΊΡΡΡΡ Π²Π°ΡΠ΅ΠΉ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ, ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ³ΠΎ, ΠΏΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΠ°Π½ΡΠ° Π΄Π»Ρ ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π°ΡΠΈΡ Π·Π°Π΄Π°Ρ Π² Π²Π°ΡΠ΅ΠΌ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΌ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ, Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠΉ, Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠΎΠΉ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠΉ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ΅.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ JavaScript/jQuery, ΠΏΠΎΠΌΠΎΠ³Π°ΡΡΠΈΠΉ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Ρ ΠΎΠ»ΡΡΠ° HTML5.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ»Π°Π³ΠΈΠ½ jQuery, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠΉ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ JSON Π² Π²ΠΈΠ΄Π΅ ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌΡΡ ΠΈ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π΅ΠΌΡΡ Π΄ΡΠ΅Π²ΠΎΠ²ΠΈΠ΄Π½ΡΡ ΡΡΡΡΠΊΡΡΡ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ΠΈ ΠΏΠ°ΠΏΠΎΠΊ, ΡΠ΅ΠΌΠ΅ΠΉΠ½ΡΠ΅ Π΄Π΅ΡΠ΅Π²ΡΡ ΠΈΠ»ΠΈ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΠΈ.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ jQuery Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π·Π½ΠΎΡΠ²Π΅ΡΠ½ΡΡ (ΡΠ΅Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ) ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΠΎΠ² Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠ² Π΄Π°Π½Π½ΡΡ , ΡΡΠΎΠ²Π½Π΅ΠΉ Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ Π»ΡΠ±ΡΡ Π΄ΡΡΠ³ΠΈΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Π΅ΠΉ, ΡΡΠ΅Π±ΡΡΡΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
progresspieSVG β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ, Π½ΠΎ Π½Π°Π΄Π΅ΠΆΠ½ΡΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π² Π²ΠΈΠ΄Π΅ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠΉ ΠΈΠ»ΠΈ ΠΊΠΎΠ»ΡΡΠ΅Π²ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈΠ»ΠΈ ΡΠ°ΠΉΠΌΠ΅ΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΡΡΠ΅ΡΠ° Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° SVG.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
Flot β ΡΡΠΎ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript, ΡΠ°Π±ΠΎΡΠ°ΡΡΠ°Ρ Ρ jQuery Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈΠ»ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ².
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠΎΡΡΡΠ΅, Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΠ°Π½ΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Ρ ΠΎΠ»ΡΡΠ° HTML5.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ»Π°Π³ΠΈΠ½ SkillProgress jQuery ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠΈΠ»Π»ΡΡΡΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π°ΡΠΈ Π½Π°Π²ΡΠΊΠΈ, ΠΎΠΏΡΡ, ΡΠ΅Π»ΠΈ ΠΈΠ»ΠΈ ΡΡΠΎ-Π»ΠΈΠ±ΠΎ Π΅ΡΠ΅, ΡΡΠΎ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡ Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
Donutty β ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript/jQuery, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠ»Π°Π²Π½ΠΎ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅, ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅ ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅/ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅/ΠΊΠΎΠ»ΡΡΠ΅Π²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈΠ»ΠΈ ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅/ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΈΠ½Π΄ΠΈΠΊΠ°ΡΠΎΡΡ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ SVG ΠΈ CSS3.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ΅Π³ΠΊΠΈΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ jQuery, ΡΠΏΡΠΎΡΠ°ΡΡΠΈΠΉ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ , Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ SVG Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ JavaScript, CSS ΠΈ HTML.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΡΠ½ΡΠΉ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΠ°Π½ΡΠ° jQuery, ΠΏΠΎΠΌΠΎΠ³Π°ΡΡΠΈΠΉ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΠ°Π½ΡΠ° Π΄Π»Ρ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌΠΈ.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ΅Π³ΠΊΠΈΠΉ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΎΡ ΡΡΠ°ΠΊΡΠΈΠΉ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΈΡΡΠ΅Ρ Π΄ΡΠΎΠ±Ρ Π² Π²ΠΈΠ΄Π΅ Π·Π°ΠΊΡΠ°ΡΠ΅Π½Π½ΡΡ ΠΊΡΡΠ³ΠΎΠ², ΠΊΠ°ΠΊ Π½Π° ΠΊΡΡΠ³ΠΎΠ²ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ jQuery ΠΈ HTML/CSS Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»ΠΈΠ»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠΊΠ°Π»Ρ, Π³Π΄Π΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΌΠΎΠ³ΡΡ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΡΡΠΈΡΠΌΠΈ ΠΈ Π΄Π΅ΡΠ°Π»ΡΠΌΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ, ΡΠ΅Π»ΠΊΠ°Ρ Π²Π΅ΡΡΠΈΠ½Ρ Π² ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½Π°Π»ΡΠ½ΠΎΠΉ ΡΠ΅ΠΏΠΎΡΠΊΠ΅.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠΎΡΠ΅ΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π°ΡΠΈΡ ΡΠΈΡΠ»ΠΎΠ²ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°Ρ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ, ΠΎΠΏΠΈΡΠ°Π½ΠΈΡΠΌΠΈ, ΠΌΠ΅ΡΠΊΠ°ΠΌΠΈ, Π»Π΅Π³Π΅Π½Π΄Π°ΠΌΠΈ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΡΠ΅ΡΠΎΠΊ ΠΏΠΎ ΠΎΡΡΠΌ x/y.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
Π‘ΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½ΠΎΠ²ΡΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ barChat, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΠ΄ΠΈΠ½ΠΎΡΠ½ΡΡ ΠΈΠ»ΠΈ ΡΠ»ΠΎΠΆΠ΅Π½Π½ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌ ΠΈΠ· Π½Π°Π±ΠΎΡΠΎΠ² Π΄Π°Π½Π½ΡΡ , ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ JS.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ, Π³ΠΈΠ±ΠΊΠΈΠΉ, ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ ΡΠΊΠ°Π»Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π² Ρ ΡΠΎΠ½ΠΎΠ»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌ (ΡΡΠΎΠ»Π±ΡΠΎΠ²) jQuery Π΄Π»Ρ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌ Ρ ΠΎΠ΄Π½ΠΎΠΉ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΠΎΠΉ ΠΈΠ»ΠΈ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌ Ρ Π½Π°ΠΊΠΎΠΏΠ»Π΅Π½ΠΈΠ΅ΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
- ΠΠ΅ΠΌΠΎΠ‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΡΠ½ΡΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΠΈΡΠΎΠ²Π°ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅, ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠ΅, ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Ρ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΡΠΌ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ JavaScript ΠΈ Ρ
ΠΎΠ»ΡΡ HTML5.