5 Π»ΡΡΡΠΈΡ jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²
ΠΡΠ»ΠΈ Π²Ρ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ Ρ ΡΠΈΡΡΠ°ΠΌΠΈ, ΡΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ ΠΈΡ Π½Π΅ ΡΠ°ΠΊ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΡΡΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΊΠΎΠ³Π΄Π° ΠΈΡ ΠΎΡΠ΅Π½Ρ ΠΌΠ½ΠΎΠ³ΠΎ. ΠΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π² Π²ΠΈΠ΄Π΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈΠ»ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ Π² ΡΡΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ Ρ ΠΏΠΎΠ΄Π΅Π»ΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΈΠ· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ Π²Π°ΠΌ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡΡ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.
Π ΡΠ°ΠΊ ΡΡΠ°Π·Ρ ΠΏΡΠΈΡΡΡΠΏΠΈΠΌ.
Flot β ΡΡΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½Π΅ΠΌΠ½ΠΎΠ³ΠΈΡ jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ². ΠΡ ΠΏΡΠΎΡΡΡΡ ΠΈ ΡΠ°ΠΌΡΡ ΡΠ»ΠΎΠΆΠ½ΡΡ .
ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠ· ΠΏΡΠΈΠΌΠ΅ΡΠΎ:
- ΠΏΡΠΎΡΡΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊ
- ΡΠ°Π·Π½ΡΠ΅ ΡΠΈΠΏΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²
- Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ (ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΡΠ΅Π· AJAX)
Hightcharts β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠΊΡΠΈΠΏΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°Π·Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ.
ΠΡΠΈΠΌΠ΅ΡΡ:
- ΠΡΠΎΡΡΠΎΠΉ ΠΏΡΠΈΠΌΠ΅Ρ
- ΠΠ°Π³ΡΡΠ·ΠΊΠ° ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²ΠΎΠΌ AJAX
- ΠΠΎΠ»ΠΎΠ½ΠΎΡΠ½ΡΠΉ Π²ΠΈΠ΄
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π²Π΅ΡΡ ΡΠΏΠΈΡΠΎΠΊ Π΄Π΅ΠΌΠΎ.
Morris.js β ΡΡΠΎ ΠΎΡΠ΅ΡΠ΅Π΄Π½ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° ΡΠ°ΠΉΡΠ΅, Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π½Π° jQuery.
ΠΡΠ΅ Π΄Π΅ΠΌΠΎ ΠΏΡΠΈΠΌΠ΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΡΠΎΠΉΠ΄Ρ Π½Π° Π³Π»Π²Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ° ΠΏΠ»Π°Π³ΠΈΠ½Π°.
CanvasJS β ΡΡΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½Π°ΠΈΠ»ΡΡΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π² Π²ΠΈΠ΄Π΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΠ»Π°Π³ΠΈΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ canvas, Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠ΅Ρ Π΄Π°Π½Π½ΡΡ .
Peity β ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π΅Π»Π°Π΅Ρ ΠΌΠΈΠ½ΠΈ Π²Π΅ΡΡΠΈΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΌΠ°Π»ΠΎ ΠΌΠ΅ΡΡΠ° Π½Π° ΡΠ°ΠΉΡΠ΅ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΡΠΎ ΡΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π»Ρ Π²Π°Ρ.
ΠΠ° ΡΡΠΎΠΌ Π²ΡΠ΅, ΡΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° JavaScript/jQuery. ΠΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ, Π½ΠΎ Ρ ΡΡΠ°ΡΠ°Π»ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΠΎΠ΅ Π»ΡΡΡΠ΅Π΅ Π΄Π»Ρ Π²Π°Ρ.
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π°, Π° ΡΠ°ΠΊ ΠΆΠ΅ Π²ΡΠ΅Ρ
ΠΎΡΡΠ°Π»ΡΠ½ΡΡ
, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΠΏΠΈΡΡΠ²Π°Π» Π²ΡΡΠ΅ Π² ΡΡΠΎΠΉ Π·Π°ΠΏΠΈΡΠΈ β ΠΌΠΎΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, Ρ ΠΈΠ·Π³ΠΈΠ±Π°ΠΌΠΈ, Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΡΡΠΎΠ»Π±ΠΈΠΊΠΈ, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. Π§ΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π΅ β Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΠΉΡΠΈ Π½Π° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ°ΠΉΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ.
ΠΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ open source (Π² ΠΎΡΠΊΡΡΡΠΎΠΌ Π΄ΠΎΡΡΡΠΏΠ΅) ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΡΠ³ΠΎΠ΄Π½ΠΎ ΠΈ Π³Π΄Π΅ ΡΠ΄ΠΎΠ±Π½ΠΎ β Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π·Π°ΠΏΡΠ΅ΡΠΎΠ².
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ ΠΎΡΡΠ°Π»ΠΈΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΏΡΠΎΡΡ β ΠΏΠΈΡΠΈΡΠ΅ ΠΈΡ Π½ΠΈΠΆΠ΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.
20 Π»ΡΡΡΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ JavaScript Π΄Π»Ρ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² | by Tri Lan
ΠΠ΅ΡΠ΅Π΄ ΠΏΡΠΈΠ½ΡΡΠΈΠ΅ΠΌ Π²Π°ΠΆΠ½ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π±ΠΈΠ·Π½Π΅ΡΠΌΠ΅Π½ ΡΠΏΠ΅ΡΠ²Π° Π°Π½Π°Π»ΠΈΠ·ΠΈΡΡΠ΅Ρ Π΄Π°Π½Π½ΡΠ΅. Π Π»ΡΠ±ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΡΠ½ΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΌ Π΄Π°Π½Π½ΡΡ , ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·Π²Π»Π΅ΡΡ ΡΠ΅Π½Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ. Π‘ ΠΏΡΠΈΡ ΠΎΠ΄ΠΎΠΌ Big Data ΡΡΠ°ΡΡΠ΅ Π΄ΠΎΠ±ΡΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ Excel ΡΡΡΠ°ΡΠΈΠ»ΠΈ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎΡΡΡ, ΠΈ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°Π»ΠΎΡΡ Π½Π°ΠΉΡΠΈ ΡΡΠΎΠ»Ρ ΠΆΠ΅ ΠΏΡΠΎΡΡΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ.
ΠΠΈΠ·Π½Π΅ΡΠΌΠ΅Π½Ρ ΠΈΡΠΊΠ°Π»ΠΈ Π½ΠΎΠ²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΄Π°Π½Π½ΡΠ΅, ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ β Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΠΉ ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Ρ. Π ΠΊΠΎΠ½ΡΠ΅ ΠΊΠΎΠ½ΡΠΎΠ², Π»ΡΠ±ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Ρ ΠΎΡΠΎΡΠΈ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ· Π½ΠΈΡ ΠΈΠ·Π²Π»Π΅ΡΡ.
ΠΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π½Π° JavaScript Π±ΡΡΡΡΠΎ Π·Π°Π½ΡΠ»ΠΈ Π½ΠΈΡΡ ΠΌΠΎΡΠ½ΡΡ
ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΡΡ
ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ
.Π‘ ΠΈΡ
ΠΏΠΎΠΌΠΎΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·Π²Π»Π΅ΡΡ Π²ΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈΠ· Π»ΡΠ±ΡΡ
ΠΎΠ±ΡΠ΅ΠΌΠΎΠ² Π΄Π°Π½Π½ΡΡ
, Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° Π½Π΅Ρ ΠΏΠΎΠ΄ ΡΠ΄ΠΎΠ±Π½ΡΠΌ ΡΠ³Π»ΠΎΠΌ ΠΈ ΡΠ°Π·Π³Π»ΡΠ΄Π΅ΡΡ ΡΠ°Π±Π»ΠΎΠ½Ρ, Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡΠ΅ Π½Π° Π³ΡΠ°ΡΠΈΠΊΠ°Ρ
ΡΡΠΎΠ²Π½Ρ Excel.
Chartist ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΏΡΠΎΡΡΠΎΡΠΎΠΉ ΠΈ Π»Π΅Π³ΠΊΠΎΡΡΡΡ ΠΎΡΠ²ΠΎΠ΅Π½ΠΈΡ, ΡΡΠΎΠ»Ρ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΌΠΈ Π²ΡΠ΅ΠΌ, ΠΊΡΠΎ ΠΏΡΠΈΠ²ΡΠΊ ΠΊ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌ Excel. ΠΡΠ°ΡΠΈΠΊΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Ρ ΠΈ Π½Π΅ Π·Π°Π²ΠΈΡΡΡ ΠΎΡ DPI ΡΠΊΡΠ°Π½Π°, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ², ΡΠ°ΡΡΡΠΈΡΠ°Π½Π½ΡΡ Π½Π° ΡΠΈΡΠΎΠΊΠΈΠΉ ΡΠΏΠ΅ΠΊΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² β ΠΎΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π΄ΠΎ Π΄Π΅ΡΠΊΡΠΎΠΏΠΎΠ². Π ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ Π½Π° Π±Π°Π·Π΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ SVG, ΡΡΠΎ Π³Π°ΡΠ°Π½ΡΠΈΡΡΠ΅Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
Π§ΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Chartist ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΡΠ°ΠΊ ΡΡΠΎ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²ΠΎ. ΠΠ°Π΄ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ ΡΡΡΠ΄ΠΈΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠΎΠ², Π½Π΅Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΡΡ ΠΊΠ°ΠΊΠΈΠΌΠΈ-Π»ΠΈΠ±ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡΠΌΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΡ ΡΠΊΡΠΈΠΏΡΠΎΠ². ΠΡΠ»ΠΈ Π² Π²Ρ Π½Π°ΡΠΊΠ½ΡΠ»ΠΈΡΡ Π½Π° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ, ΡΠ°Π±ΠΎΡΠ°Ρ Ρ Π΄ΡΡΠ³ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ²ΠΎΠΉ, Π±ΡΠ΄ΡΡΠ΅ ΡΠ²Π΅ΡΠ΅Π½Ρ β Π·Π΄Π΅ΡΡ ΠΎΠ½ΠΎ ΡΡΡΡΠ°Π½Π΅Π½ΠΎ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ
ΠΎΠ±ΡΠ΅ΠΌΠ½ΡΡ
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ, FusionCharts Π½Π°ΡΡΠΈΡΡΠ²Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 90 Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ 900 Π²ΠΈΠ΄ΠΎΠ² ΠΊΠ°ΡΡ, Π΄ΠΎΡΡΡΠΏΠ½ΡΡ
βΠΈΠ· ΠΊΠΎΡΠΎΠ±ΠΊΠΈβ. ΠΠ²ΡΠΎΡΡ Ρ
Π²Π°ΡΡΠ°ΡΡΡΡ, ΡΡΠΎ ΠΈΡ
ΠΏΡΠΎΠ΄ΡΠΊΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π»ΡΡΡΠΈΠΌ Π² ΡΠ²ΠΎΠ΅ΠΉ ΡΡΠ΅ΡΠ΅ Ρ ΡΠΎΡΠΊΠΈ Π·ΡΠ΅Π½ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ
. Π‘Π²ΠΎΠΈ ΡΠ»ΠΎΠ²Π° ΠΎΠ½ΠΈ ΠΏΠΎΠ΄ΠΊΡΠ΅ΠΏΠ»ΡΡΡ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡΠΌΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠ°ΠΌΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π½Π° ΡΠ΅Π°Π»ΡΠ½ΡΡ
Π±ΠΈΠ·Π½Π΅Ρ-ΠΏΡΠΎΡΠ΅ΡΡΠ°Ρ
.
FusionCharts ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΎΠΊΠΈΠΉ ΡΠΏΠ΅ΠΊΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, Π²ΠΊΠ»ΡΡΠ°Ρ Mac, iPhone, Android, ΠΈ Π΄Π°ΠΆΠ΅ ΡΠΌΠ΅Π΅Ρ ΡΠΈΡΠΎΠ²Π°ΡΡ Π² ΡΠ°ΡΠΈΡΠ΅ΡΠ°Ρ Π²ΡΠΎΠ΄Π΅ IE6!
ΠΠΎΠ΄ΡΠΌΠ°Π»ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈ ΠΎ ΡΠΎΡΠΌΠ°ΡΠ°Ρ β ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ JSON ΠΈ XML, ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠ° ΡΠ΅ΡΠ΅Π· HTML5/SVG ΠΈ VML. ΠΠΎΡΠΎΠ²ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π² Π²ΠΈΠ΄Π΅ ΡΠΈΡΡΠ½ΠΊΠΎΠ² ΡΠΎΡΠΌΠ°ΡΠ° PNG ΠΈΠ»ΠΈ JPG, Π»ΠΈΠ±ΠΎ Π² Π²ΠΈΠ΄Π΅ PDF. Π Π°ΡΡΠΈΡΠ΅Π½ΠΈΡ FusionCharts ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π² Π»ΡΠ±ΡΠ΅ ΡΡΠ΅ΠΊΠΈ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, Π²ΠΊΠ»ΡΡΠ°Ρ jQuery, AngularJS, ΡΠΈΡΡΡΠΉ PHP ΠΈΠ»ΠΈ Rails.
Π ΡΠ΅Π»ΠΎΠΌ, FusionCharts ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΈ ΡΠ΄ΠΎΠ±Π½ΡΡ Π² ΡΠ°Π±ΠΎΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΠΏΡΠΈΠ³ΠΎΠ΄Π½ΡΡ Π΄Π»Ρ ΡΠ΅ΡΡΠ΅Π·Π½ΠΎΠ³ΠΎ Π±ΠΈΠ·Π½Π΅Ρ-Π°Π½Π°Π»ΠΈΠ·Π°.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ Π΄Π»Ρ Π½Π΅ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², ΠΏΠ»Π°ΡΠ½Π°Ρ Π² ΠΈΠ½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅.
Dygraphs β Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ open-source Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡΠ°Ρ Π΄Π»Ρ ΡΠΊΡΡΡΠ΅ΠΌΠ°Π»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠΈΡ ΠΌΠ°ΡΡΠΈΠ²ΠΎΠ² Π΄Π°Π½Π½ΡΡ . βΠΠ· ΠΊΠΎΡΠΎΠ±ΠΊΠΈβ ΠΎΠ½Π° ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΡΠΎΡΠ½Π΅Π½ΠΈΡ ΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π΄Π°ΠΆΠ΅ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ .
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΠ΅ΠΌΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π° ΠΎΠ±ΡΠ°ΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΡΠ΅ΡΡΡ Π²ΠΏΠ»ΠΎΡΡ Π΄ΠΎ IE8. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΎΠΏΡΠΈΠΉ ΠΈ callback-ΠΈ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Chart.js ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌ, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡΠΆΠ΅Π½ ΠΏΠ»ΠΎΡΠΊΠΈΠΉ, ΡΠΈΡΡΡΠΉ, ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ, ΠΈ ΠΏΠΎΠ±ΡΡΡΡΠ΅Π΅. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΠ΅Π³ΠΎ 11 ΠΠ± Π² ΡΠΆΠ°ΡΠΎΠΌ Π²ΠΈΠ΄Π΅, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Ρ ΠΏΡΠΈ ΡΡΠΎΠΌ 6 Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π³ΡΠ°ΡΠΈΠΊΠΎΠ² β Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ, Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°, ΠΊΡΡΠ³ΠΎΠ²ΠΎΠΉ, Π»Π΅ΠΏΠ΅ΡΡΠΊΠΎΠ²ΡΠΉ, ΠΏΠΎΠ»ΡΡΠ½ΡΠΉ ΠΈ ΠΊΠΎΠ»ΡΡΠ΅Π²ΠΎΠΉ. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΌΠΎΠ΄ΡΠ»Π΅, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎΡ Π±Π»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅.
Π Π΅Π½Π΄Π΅ΡΠΈΠ½Π³ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ HTML5 Canvas, Π° Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , Π³Π΄Π΅ Π΅Π³ΠΎ Π½Π΅Ρ β ΡΠ΅ΡΠ΅Π· ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π»Ρ. ΠΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Ρ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Google Charts ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠΈΡΠΎΠΊΠΈΠΉ Π½Π°Π±ΠΎΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π° Π»ΡΠ±ΠΎΠΉ Π²ΠΊΡΡ. ΠΡΡΠΈΡΠΎΠ²ΠΊΠ° ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ HTML5/SVG, Π»ΠΈΠ±ΠΎ VML Π½Π° ΡΡΠ°ΡΡΡ IE. ΠΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Ρ, Π° Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΠΈ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ. ΠΠ·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ Π²ΠΈΠ΄Ρ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Π·Π΄Π΅ΡΡ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ, Π½ΠΎ Π½Π΅ open-source. ΠΠΈΡΠ΅Π½Π·ΠΈΡ Π·Π°ΠΏΡΠ΅ΡΠ°Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ JS-ΡΠ°ΠΉΠ» Π΄Π»Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ Π½Π° ΡΠ΅ΡΠ²Π΅ΡΠ΅ ΡΠ°ΠΉΡΠ°. ΠΡΠ»ΠΈ Π²Ρ Π·Π°Π½ΠΈΠΌΠ°Π΅ΡΠ΅ΡΡ ΡΠ°ΠΉΡΠΎΠΌ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΏΡΠΈΡΡΠΈΡ, ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΠ΅ Π² Π³ΡΠ°ΡΠΈΠΊΠ°Ρ
ΠΊΠΎΠ½ΡΠΈΠ΄Π΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅, Π»ΡΡΡΠ΅ ΠΏΠΎΠΈΡΠΊΠ°ΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Google Charts.
Highcharts β Π΅ΡΠ΅ ΠΎΠ΄Π½Π° ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΠΊΠ°ΠΊ ΠΈ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π΄ΡΡΠ³ΠΈΡ , ΠΎΡΠ½ΠΎΠ²Π°Π½Π½Π°Ρ Π½Π° HTML5/SVG/VML. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΠΈΡΠΎΠΊΠΈΠΉ ΡΠΏΠ΅ΠΊΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²ΠΈΠ΄ΠΎΠ² Π³ΡΠ°ΡΠΈΠΊΠΎΠ², Π° ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΠΎΠ΄Π½ΠΎΠΈΠΌΠ΅Π½Π½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΏΡΡΠΌΠΎ Π½Π° Ρ ΠΎΠ΄Ρ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ Π΄Π»Ρ Π½Π΅ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, Π² ΠΈΠ½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ β ΠΏΠ»Π°ΡΠ½Π°Ρ.
Flot β ΠΎΠ΄Π½Π° ΠΈΠ· ΡΡΠ°ΡΠ΅ΠΉΡΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ, Π³Π»Π°Π²Π½ΠΎΠΉ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΠΎΡΠ° ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ. ΠΠ½Π° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° jQuery, ΠΈ, Π΄Π»Ρ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ, Π²Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΎΠΏΡΡ ΡΠ°Π±ΠΎΡΡ Ρ Π½ΠΈΠΌ. ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ ΠΎΡΠ²ΠΎΠΈΡΠ΅ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ, Π² Π²Π°ΡΠΈΡ ΡΡΠΊΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ, Π΅Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΠ°ΡΡΡΡ.
Flot ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ ΡΠΌΠ΅Π΅Ρ ΡΠΈΡΠΎΠ²Π°ΡΡ Π΄Π°ΠΆΠ΅ Π² IE6. Π ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΊ Flot ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π½Π°ΡΠ°Π±ΠΎΡΠΎΠΊ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ
Π°Π²ΡΠΎΡΠΎΠ², ΡΠ°ΡΡΠΈΡΡΡΡΠΈΡ
ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ. Π£Π²ΠΈΠ΄Π΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Flot ΠΌΠΎΠΆΠ½ΠΎ Π·Π΄Π΅ΡΡ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ»Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ D3 β ΠΏΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ Π² Π³ΠΎΠ»ΠΎΠ²Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠ΅ΡΡ Π·Π°Ρ ΠΎΠ΄ΠΈΡ ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ . ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΌΠΎΡΠ½ΡΠΉ open source ΠΏΡΠΎΠ΅ΠΊΡ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΡΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ DOM. ΠΡΠ°ΡΠΈΠΊΠΈ ΡΠΈΡΡΡΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ HTML5, SVG ΠΈ CSS.
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ°ΠΌ W3C ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΡΠ΅ΠΌΠΈ Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π»ΡΠ±ΡΡ Π΅Ρ Π·Π° ΡΠΈΡΠΎΠΊΠΈΠΉ ΡΠΏΠ΅ΠΊΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ ΠΈ ΠΌΠΎΡΠ½ΡΠΉ API. ΠΠ΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ D3 Π΄ΠΎΡΡΡΠΏΠ½Π° Π·Π΄Π΅ΡΡ.
ΠΡΠ΄ΡΡΠ΅ Π²Π½ΠΈΠΌΠ°ΡΠ΅Π»ΡΠ½Ρ β D3 ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Π±Π΅Π· Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΠΈ Π΄Π»Ρ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠΏΠ΅ΡΠ²Π° ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠΉ. ΠΠΏΡΠΎΡΠ΅ΠΌ, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π΅ΠΌΠ°Π»ΠΎ ΡΠ±ΠΎΡΠΎΠΊ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3 Ρ ΡΠΆΠ΅ Π³ΠΎΡΠΎΠ²ΡΠΌΠΈ Π½Π°Π±ΠΎΡΠ°ΠΌΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ².
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡ, ΡΠΏΠΎΡΠΎΠ±Π½Π°Ρ ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΡΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Π½Π° Π±Π°Π·Π΅ Π²Π°ΡΠ΅Π³ΠΎ AngularJS-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΠΎ ΡΡΠΎ Π²Π°Ρ Π²ΡΠ±ΠΎΡ. N3 ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° D3 ΠΈ ΡΡΠ°Π²ΠΈΡ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ΅Π»ΡΡ Π»ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ΅Π³ΠΌΠ΅Π½Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² β ΡΠ΅Ρ
, ΠΊΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ AngularJS. ΠΡΡΡΠΈΠΌ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·ΠΈΡ Π»ΡΡΡΠ΅ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° Π΄ΡΡΠ³ΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ. ΠΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ N3 Π΄ΠΎΡΡΡΠΏΠ½Ρ Π·Π΄Π΅ΡΡ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
NVD3 β ΠΏΡΠΎΠ΅ΠΊΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ d3.js, ΡΡΠ°Π²ΡΡΠΈΠΉ ΡΠ²ΠΎΠ΅ΠΉ ΡΠ΅Π»ΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ΄ΠΎΠ±Π½ΡΠΉ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΠΉ Π½Π°Π±ΠΎΡ ΡΡΠ½ΠΊΡΠΈΠΉ Π΄Π»Ρ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², Π½ΠΎ ΡΠΏΡΠΎΡΡΠΈΠ² ΠΏΡΠΎΡΠ΅ΡΡ Π² ΡΡΠ°Π²Π½Π΅Π½ΠΈΠΈ Ρ ΡΠΈΡΡΡΠΌ d3. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΠ΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠΉ ΠΌΠ°ΡΡΠΎΠΉ Π΄Π°Π½Π½ΡΡ ΠΈ Π½Π°ΡΠ»Π°ΠΆΠ΄Π°ΡΡΡΡ ΠΎΡΠΎΠ±ΠΎ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΎΠΉ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Ember Charts ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π»Π°ΡΡ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ Addepar Π΄Π»Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ ΡΠΏΠ΅ΠΊΡΡΠ° ΡΡΠ½ΠΊΡΠΈΠΉ Ember. ΠΠΎΠΌΠΈΠΌΠΎ Charts, Π² ΡΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΡΠ°ΠΊΠΆΠ΅ Π²Ρ ΠΎΠ΄ΡΡ Ember Tables ΠΈ Ember Widgets. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΡΡΡΠΎΠ΅Π½Π° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3 Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠ΅ΠΉ Π²ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Ember.js.
ΠΡΠ΅ΠΏΠΊΠ°Ρ, Π²ΡΠ»ΠΈΠ·Π°Π½Π½Π°Ρ Π΄ΠΎ ΠΌΠ΅Π»ΠΎΡΠ΅ΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ Π»ΡΠ±ΠΎΠΉ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠΈ. ΠΡΡΡΠΎΠ΅Π½Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΈ Π½Π΅ βΡΠΏΠ°ΡΡΡβ, Π²ΡΡΡΠ΅ΡΠΈΠ² Π½Π΅ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅. ΠΠΎΠΆΠ½ΠΎ ΡΠ°ΡΡΠΈΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π» ΡΠ±ΠΎΡΠΊΠΈ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎ ΡΡΠΎΠ³ΠΎ ΠΌΡ, Π² ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ, Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ ΠΎ ΡΡΠΆΠ΅Π»ΠΎΠ²Π΅ΡΠ°Ρ β ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»Π°Ρ , ΡΠΏΠΎΡΠΎΠ±Π½ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ Π±ΡΠΊΠ²Π°Π»ΡΠ½ΠΎ Π²ΡΡ. ΠΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎ-ΡΠΎ ΠΏΡΠΎΡΡΠΎΠ΅ Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±Π°Π·ΠΎΠ²ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ². jQuery Sparklines β ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΡΡ Π½ΠΈΡΡ. Π‘ Π΅Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΏΠ°ΡΠΊΠ»Π°ΠΉΠ½Ρ β ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ, Π΄Π°ΡΡΠΈΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎΠ± ΠΎΠ±ΡΠΈΡ ΡΡΠ΅Π½Π΄Π°Ρ ΠΈ Π·Π°Π½ΠΈΠΌΠ°ΡΡΠΈΠ΅ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ΠΌΠ΅ΡΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², Π²ΠΊΠ»ΡΡΠ°Ρ IE6.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎΠ²ΠΎΡΡ ΠΎ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ±ΠΎΡΠΊΠ°Ρ , Π½Π΅Π»ΡΠ·Ρ ΠΏΡΠΎΠΉΡΠΈ ΠΌΠΈΠΌΠΎ Sigma. ΠΡΠΎ ΠΌΠΎΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ Π·Π°Π½ΠΈΠΌΠ°ΡΡΠ°ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ Π³ΡΠ°ΡΠΈΠΊΠ°ΠΌΠΈ ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ΠΌ Ρ ΡΠ΅ΡΡΡ.
ΠΠ½ΡΡΡΠΈ Sigma ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π½Π°ΡΡΡΠΎΠ΅ΠΊ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ. ΠΠΌΠ΅Π½Π½ΠΎ Ρ Π½Π΅ΠΉ ΠΏΡΠΈΡ
ΠΎΠ΄ΠΈΡ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π΄Π°ΠΆΠ΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈ Π½Π΅ΠΎΠ±ΡΡΠ½ΡΠΌ. ΠΡΠΎΡΡΠΎ Π²Π·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° Π΄Π΅ΠΌΠΎ ΠΈ Π²Ρ ΠΏΠΎΠΉΠΌΠ΅ΡΠ΅, ΠΎ ΡΠ΅ΠΌ ΡΠ΅ΡΡ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ°ΠΊ Π³ΠΎΠ²ΠΎΡΠΈΠ» ΠΠΎΡΡΠΈΡ, Ρ ΠΎΡΠΎΡΠΈΠΉ Π³ΡΠ°ΡΠΈΠΊ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌ. Morris β ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ jQuery ΠΈ Raphael, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡΠ°Ρ ΠΏΡΠΎΡΡΡΠ΅ ΠΈ ΡΠΈΡΡΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ. Π‘ΠΏΠΈΡΠΎΠΊ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΉ Π½Π΅Π²Π΅Π»ΠΈΠΊ, Π½ΠΎ Morris ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΡΠΎ-ΡΠΎ Π±ΡΡΡΡΠΎΠ΅, ΠΏΡΠΎΡΡΠΎΠ΅ ΠΈ ΠΏΡΠΈΠ²ΡΡΠ½ΠΎΠ΅.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Cytoscape β ΠΊΡΠ°ΡΠΈΠ²Π°Ρ open source Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π½Π° ΡΠΈΡΡΠΎΠΌ Javascript ΠΏΠΎΠ΄ Π»ΠΈΡΠ΅Π½Π·ΠΈΠ΅ΠΉ LGPL3+. ΠΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½Π°Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΈ Π½ΠΈΠΊΠ°ΠΊΠΈΡ Π²Π½Π΅ΡΠ½ΠΈΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ. Cytoscape ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π°ΡΠ΅ΠΌ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ, Π²ΡΡΡΠ°ΠΈΠ²Π°Ρ ΠΊΠΎΠ΄ Π² Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° Π²ΡΠ΅Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ Node.js, jQuery, Meteor ΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π΄ΡΡΠ³ΠΈΡ . ΠΠ°ΠΌΠ΅ΡΡΡΠ΅, ΡΡΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Cytoscape, ΠΊΠΎΡΠΎΡΠΎΠ΅, Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° Π½Π°Π·Π²Π°Π½ΠΈΠ΅, Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
C3.js β Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠΎΡΠΊ D3. ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π²Π΅ΡΠΎΠΊ ΠΎΡ D3 ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°Π΅Ρ, Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΡΠΎΡΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, ΠΈ ΠΊΠ°ΠΊ ΡΡΠΆΠ΅Π»ΠΎ ΡΠΎΠ²Π»Π°Π΄Π°ΡΡ Ρ Π½Π΅ΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°ΠΌ.
C3.js ΠΎΠ±Ρ ΠΎΠ΄ΠΈΡ ΡΠΆΠ°ΡΠ½ΡΡ ΠΊΡΠΈΠ²ΡΡ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ D3 ΡΠ΅ΡΠ΅Π· ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΊΠΎΠ΄Π° Π΄Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠ°. C3 ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ, Π½Π° Π±Π°Π·Π΅ ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ. Π Π½ΡΠΌ ΡΠΆΠ΅ ΠΈΠΌΠ΅Π΅ΡΡΡ API ΠΈ callback-ΠΈ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Π³ΡΠ°ΡΠΈΠΊΠΎΠΌ ΠΏΠΎΡΠ»Π΅ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Rickshaw Π±ΡΠ» ΡΠΎΠ·Π΄Π°Π½ Π½Π° Shutterstock ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΡΠ΄ΠΎΠ² ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΉ. ΠΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ³Π°Π΄Π°ΡΡΡΡ, Π΅Π³ΠΎ ΡΠΎΠ±ΡΠ°Π»ΠΈ Π½Π° Π±Π°Π·Π΅ D3.
ΠΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Rickshaw Π΄ΠΎΡΡΡΠΏΠ½Ρ Π·Π΄Π΅ΡΡ. ΠΠ»Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠΉ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΡ , ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ, Π½Π°ΡΡΡΠΎΠΈΡΡ Π΅Ρ βΠΏΠΎΠ΄ ΡΠ΅Π±Ρβ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π»ΡΡΡΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ D3, Π΅ΡΠ»ΠΈ Π³ΠΎΠ²ΠΎΡΠΈΡΡ ΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
ΡΡΠ΄ΠΎΠ². ΠΠ½ Π²ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΠΏΠΎΠ΄ΡΡΠ³ΠΈΠ²Π°Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ
ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ², Π²ΡΠΎΠ΄Π΅ Graphite, Cube ΠΈ ΠΏΡΠΎΡΠΈΡ
, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
Π Π΅Π½Π΄Π΅ΡΠΈΠ½Π³ Π²Π΅Π΄Π΅ΡΡΡ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ β ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΎΠΉ Π·Π°Π½ΠΈΠΌΠ°Π΅ΡΡΡ Canvas, ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π΄ΠΎΠ²Π΅ΡΠ΅Π½Π° ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Ρ Π³ΡΠ°ΡΠΈΠΊΠ°. Cubism ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ Ρ ΠΎΡΠΎΡ Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠ°Ρ , ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ βΠ½Π° Π³Π»Π°Π·β, ΡΠ΅ΠΌ ΠΏΡΠΎΡΠΈΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Plottable β ΠΎΡΠ²Π΅ΡΠ²Π»Π΅Π½ΠΈΠ΅ D3, Π½ΠΎ ΡΠ»Π΅Π³ΠΊΠ° Π² Π΄ΡΡΠ³ΡΡ ΡΡΠΎΡΠΎΠ½Ρ. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΡΠ»ΠΈ Π² ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΡΡΡ, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ² Π½Π°Π±ΠΎΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΈΠ½ΠΊΠ°ΠΏΡΡΠ»ΠΈΡΠΎΠ²Π°Π² Π² Π½ΠΈΡ Π»ΠΎΠ³ΠΈΠΊΡ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ. ΠΠΎΠ΄ΡΠ»ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² Π΄Π²ΠΈΠΆΠΎΠΊ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ, ΠΈ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΡΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ Π² Π½Π΅Ρ.
ΠΡΠΎ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²Π·ΡΡΡ Π»ΡΠ±ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Plottable ΠΈ Π²Π½Π΅Π΄ΡΠΈΡΡ Π΅Π³ΠΎ Π½Π° ΡΠ²ΠΎΠΉ Π³ΠΎΡΠΎΠ²ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ, Π»ΠΈΠ±ΠΎ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ Π·Π°Π½ΠΎΠ²ΠΎ. ΠΡΡ ΠΌΠΎΡΡ D3 β Π² ΡΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ΅ΠΉ Π±ΡΠΊΠ²Π°Π»ΡΠ½ΠΎ ΠΈΠ³ΡΠ°ΡΡ Π³ΡΠ°ΡΠΈΠΊΠ°ΠΌΠΈ. ΠΠ΄Π΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΠ±ΠΎΠ²Π°ΡΡΡΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΡ Π΅Π³ΠΎ ΡΠ°Π±ΠΎΡΡ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: open-source, Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π° Π΄Π»Ρ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, Canvas.js β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° Π±Π°Π·Π΅ Canvas. Π‘ Π΅Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΎΡΠΊΡΠΎΡΡΡΡ Π½Π° Π»ΡΠ±ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅. βΠΠ· ΠΊΠΎΡΠΎΠ±ΠΊΠΈβ ΠΎΠ½Π° ΡΠΆΠ΅ ΠΎΠ±ΠΎΡΡΠ΄ΠΎΠ²Π°Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠ΅ΠΌΠ°ΠΌΠΈ, ΠΎΠ±Π³ΠΎΠ½ΡΡΡΠΈΠΌΠΈ Flash ΠΈ SVG ΠΏΠΎ Π±ΡΡΡΡΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Π² ΡΠ°Π·Ρ.
ΠΠΈΡΠ΅Π½Π·ΠΈΡ: Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ Π΄Π»Ρ Π½Π΅ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΠΏΠ»Π°ΡΠ½Π°Ρ Π² ΠΈΠ½ΡΡ ΡΠ»ΡΡΠ°ΡΡ .
ΠΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ ΠΈ Π°Π½Π°Π»ΠΈΠ· Π΄Π°Π½Π½ΡΡ β ΡΠ°ΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΠΈΠ·Π½Π΅Ρ-ΠΏΡΠΎΡΠ΅ΡΡΠΎΠ². ΠΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΈΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΈ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ, Π½ΡΠΆΠ΄Π°ΡΡΡΡ ΠΈ Π² ΠΏΡΠΎΡΡΡΡ , ΠΈ Π² ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, ΠΈ Π²ΡΠ΅Π³Π΄Π° Ρ ΠΎΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ Π½Π° ΡΠΊΡΠ°Π½Π΅. ΠΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°Π½Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π°Π΄ΠΎΠ»Π³ΠΎ ΡΠ΄ΠΎΠ²Π»Π΅ΡΠ²ΠΎΡΠΈΡ Π·Π°ΠΏΡΠΎΡΡ Π°Π½Π°Π»ΠΈΡΠΈΠΊΠΎΠ².
ΠΠ»Ρ Π±ΠΎΠ»ΡΡΠΈΡ ΠΎΠ±ΡΠ΅ΠΌΠΎΠ² Π΄Π°Π½Π½ΡΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡΡ FusionCharts, GoogleCharts, Dygraphs ΠΈ ΡΠΎΡΠΊΠΈ D3. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠ΅ΡΠ΅ ΡΡΠΎ-ΡΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈ Π±ΡΡΡΡΠΎΠ΅, ΡΠΎ Π²Π·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° Morris.js ΠΈΠ»ΠΈ Chart.js. Π ΡΠ΅ΠΌ, ΠΊΡΠΎ Π³ΠΎΠ½ΠΈΡΡΡ Π·Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡΡ, ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ±ΡΠ°ΡΠ°ΡΡΡΡ ΠΊ Cytoscape ΠΈΠ»ΠΈ Sigma.js.
jQuery ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² β CodeRoad
ΠΠΎΠΆΠ΅Ρ Π»ΠΈ ΠΊΡΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΡΡ Ρ ΠΎΡΠΎΡΠΈΠΉ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery API Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
ΠΊΡΠΎΠΌΠ΅ ΠΊΠ°ΠΊ filamentgroup. com.
The API Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ customizible.I Ρ ΠΎΡΠ΅Ρ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π² ASP.NET . (ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ASP.NET 3.5 ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΡΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠΎΠΉ, Ρ Ρ ΠΎΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΡΠΎΡΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery).
jquery jquery-ui chartsΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ ΠΡΡΠΎΡΠ½ΠΈΠΊ
8 ΠΎΡΠ²Π΅ΡΠΎΠ²
- ΠΠ°ΠΊ Qt ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²?
Π Qt ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π³ΡΠ°ΡΠΎΠ², ΡΠΎ Π΅ΡΡΡ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²? ΠΡΡΡ Π»ΠΈ Ρ Π½Π°Ρ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΊΠ»Π°ΡΡΡ Qt ΠΈΠ»ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄Π»Ρ Π½Π΅Π³ΠΎ, ΠΊΠ°ΠΊ Π΅ΡΡΡ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ ? ΠΡΠ°ΡΠΈΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π΄Π΅ΡΡ Π±ΡΠ΄Π΅Ρ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½, ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ, ΠΏΡΠΎΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠΊΠΎΠΌ ΠΈ Π½Π°ΠΏΡΡΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
- ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ², Π²ΠΊΠ»ΡΡΠ°ΡΡΠΈΡ
ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ knitr .Rmd
ΠΡΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°, Π²ΠΊΠ»ΡΡΠ°ΡΡΠ΅Π³ΠΎ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², Π½Π° Π³ΡΠ°ΡΠΈΠΊΠΈ Π½Π΅ ΡΡΡΠ»Π°ΡΡΡΡ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠΎ Π΅ΡΡΡ ΠΎΠ½ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½Ρ Π΄Π»Ρ ΠΎΠ±ΠΎΠΈΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ², Ρ ΠΎΡΡ ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ°Π·Π½ΡΠΌΠΈ.
40
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΈΡ Ρ ΡΡΠΏΠ΅Ρ ΠΎΠΌ (Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ, ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠΉ ΠΈ Ρ. Π΄.):
ΠΡΡΠ³ΠΈΠ΅ ΠΌΠ½Π΅ ΠΏΠΎΠΏΠ°Π΄Π°Π»ΠΈΡΡ:
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ brianng 29 ΠΈΡΠ»Ρ 2009 Π² 15:31
6
Π― ΡΠ΄ΠΈΠ²Π»Π΅Π½, ΡΡΠΎ Π½ΠΈΠΊΡΠΎ Π½Π΅ ΡΠΏΠΎΠΌΡΠ½ΡΠ» HighCharts.
Highcharts -ΡΡΠΎ ΠΎΠ±ΡΠΈΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Javascript, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½Π°Ρ Π½Π° Jquery.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Deepak Kumar Vasudevan 02 Π°Π²Π³ΡΡΡΠ° 2012 Π² 11:29
4
ΠΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ²- jquery-visualize, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· ΠΎΠ±ΡΡΠ½ΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΡ HTML, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ Ρ ΠΎΡΠΎΡΠΎ Π΄Π΅Π³ΡΠ°Π΄ΠΈΡΡΠ΅Ρ Π±Π΅Π· javascript
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈ Π‘ΡΠ°ΡΡΡ ΠΎΠ± ΡΡΠΎΠΌ :
ΠΠΎΡΡΡΠΏΠ½Π°Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ Π² HTML Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ»Π° ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ Π·Π°Π΄Π°ΡΠ΅ΠΉ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΡΠ°ΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π½Π΅Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ.
ΠΠ΅ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π½Π°Π·Π°Π΄ ΠΌΡ Π½Π°ΠΏΠΈΡΠ°Π»ΠΈ ΡΡΠ°ΡΡΡ, ΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΠΌΠ΅ΡΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΠΏΡΠΈΠ΄ΡΠΌΠ°Π»ΠΈ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ JavaScript Π΄Π»Ρ ΠΎΡΠΈΡΡΠΊΠΈ Π΄Π°Π½Π½ΡΡ ΠΈΠ· ΡΠ°Π±Π»ΠΈΡΡ HTML ΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° HTML 5 Canvas. ΠΡΠΎΡ ΠΌΠ΅ΡΠΎΠ΄ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π΅Π½, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Π΄Π°Π½Π½ΡΠ΅ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΆΠ΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π² ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΡΠ°Π±Π»ΠΈΡΠ½ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅, ΡΡΠΎ Π΄Π΅Π»Π°Π΅Ρ Π΅Π³ΠΎ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌ Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΎΠΉ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ dbr 29 ΠΈΡΠ»Ρ 2009 Π² 15:53
- ΠΠΎΡΡΡΠΎΡΠ½ΡΠΉ Π°Π½Π°Π»ΠΈΠ· ΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°Ρ
Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΈ
Π― ΡΠ°ΠΊΠΆΠ΅β¦
- ΠΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ R
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ , ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΡΠΌΠ°Ρ: (x, y, type) Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ Postgres ΡΠ΅ΡΠ΅Π· R. ΠΠΎΠΉ Π²ΠΎΠΏΡΠΎΡ ΡΠ°ΠΊΠΎΠ²: ΠΊΠ°ΠΊ Π±Ρ Ρ Π·Π°ΡΡΠ°Π²ΠΈΠ» R Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ° type? Π― Π½ΠΎΠ²ΠΈΡΠΎΠΊ Π²β¦
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Yagiz Ozturk 06 ΠΈΡΠ½Ρ 2011 Π² 08:00
2
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΡΠ»ΠΎΡ . ΠΡΠΎ ΠΎΡΠΊΡΡΡΡΠΉ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΉ Π»ΠΈΡΠ΅Π½Π·ΠΈΡ MIT, ΡΠ°ΠΊ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄Π΅Π»Π°ΡΡ Ρ API Π²ΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ.
Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΠΈ, ΡΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» Π΅Π΅ ΠΏΠΎΠ΄ Π²ΡΠ΅ΠΌΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ. ΠΡΠ»Π° ΠΎΡΠΈΠ±ΠΊΠ° Ρ Opera Π½Π° Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΡΡ
Π³ΡΠ°ΡΠΈΠΊΠ°Ρ
, Π½ΠΎ ΡΡΠΎ Π±ΡΠ»Π° ΠΎΡΠΈΠ±ΠΊΠ° Ρ
ΠΎΠ»ΡΡΠ° Opera, ΠΈ ΠΎΠ½Π° Π±ΡΠ»Π° ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½Π° Π±ΠΎΠ»Π΅Π΅ Π³ΠΎΠ΄Π° Π½Π°Π·Π°Π΄. ΠΠ»Ρ IE flot ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ excanvas.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Nosredna 29 ΠΈΡΠ»Ρ 2009 Π² 15:32
0
Zino UI Charts β ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ jQuery
- 15+ ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ (Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ , ΠΎΠ±Π»Π°ΡΡΡΠΌΠΈ, Π»ΠΈΠ½Π΅ΠΉΡΠ°ΡΠ°Ρ, Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°, ΠΊΡΡΠ³ΠΎΠ²Π°Ρ, ΠΊΠΎΠ»ΡΡΠ΅Π²Π°Ρ ΡΠΎΡΠΌΠ°, ΠΊΠΎΡΠΏΡΡ, ΡΡΡΠΏΠ΅Π½ΡΠ°ΡΡΠΉ, ΠΏΡΠ·ΡΡΡ, ΡΠ°Π·Π±ΡΠΎΡ, ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ½ΠΈΠΊ, OHLC Π½Π° ΠΏΠΎΠ»ΡΡΠ½ΠΎΠΉ, ΡΠ°Π΄Π°Ρ, Π ΠΎΠ·Π° Π²Π΅ΡΡΠΎΠ²)
- ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΡΠΉ
- ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ SVG ΠΈ HTML5 Ρ ΠΎΠ»ΡΡ
- Π‘Π΅ΡΠ²Π΅Ρ-ΡΠ°Π½ΡΠΈΠΊΠΈ PHP
- GPL Π»ΠΈΡΠ΅Π½Π·ΠΈΡ
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Dimitar Ivanov 23 Π½ΠΎΡΠ±ΡΡ 2013 Π² 05:21
0
Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ shieldui . ΠΠ½ ΠΎΡΠ΅Π½Ρ ΠΌΠΎΡΠ½ΡΠΉ, ΠΈ Ρ Π½ΠΈΡ Π΅ΡΡΡ ΠΎΠ±Π΅ΡΡΠΊΠ° ASP.NET.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ katherine heigl 19 ΡΠ΅Π²ΡΠ°Π»Ρ 2014 Π² 20:27
0
Π― Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ jQuery Flot charts, Π£ Π½Π΅Π³ΠΎ Π΅ΡΡΡ Ρ
ΠΎΡΠΎΡΠ°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ (ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ, Π»ΡΡΡΠ΅) ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΎΠ±ΡΡΠ°ΡΡΠΈΠΉ ΡΠ°ΠΉΡ (ΠΊΠΎΡΠΎΡΡΠΉ, Ρ Π΄ΡΠΌΠ°Ρ, Π»ΡΡΡΠ΅ ΠΏΠΎΠ½ΡΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Ρ Π½Π΅Π³ΠΎ Π΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ 1.2K Π²ΠΎΠΏΡΠΎΡΠΎΠ² ΠΏΠΎ SO . Π ΠΏΠ»Π°Π³ΠΈΠ½Ρ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΠΎΡ, ΡΡΠΎ Π΄Π»Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ / Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ , ΠΈ ΡΠΎΠ½Π½Ρ Π΄ΡΡΠ³ΠΈΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π»Ρ Π½Π΅Π³ΠΎ
Highcharts -ΡΡΠΎ ΡΠΎΠΆΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ, Ρ ΠΎΡΠ»ΠΈΡΠ½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠ΅ΠΉ ΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΎΠ½Π½ΡΠΌΠΈ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ.
ΠΠ½Π΅ Π½Π΅ ΠΎΡΠ΅Π½Ρ Π½ΡΠ°Π²ΡΡΡΡ ΡΠΏΠ°ΡΠΊΠ»Π°ΠΉΠ½Ρ , Π½ΠΎ ΡΡΠΎ Ρ ΠΎΡΠΎΡΠΈΠΉ ΠΈ Β«easy to useΒ» ΠΏΠ»Π°Π³ΠΈΠ½.
Π Π²Ρ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π³Π»ΡΠ½ΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ° jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π»Ρ Π³ΡΠ°ΡΠΈΠΊΠΈ
ΠΠ΄Π΅ Π²Ρ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π³Π»ΡΠ½ΡΡΡ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠΏΠΈΡΠΎΠΊ Ρ Π³ΠΎΠ»ΠΎΡΠ°ΠΌΠΈ ΠΈ ΠΏΡΠΎΡΠΈΠΌ.
ΠΠΎΠ΄Π΅Π»ΠΈΡΡΡΡ Michel Ayres 02 ΠΈΡΠ½Ρ 2014 Π² 12:28
ΠΠΎΡ ΠΎΠΆΠΈΠ΅ Π²ΠΎΠΏΡΠΎΡΡ:
ΠΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΌΠΈΠ»Π»ΠΈΠΎΠ½ΠΎΠ² ΡΡΡΠΎΠΊ
Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ Π²ΠΎΠΏΡΠΎΡ ΠΏΠΎ ΡΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ². ΠΠ΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ: ΠΠ½Π΅ Π½ΡΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π΄Π»Ρ ΠΌΠΎΠ΅Π³ΠΎ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°, Π° ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΠΉ Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ
ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Ρ ΡΡΡΠΎΠΊ. ΠΠ°Π½Π½ΡΠ΅ ΡΠΎΠ±ΠΈΡΠ°ΡΡΡΡβ¦
ΠΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π°ΡΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ Π² .net
ΠΡΡΡ Π»ΠΈ Ρ ΠΊΠΎΠ³ΠΎ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ ΠΏΠΎ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π½Π°ΡΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ Π² .net (c# winforms). ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· ΠΌΠΎΠΈΡ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ: ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, 3D (Π²ΠΎΠ΄ΠΎΠΏΠ°Π΄), ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²Π΅Π½Π½Π°Ρ ΠΎΡΡ,β¦
ΠΏΡΠΎΡΡΠΎΠ΅, ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ΅ΠΌΠΎΠ΅ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π΄Π°Π½Π½ΡΡ
Π― ΡΡΠ°ΡΡ Π±ΠΎΠ»ΡΡΡΡ ΡΠ°ΡΡΡ ΡΠ²ΠΎΠ΅Π³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π΄Π°Π½Π½ΡΡ , Π½ΠΎ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Ρ Π½Π΅ Π½Π°ΡΠ΅Π» Π΄ΠΎΡΡΠΎΠΉΠ½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΡΠ²ΠΎΠΈΡ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠ΅ΠΉ Π² ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ². ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΡΠ°ΠΌΠ°Ρ ΠΌΠΎΡΠ½Π°Ρ ΠΈβ¦
ΠΠ°ΠΊ Qt ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²?
Π Qt ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ Π³ΡΠ°ΡΠΎΠ², ΡΠΎ Π΅ΡΡΡ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²? ΠΡΡΡ Π»ΠΈ Ρ Π½Π°Ρ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΊΠ»Π°ΡΡΡ Qt ΠΈΠ»ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄Π»Ρ Π½Π΅Π³ΠΎ, ΠΊΠ°ΠΊ Π΅ΡΡΡ Π΄Π»Ρ Π΄ΡΡΠ³ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ ? ΠΡΠ°ΡΠΈΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π·Π΄Π΅ΡΡ Π±ΡΠ΄Π΅Ρβ¦
ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ², Π²ΠΊΠ»ΡΡΠ°ΡΡΠΈΡ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ knitr .Rmd
ΠΡΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°, Π²ΠΊΠ»ΡΡΠ°ΡΡΠ΅Π³ΠΎ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², Π½Π° Π³ΡΠ°ΡΠΈΠΊΠΈ Π½Π΅ ΡΡΡΠ»Π°ΡΡΡΡ Π΄ΠΎΠ»ΠΆΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΡΠΎ Π΅ΡΡΡ ΠΎΠ½ΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½Ρ Π΄Π»Ρ ΠΎΠ±ΠΎΠΈΡ
ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠ², Ρ
ΠΎΡΡ ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ°Π·Π½ΡΠΌΠΈ. Π§ΡΠΎ Ρ ΠΌΠΎΠ³Ρ Ρβ¦
ΠΠΎΡΡΡΠΎΡΠ½ΡΠΉ Π°Π½Π°Π»ΠΈΠ· ΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°Ρ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΈ
Π― Π³ΠΎΡΠΎΠ²Π»Ρ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΡ ΠΏΠΎ Π°Π½Π°Π»ΠΈΠ·Ρ Π΄Π°Π½Π½ΡΡ , ΠΈ ΠΌΠ½Π΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΠΌΠΎΠ½ΠΈΡΠΎΡ 2-3 ΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠΎΡ head-up. Π― Ρ ΠΎΡΠ΅Π» Π±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠ½ΠΈΡΠΎΡ(+ΠΏΡΠΎΠ΅ΠΊΡΠΎΡ) Π΄Π»Ρ ΠΊΠΎΠ΄Π°, ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠ½ΠΈΡΠΎΡ(+ΠΏΡΠΎΠ΅ΠΊΡΠΎΡ) Π΄Π»Ρ ΠΊΠΎΠ½ΡΠΎΠ»ΡΠ½ΠΎΠ³ΠΎβ¦
ΠΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ R
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Ρ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ , ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΡΠΌΠ°Ρ: (x, y, type) Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π» ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ Postgres ΡΠ΅ΡΠ΅Π· R. ΠΠΎΠΉ Π²ΠΎΠΏΡΠΎΡ ΡΠ°ΠΊΠΎΠ²: ΠΊΠ°ΠΊβ¦
ΠΠ΅Π½ΡΠΌΠ°ΡΠΊΠΈΠ½Π³ HighCharts, D3 ΠΈ Canvas ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²
ΠΡ ΠΏΡΡΠ°Π΅ΠΌΡΡ Π²ΡΠ±ΡΠ°ΡΡ SVG (HighCharts, D3) ΠΈΠ»ΠΈ Canvas Π΄Π»Ρ Π½Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. ΠΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈΠΌΠ΅Π΅Ρ Π΄Π»Ρ Π½Π°Ρ ΡΠ΅ΡΠ°ΡΡΠ΅Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅. ΠΠΎΡΡΠΎΠΌΡ Ρ ΡΠ΄Π΅Π»Π°Π» ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠΉ Π±Π΅Π½ΡΠΌΠ°ΡΠΊΠΈΠ½Π³ Π½Π° ΡΠ΅ΡΡΠ΅ΠΆΠ΅β¦
NetLogo time extension: ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ?
ΠΠ°ΠΆΠ΅ΡΡΡ, ΡΡΠΎ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡΡ ΡΡΠ΅ΡΡΠΈΠΊ Π’ΠΠΠΎΠ² Π² ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΠΎΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠΈ, Π½ΠΎ Π½Π΅ Π΄Π»Ρ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²? Π― ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ°ΠΉΠ» MousetrapDiscreteEvents. nlogo Π² ΠΏΠ°ΠΏΠΊΠ΅ Examples ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ The timeβ¦.
ΠΠΎΡΡΡΠΎΠ΅Π½ΠΈΠ΅ 5 Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ 3-2 Π² R
ββ ββ ββ | A | | B | | C | ββ ββ β- ββ ββ | D | | E | ββ ββ ΠΈΠ»ΠΈ ββ ββ | A | | B | ββ ββ ββ ββ ββ | C | | D | | E | ββ ββ ββ Π£ ΠΌΠ΅Π½Ρ Π΅ΡΡΡ 5β¦
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
ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΈ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS3, HTML5 ΠΈ JQuery Π΄Π»Ρ ΠΠ°ΡΠΈΡ ΡΠ°ΠΉΡΠΎΠ² ΠΈ Π²Π΅Π± β ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ²
ΠΡΠΈΠ²Π΅ΡΡΡΠ²ΡΡ ΠΠ°Ρ, Π΄ΠΎΡΠΎΠ³ΠΈΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ Π±Π»ΠΎΠ³Π° beloweb.ru. Π ΡΡΠΎΡ ΠΎΡΠ΅Π½Π½ΠΈΠΉ Π΄Π΅Π½Ρ Ρ Ρ ΠΎΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΠΠ°ΠΌ ΠΊΠ»Π°ΡΡΠ½ΡΡ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΡ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°ΡΠΎΠ² ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π΄Π»Ρ ΠΠ°ΡΠΈΡ ΡΠ°ΠΉΡΠΎΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ JQuery, HTML5 ΠΈ CSS3.
ΠΡΡΠ·ΡΡ, Ρ Π΄ΡΠΌΠ°Ρ, ΡΡΠΎ Π΄Π°Π½Π½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΈ Π±Π°ΡΡ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΠΠ°ΠΌ Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠΈΡ
ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΡΡ
Π²Π΅Π± ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ². ΠΠΎ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΈΡΡ
ΠΎΠ΄Π½ΠΈΠΊΠΈ, ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ, ΠΎΡΠ΅Π½Ρ ΡΡΡΠ΄Π½ΠΎ Π½Π°ΠΉΡΠΈ. Π£Π²Π΅ΡΡΡ ΠΠ°Ρ Π² ΡΡΠΎΠΉ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ΅ Π²ΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, Π° ΡΠ°ΠΊΠΆΠ΅ Π²ΡΡ ΠΡ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΡΠΊΠ°ΡΠ°ΡΡ.
ΠΠ°ΡΠ»Π°ΠΆΠ΄Π°ΠΉΡΠ΅ΡΡ.
ΠΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΊΡΡΠ³Π»ΡΠ΅ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°ΡΡ
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π΅ ΠΏΠ»ΠΎΡ ΠΈΡ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΡΡΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ.
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
Π‘ΡΠΈΠ»ΡΠ½ΡΠΉ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS3
ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°ΠΆΠΈΠΌΠ°Π΅Ρ Π½Π° ΡΠΈΡΡΡ Π½ΠΈΠΆΠ΅.
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°Ρ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ JQuery ΠΈ CSS3
ΠΠ»Π°ΡΡΠ½ΡΠΉ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°Ρ Π΄Π»Ρ ΠΠ°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΡΠΆΠ½ΠΎ ΠΏΡΠΎΡΡΠΎ Π²Π²Π΅ΡΡΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ , Π·Π°ΡΠ΅ΠΌ Π½Π°ΠΆΠ°ΡΡ enter, ΠΈ Π΄Π°Π»Π΅Π΅ Π²ΡΡ ΠΏΡΠΎΠΈΠ·ΠΎΠΉΠ΄ΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΠΎ.
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°Ρ Ρ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΎΠΉ
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΠΈ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠΏΠ»ΡΠ²Π°Π΅Ρ ΠΏΠ»Π°Π²Π½Π°Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°.
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΠΎΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ JQuery
ΠΠ»Π°ΡΡΠ½ΡΠΉ ΠΈ ΠΌΠΎΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ Π΄Π»Ρ ΠΠ°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°, Π² ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ.
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
Π£Π΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π½Π° JQuery
ΠΠΎΠ»ΡΡΠΎΠΉ ΠΈ ΠΎΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π²ΡΡΡΠΎΠ΅Π½Ρ ΠΊΠ»Π°ΡΡΠ½ΡΠ΅ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ. Π ΠΎΠ±ΡΠ΅ΠΌ ΡΡΠΏΠ΅Ρ.
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΡΡΠ³Π»ΡΠΉ ΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ Π½Π° HTML5
ΠΠ»ΡΠ²ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ Π² ΠΊΡΡΠ³Π»ΠΎΠΉ ΡΠΎΡΠΌΠ΅, ΡΠ°ΠΊ ΠΆΠ΅ Π΅ΡΡΡ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ΅ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅Π½ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΡΠ΅Π½Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ, ΠΌΠΎΡΠ½ΡΠΉ ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°.
ΠΡ ΠΏΡΠΎΡΡΠΎ ΠΊΠ»Π°ΡΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ. ΠΡΡΡ Π΄Π²Π° ΡΠ΅ΠΆΠΈΠΌΠ° ΠΏΡΠΎΡΠΌΠΎΡΡΠ°: ΠΊΡΡΠ³Π»ΡΠΉ ΠΈ ΡΡΠ΅ΡΠ³ΠΎΠ»ΡΠ½ΡΠΉ. ΠΡΠ΅Π½Ρ ΠΏΠΎΡΠ°Π΄ΠΎΠ²Π°Π» ΠΎΠ±Π·ΠΎΡ ΠΏΡΠΎΡΠ΅Π½ΡΠΎΠ² ΠΏΠΎ Π³ΠΎΠ΄Π°ΠΌ.
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π΄Π»Ρ ΠΠ°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° Π½Π° jQuery ΠΈ HTML5
ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Π² ΡΡΠΌΠ½ΠΎΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ, ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΡΠ°ΡΠΈΠ²ΡΠΉ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±ΠΎΡ Π½Π° CSS
ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΈ ΡΡΠΈΠ»ΡΠ½ΡΠΉ ΠΏΡΠΎΠ³ΡΠ΅ΡΡ Π±Π°Ρ Π·Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΡΠ°ΡΠΈΠ²ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ Π³ΠΎΠ»ΡΠ±ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ°
ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π² ΡΠ²Π΅ΡΠ»ΠΎΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠΈ
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΡΠ°ΡΠΈΠΊ ΠΈΠ· Π»ΠΈΠ½ΠΈΠΉ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS
ΠΠ΅ ΠΏΠ»ΠΎΡ
ΠΎΠΉ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ΄Π΅Π»Π°Π½ Π½Π° ΡΠΈΡΡΠΎΠΌ CSS.
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΠΈ ΡΠ²Π΅ΡΠ»ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Ρ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°ΠΌΠΈ
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
ΠΡΡ ΠΎΠ΄ΠΈΠ½ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ ΠΊΡΡΠ³Π»ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
ΠΡΠΈΠΌΠ΅Ρ ΞΉ Π‘ΠΊΠ°ΡΠ°ΡΡ ΠΈΡΡ ΠΎΠ΄Π½ΠΈΠΊΠΈ
9 Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π½Π° Javascript Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ
ΠΡΠ»ΠΈ ΠΠ°ΡΠΈΠΌ ΠΏΠΎΠΊΡΠΏΠ°ΡΠ΅Π»ΡΠΌ ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΠΊΠ°ΠΊΡΡ Π»ΠΈΠ±ΠΎ ΠΎΡΡΡΡΠ½ΠΎΡΡΡ, Π° ΡΠ°ΠΊ ΠΆΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ, ΠΠ°ΠΌ ΠΎΡΠ΅Π½Ρ ΡΠΈΠ»ΡΠ½ΠΎ ΠΏΠΎΠΌΠΎΠ³ΡΡ ΡΠ°ΠΌΡΠ΅ ΠΎΠ±ΡΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ. Π ΠΎΠ±ΡΠ΅ΠΌ ΠΎΠ½ΠΈ ΠΈ ΡΠΎΠ·Π΄Π°Π½Ρ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ. Π§ΡΠΎΠ±Ρ ΠΊΠ°ΠΊ Π²ΡΠ΅Π³Π΄Π° ΠΎΠ±Π»Π΅Π³ΡΠΈΡΡ ΠΠ°ΠΌ Π·Π°Π΄Π°ΡΡ ΠΏΠΎΠΈΡΠΊΠΎΠ², ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡ ΠΠ°ΠΌ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΡ ΠΈΠ· 9 Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° Javascript. ΠΠ°Π½Π½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½Ρ, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΠΈΠΌΠ΅ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΡΡΠ½Π° Π»ΡΠ±ΠΎΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΠΎΠ»ΡΡΡΡΠ΅Π΅ ΡΠΏΠ°ΡΠΈΠ±ΠΎ http://www.hongkiat.com ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΊ ΠΏΡΠΎΡΠΌΠΎΡΡΡ:
1. ΠΠ»Π°Π³ΠΈΠ½ Π³ΡΠ°ΡΠΈΠΊΠ° β Chart.js
ΠΠ°Π½Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΡΡΡΠΎΠΈΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ ΡΠ΅ΡΡΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΈΠΏΠΎΠ², ΡΡΠΎ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΡΠ°Π΄Π°ΡΠ½Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°, Π° ΡΠ°ΠΊ ΠΆΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π² Π²ΠΈΠ΄Π΅ ΠΏΠΈΡΠΎΠ³Π° ΠΈ ΠΏΠΎΠ½ΡΠΈΠΊΠ°. ΠΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ Π΄Π°Π½Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½.
ΠΠ΅ΡΠ΅ΠΉΡΠΈ
2. Chartist.JS
ΠΠΎΠ»ΡΡΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π’Π°ΠΊ ΠΆΠ΅ Π² Π³ΡΠ°ΡΠΈΠΊΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ SVG.
ΠΠ΅ΡΠ΅ΠΉΡΠΈ
3. c3js
ΠΡΠ»ΠΈΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Ρ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ². Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ Π΄Π°Π½Π½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΏΡΠΎΡΡΡ ΠΊΠ°ΠΊ Π½Π° Π²ΠΈΠ΄ ΡΠ°ΠΊ ΠΈ Π² ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅, Π½ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ²ΠΎΡ Π·Π°Π΄Π°ΡΡ ΠΎΠ½ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ.
ΠΠ΅ΡΠ΅ΠΉΡΠΈ
4. Π€Π»ΠΎΡ
ΠΡΠΎ JQuery ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° ΡΠ°ΠΉΡ. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈ ΡΠ΄Π°Π»ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΠΈΠΏΠΎΠ² ΡΠΆΠ΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
ΠΠ΅ΡΠ΅ΠΉΡΠΈ
5. Echart
ΠΡΠΎ ΠΎΠ³ΡΠΎΠΌΠ½Π°Ρ ΠΈ ΠΎΠ±ΡΠΈΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ ΠΊΠΈΡΠ°ΠΉΡΠ°ΠΌΠΈ. ΠΠ½Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΠ΅ΡΠ΅ΠΉΡΠΈ
6. Peity
ΠΡΠΎΡΡΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΡ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ ΠΈ Π±ΡΡΡΡΠΎ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π° Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ ΠΎΠ±ΡΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΡΡ Π½ΠΈΠ±ΡΠ΄Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
ΠΠ΅ΡΠ΅ΠΉΡΠΈ
7. DC JS
ΠΡΡ ΠΎΠ΄Π½Π° ΠΎΡΠ»ΠΈΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄Π΅Π»Π°Π΅Ρ ΡΠΎ, ΡΡΠΎ ΠΎΡ Π½Π΅Ρ ΠΈ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ. ΠΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ ΠΊΡΠ°ΡΠΈΠ²Π°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΠΈ ΠΏΡΠΎΡΡΠΎΡΠ° ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ.
ΠΠ΅ΡΠ΅ΠΉΡΠΈ
8. Google Chart
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ API Google. Π’Π°ΠΊ ΠΆΠ΅ Π΅ΡΡΡ Π³Π°Π»Π΅ΡΠ΅ΠΈ Ρ ΡΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΌΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Π° Π΄Π°Π½Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°.
ΠΠ΅ΡΠ΅ΠΉΡΠΈ
9. NVD3
ΠΡΠΎΡΡΠ°Ρ Π² ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. ΠΡΠΎΡΡΠΎ Π²Π·ΡΠ»ΠΈ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ.
ΠΠ΅ΡΠ΅ΠΉΡΠΈ
ΠΡΠ°ΡΠΈΠΊΠΈ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery ΠΏΠ»Π°Π³ΠΈΠ½Π° Flot
ΠΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π΄Π°Π½Π½ΡΡ
, ΡΡΠ°Π·Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ ΠΈΡ
ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΡΡ ΠΈ ΠΏΡΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ. ΠΠ»Ρ ΡΡΠΈΡ
ΡΠ΅Π»Π΅ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, Π½ΠΎ ΠΌΠ½Π΅ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π½ΡΠ°Π²ΡΡΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ, Ρ.ΠΊ. ΠΏΠΎ Π½ΠΈΠΌ ΠΏΡΠΎΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΠΏΠΎΠ½ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΡ ΡΠΎΠ±ΡΡΠΈΡ ΠΈ ΡΠΏΡΠΎΠ³Π½ΠΎΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π΅ Π΅Π³ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅.
ΠΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π·Π°Π΄Π°ΡΠΈ
ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΡΡΡΠΎΠΈΡΡ Π³ΡΠ°ΡΠΈΠΊ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΈΡΡ ΠΎΠ΄Π½ΡΡ Π΄Π°Π½Π½ΡΡ . ΠΠ»Ρ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° Π°Π½Π°Π»ΠΈΠ·Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠ΄ΡΠΌΠ°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΏΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΡΠΌ ΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ ΡΠΎΡΠΊΠ°Ρ .
Π ΠΈΡΠΎΠ³Π΅ Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ Π½Π΅ΡΡΠΎ, Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡΠ΅Π΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Π² ΡΠ΅ΡΠ²ΠΈΡΠ΅ Google Analytics (ΠΎΠ½ΠΈ ΠΌΠ½Π΅ ΠΎΡΠ΅Π½Ρ Π½ΡΠ°Π²ΡΡΡΡ)
ΠΠΎΠΈΡΠΊ ΡΠ΅ΡΠ΅Π½ΠΈΡ
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΡΡ ΠΏΡΠΈΠΊΡΡΡΠΈΡΡ ΡΡΠ°ΡΠΈΡΡΠΈΠΊΡ, Π½Π°ΠΏΠΈΡΠ°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ API BitrixβΠ° ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΡΠ°ΠΉΡΠ°Ρ ΠΏΠΎΠ΄ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π±ΠΈΡΡΠΈΠΊΡΠ°. ΠΠΎΠ³ΠΈΡΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ, ΡΡΠΎ ΡΡΠΎΠ»Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π°Ρ Π·Π°Π΄Π°ΡΠ° ΡΠΆΠ΅ Π±ΡΠ»Π° ΠΏΡΠΎΠ΄ΡΠΌΠ°Π½Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌΠΈ ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΠΉ API.
Π ΡΠΎΠΌΡ ΠΆΠ΅, Π½Π° ΡΡΡ ΠΌΡΡΠ»Ρ ΠΏΠΎΠ΄ΡΠ°Π»ΠΊΠΈΠ²Π°Π΅Ρ Π½Π°Π»ΠΈΡΠΈΠ΅ Π² Π±ΠΈΡΡΠΈΠΊΡΠ΅ ΠΌΠΎΠ΄ΡΠ»Ρ Π°Π½Π°Π»ΠΈΡΠΈΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΌΠ΅Π΅Ρ ΡΠ΅ΡΡΠΈΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠΈΠΏΠ°.
ΠΠ΅Π± Π°Π½Π°Π»ΠΈΡΠΈΠΊΠ° ΠΠΈΡΡΠΈΠΊΡ: Π³ΡΠ°ΡΠΈΠΊ ΠΏΠΎΡΠ΅ΡΠ°Π΅ΠΌΠΎΡΡΠΈ ΡΠ°ΠΉΡΠ° ΠΏΠΎ ΡΠ°ΡΠ°ΠΌ.
ΠΠΎ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π±ΠΈΡΡΠΈΠΊΡ ΡΠΌΠ΅Π΅Ρ ΡΡΡΠΎΠΈΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΏΠ°Π½Π΅Π»ΠΈ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ. ΠΠ° ΠΈ ΠΎΠ½ΠΈ Π½Π΅ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡΡ, Ρ.ΠΊ. ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²ΠΈΠ΄ΠΈΡ Π³ΠΎΡΠΎΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠΎ-Π»ΠΈΠ±ΠΎ Π½Π° Π½Π΅ΠΉ Π²ΡΠ΄Π΅Π»ΠΈΡΡ. Π ΡΠΎΠΌΡ ΠΆΠ΅, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π·Π°Ρ
ΠΎΡΠ΅Ρ ΠΏΠΎΠ΄ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π²Ρ
ΠΎΠ΄Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅, ΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΏΡΠΈΠ΄ΡΡΡΡ Π³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°ΡΡ Π·Π°Π½ΠΎΠ²ΠΎ. ΠΡΠΎ Π½Π΅ ΡΠ°ΠΌΡΠΉ Π±ΡΡΡΡΡΠΉ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄.
Π’.ΠΊ. ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ Π±ΠΈΡΡΠΈΠΊΡΠ° Π·Π°Π΄Π°ΡΡ Π½Π΅ ΡΠ΅ΡΠΈΡΡ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π½Π°ΠΉΡΠΈ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠ΅Π±ΡΠ΅ΠΌΡΠΉ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π». Π§ΡΠΎΠ±Ρ Π³ΡΠ°ΡΠΈΠΊΠΈ Π±ΡΠ»ΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±ΡΡΡ Π½Π°ΠΏΠΈΡΠ°Π½ Π½Π° JavaScript. ΠΡΠΈ ΡΡΠΎΠΌ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠΎΠ±Ρ ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π» Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery, Ρ.ΠΊ. ΡΡΠΎΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅ ΠΈ ΡΠ°Π΄ΡΠ΅Ρ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΎΡΡΠΎΡΠΎΠΉ ΠΈ Π»ΠΎΠ³ΠΈΡΠ½ΠΎΡΡΡΡ.
ΠΠΎΡΠ»Π΅ Π°Π½Π°Π»ΠΈΠ·Π° Π²ΡΠ΅Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΠΎΡΡΠ°ΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π²Π° Π²Π°ΡΠΈΠ°Π½ΡΠ° β ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ API Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΎΡ Google (ΡΡΡΠ»ΠΊΠ°) ΠΈ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² jQuery ΠΏΠ»Π°Π³ΠΈΠ½Π΅ Flot (ΡΡΡΠ»ΠΊΠ°).
ΠΡΠ»ΠΈ ΡΡΠ°Π²Π½ΠΈΡΡ ΠΊΠΎΠ΄ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° Π³ΡΠ³Π»ΠΎΠ²ΡΡ
Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ ΠΊΠΎΠ΄ Π²ΡΠ²ΠΎΠ΄Π° Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Flot, ΡΠΎ Π²ΡΠ±ΠΎΡ ΠΏΠ°Π΄ΡΡ Π² ΡΡΠΎΡΠΎΠ½Ρ 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 (ΡΠΈΡΠ°ΡΡ)
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π½Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°Ρ , Π΄ΠΎΡΡΡΠΏΠ½Ρ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Π½Π°ΡΠ΅ΠΉ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΡΠ»ΠΊΡ Π½Π° Π½ΠΈΡ Ρ Π΄Π°ΡΡ Π½Π΅ ΠΌΠΎΠ³Ρ. ΠΠΎ Π΅ΡΠ»ΠΈ Ρ ΠΊΠΎΠ³ΠΎ-ΡΠΎ Π΅ΡΡΡ Π²ΠΎΠΏΡΠΎΡΡ ΠΏΠΎ ΡΠ°Π±ΠΎΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π°, Ρ ΠΏΠΎΡΡΠ°ΡΠ°ΡΡΡ ΠΎΡΠ²Π΅ΡΠΈΡΡ
jqPlot Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π΄Π»Ρ jQuery
Π£Π½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΡΠΉ ΠΈ ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² jQuery!
jqPlot β ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π΄Π»Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ jQuery Javascript. jqPlot ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅, Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΠΈ ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΡΡΠ½ΠΊΡΠΈΠΉ:
- ΠΠ½ΠΎΠ³ΠΎΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
- ΠΡΠΈ Π΄Π°ΡΡ Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΌ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
- ΠΠΎ 9 ΠΎΡΠ΅ΠΉ Y.
- Π’Π΅ΠΊΡΡ ΠΎΡΠΈ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ.
- ΠΠ²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ Π²ΡΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ Π»ΠΈΠ½ΠΈΠΈ ΡΡΠ΅Π½Π΄Π°.
- ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΈ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠΎΡΠ΅ΠΊ Π΄Π°Π½Π½ΡΡ .
- Π Π°Π·ΡΠΌΠ½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
jqPlot β ΠΏΡΠΎΠ΅ΠΊΡ ΠΡΠΈΡΠ° ΠΠ΅ΠΎΠ½Π΅Π»Π»ΠΎ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ.
Π‘ΠΊΠ°ΡΠ°ΡΡ ΡΠ΅ΠΉΡΠ°Ρ! ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΠΈ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ β¦ Π½ΠΎ ΡΡΠΎΠΈΡ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ!
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠΎΠΆΠ΅ΡΡΠ²ΠΎΠ²Π°Π½ΠΈΠ΅.
jqPlot β ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ!
Π Π°ΡΡΠ΅Ρ ΠΈ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π»ΠΈΠ½ΠΈΠΉ, ΠΎΡΠ΅ΠΉ, ΡΠ΅Π½Π΅ΠΉ, Π΄Π°ΠΆΠ΅ ΡΠ°ΠΌΠΎΠΉ ΡΠ΅ΡΠΊΠΈ, ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΌΠΈ Β«ΡΠ΅Π½Π΄Π΅ΡΠ΅ΡΠ°ΠΌΠΈΒ».ΠΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠΆΠ΅ΡΠ° Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ, ΠΏΠ»Π°Π³ΠΈΠ½Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ ΡΠ°ΡΡΠΈΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΡΡΠΆΠ΅ΡΠ°! Π Π±Π°Π·ΠΎΠ²ΠΎΠΌ ΠΊΠΎΠ΄Π΅ jqPlot Π΅ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π»ΠΎΠ²ΡΡΠ΅ΠΊ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ, ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠΈΠΏΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Ρ ΠΎΠ»ΡΡΡ Π² Π³ΡΠ°ΡΠΈΠΊ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅!
ΠΠ½ΠΎΠ³ΠΎΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π»ΠΈΠ½ΠΈΠΉ Ρ 6 Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠΌΠΈ ΡΡΠΈΠ»ΡΠΌΠΈ ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠ²! | ΠΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ ΠΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ! | Shadow ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅Ρ Π»ΠΈΠ½ΠΈΠΈ, ΠΌΠ°ΡΠΊΠ΅ΡΡ, ΡΠ΅ΡΠΊΡ, Π²ΡΠ΅! |
ΠΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΠ΅ ΡΠΎΡΠΊΠΈ Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ Π΄Π°Π½Π½ΡΡ ! | Π’ΠΎΠΏΠΎΡΡ Π΄Π»Ρ Π±ΡΠ΅Π²Π΅Π½ Ρ Π³ΠΈΠ±ΠΊΠΈΠΌΠΈ ΠΌΠ΅ΡΠΊΠ°ΠΌΠΈ! | ΠΠΈΠ½ΠΈΠΈ ΡΡΠ΅Π½Π΄Π° Π²ΡΡΠΈΡΠ»ΡΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ! |
jqPlot Π±ΡΠ» ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ Π² IE 7, IE 8, Firefox, Safari ΠΈ Opera. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²ΠΈΠ΄Π΅ΡΡ jqPlot Π² Π΄Π΅ΠΉΡΡΠ²ΠΈΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ΅ΡΡΠΎΠ² ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
prototype-59 / scene3d: jQuery-ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ 3D-Π³ΡΠ°ΡΠΈΠΊΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ HTML5 ΠΈ X3DOM
SCENE3D β ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ Π΄Π»Ρ jQuery Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ HTML5 ΠΈ X3DOM, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠΉ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΠΈ Π»Π΅Π³ΠΊΠΎΠ³ΠΎ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΡΡ ΡΡΠ΅Π½ Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅
HTML
<ΡΡΠ΅Π½Π°ΡΠΈΠΉ> $ (function () { var myCanvas = $ ('# 3dcanvas'). scene3d (); myCanvas.addBox (); // Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΡ });
jQuery
ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠΎΡΡΠΎ, ΠΊΠ°ΠΊ 1-2-3:
- ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΎΠ»ΡΡ:
// Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ var myCanvas = $ ('# 3dcanvas').scene3d (); // ΠΈΠ»ΠΈ Ρ ΠΎΠΏΡΠΈΡΠΌΠΈ ΠΏΠΎ Π²Π°ΡΠ΅ΠΌΡ Π²ΡΠ±ΠΎΡΡ var myCanvas = $ ('# 3dcanvas'). scene3d ({ ΡΠΈΡΠΈΠ½Π°: Β«600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉΒ», Π²ΡΡΠΎΡΠ°: Β«600 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉΒ», ΡΠΎΠ½: "#eeeeee" });
- Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΠ²ΠΎΠΈ 3D ΠΎΠ±ΡΠ΅ΠΊΡΡ
myCanvas.addSphere ({x: 1, y: 0, z: 2}); myCanvas.addBox ({x: 1, y: 1, z: 2, ΡΠΈΡΠΈΠ½Π°: 1, Π³Π»ΡΠ±ΠΈΠ½Π°: 1, Π²ΡΡΠΎΡΠ°: 1}); myCanvas.addCone ({x: 1, y: 2, z: 2, label: '3D Objects'}); myCanvas.addCylinder ({x: 1, y: -2, z: 2, ΡΠ°Π΄ΠΈΡΡ: 1, Π²ΡΡΠΎΡΠ°: 2, ΡΠ²Π΅Ρ: '# 00aaff'});
ΠΈΠ»ΠΈ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠ·ΠΎΠ²Ρ ajax Π΄Π»Ρ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈΠ· ΡΠ°ΠΉΠ»ΠΎΠ² Π΄Π°Π½Π½ΡΡ ΠΈΠ»ΠΈ Π±Π°Π· Π΄Π°Π½Π½ΡΡ
$.getJSON ("ctors.json ", function (myGraph) { myCanvas.addGraph ({Π΄Π°Π½Π½ΡΠ΅: myGraph}); });
- ΡΠ΅Π»ΡΠΎΠΊ, ΠΏΠΎΠ²ΠΎΡΠΎΡ, ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅ β¦
ΠΠ΅ΠΌΠΎ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ Π² ΠΏΠ°ΠΏΠΊΠ΅ Β«examplesΒ» ΠΈ Π½Π° http://www.livereference.org/scene3d/
ΠΠ²ΡΠΎΡΡΠΊΠΈΠ΅ ΠΏΡΠ°Π²Π°
ΠΡΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ½ΠΎΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΡΠΎΠΉ ΠΆΠ΅ Π»ΠΈΡΠ΅Π½Π·ΠΈΠ΅ΠΉ, ΡΡΠΎ ΠΈ jQuery. ΠΠ΄Π½Π°ΠΊΠΎ Ρ x3dom Π΅ΡΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½Π°Ρ Π»ΠΈΡΠ΅Π½Π·ΠΈΡ. ΠΠΎΠΆΠ°Π»ΡΠΉΡΡΠ°, ΠΏΡΠΎΠ²Π΅ΡΡΡΠ΅ Π½Π° http://www.x3dom.org/
β ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Π°Ρ
Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ jQuery Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²
Π Π΅ΡΡΡΡΡ β’ Π‘ΡΠ΅Π½Π°ΡΠΈΠΈ ΠΠ½Π΄ΡΠΈΠ°Π½ ΠΠ°Π»Π΅Π°Π½Ρ β’ 1 ΡΠ΅Π½ΡΡΠ±ΡΡ 2015 Π³. β’ 6 ΠΌΠΈΠ½ΡΡ ΠΠ ΠΠ§ΠΠ’ΠΠ’Π¬
Π‘Π°ΠΌΠ°Ρ Π²Π°ΠΆΠ½Π°Ρ Π·Π°Π΄Π°ΡΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ jQuery β ΡΡΠΎ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π΅ΠΎΠ±ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΡ , Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π½Π΅ΡΠΊΠ»ΡΠΆΠΈΡ ΠΈ ΡΠΊΡΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ Π² ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΊΡΡ ΠΈ ΡΠΈΡΡΡ ΠΊΡΠ°ΡΠΎΡΠ½ΡΠΌΠΈ ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ Π΄Π»Ρ ΡΠΈΡΠ°ΡΠ΅Π»Ρ, Π½ΠΎ ΠΈ ΡΠΏΡΠΎΡΡΡΡ Π·Π°Π΄Π°ΡΡ. ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΠΎΠ½ΡΠ»ΠΈ.
ΠΡΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript, ΠΏΠΎΡΠ²ΠΈΠ²ΡΠΈΠ΅ΡΡ Π½Π° ΡΡΠ½ΠΊΠ΅ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ, ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΈΠ·Π²Π΅ΡΡΠ½Ρ ΡΠ²ΠΎΠΈΠΌ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΡ
ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π΄ΠΎ ΡΠ΅ΠΌΠΈ ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΡΡΠ΅Π΄ΠΈ ΠΊΠΎΡΠΎΡΡΡ
Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΈΠ·Π²Π΅ΡΡΠ½Ρ Π»ΠΈΠ½ΠΈΠΈ, ΡΡΠΎΠ»Π±ΡΡ ΠΈ ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΡΠ΅ ΠΎΠ΄Π½Π° Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½Π°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΡ ΡΡΠΈΡ
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ β Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΈ ΡΠΌΠ΅Π½ΡΡΠ΅Π½ΠΈΡ ΠΌΠ°ΡΡΡΠ°Π±Π° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, Π² ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΡΠ΅ΠΌ ΠΎΠ±ΡΠ°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΡΠΎΡΠΊΠ°Ρ
Π΄Π°Π½Π½ΡΡ
ΠΈ ΡΡΠΎΠ²Π½ΡΡ
. ΠΡΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ ΡΡΠ΄ ΠΎΠΏΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅.ΠΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π½Π°ΠΉΠ΄Π΅Π½Π° Π·Π°Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, ΠΈ ΡΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π² Π»Π΅Π³ΠΊΠΎΠΌ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΡΡΠ»ΠΎΠΊ.
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ jQuery
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ ΡΠ΅ΡΡΠ΅ΠΆΠΈ Π²Π΅ΠΊΡΠΎΡΠ½ΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊΠΈ Π΄Π»Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ JavaScript. ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ JavaScript ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ΄Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ, ΠΈ ΡΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π·Π°Π³ΡΡΠΆΠ°ΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΡΠΈΠΏ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π½ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΡΡΠ³ΠΎΠΉ ΡΠΈΠΏ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΎΡΠ²ΠΎΠΈΡΡ, Π½ΠΎ ΡΡΠΎ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ
.ΠΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΡΠΌ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΈΡΠΎΠ΄Π΅ ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠ΅ΠΌΠΈ ΡΠ°ΡΡΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π΄Π»Ρ ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡ. ΠΠΎΠΌΠΈΠΌΠΎ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΏΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΎΠ½ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π²ΡΠ΄Π°ΡΡΠ΅ΠΉΡΡ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡΡΡ ΡΠ²Π»Π΅ΠΊΠ°ΡΡ ΠΈ Π²ΠΎΠ²Π»Π΅ΠΊΠ°ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΠΏΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ ΡΠ΄ΠΎΠ±Π½ΡΠΉ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π΅Π»Π°ΡΡ ΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΠ΄Π°ΡΡΠ΅ΠΉΡΡ.
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΈ jQuery, ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ. ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠΈΠΏ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΎΠ»ΡΡΠ° HTML5.Π£ Π½Π΅Π³ΠΎ Π΅ΡΡΡ ΡΠ΅Π»ΡΡ 14 ΠΎΠΏΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
ΠΡΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π±ΠΎΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎ ΠΏΡΠ·ΡΡΡΠΊΠΎΠ²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°Ρ , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΡ Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ Π² ΠΎΠΏΡΠΈΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. ΠΠ΄Π½Π°ΠΊΠΎ, ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, Π±ΡΠ΄Π΅Ρ ΠΎΠΏΡΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π° Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½Π° ΡΡΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΈ Π±ΡΠ΄ΡΡ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΡΡΠ½ΠΊΡΠΈΠΉ, Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ. ΠΠ»Π°Π³ΠΈΠ½ ΠΈΠΌΠ΅Π΅Ρ Π΄ΠΎ 14 ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΌ ΠΏΡΠ·ΡΡΠ΅, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π½Π°Π²ΠΎΠ΄ΠΈΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ Π½Π° ΠΏΡΠ·ΡΡΠ΅ΠΊ.
ΠΡΡΠ³ΠΎΠΉ ΡΠΈΠΏ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΉ Π² ΠΠ΅ΡΠΌΠ°Π½ΠΈΠΈ, Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ JavaScript, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΡΡ
Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ΡΠΊΠΈΡ
ΡΠΎΡΠΌ ΠΈ ΡΠΈΠ³ΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π°Π½Π½ΡΡ
, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ ΠΊΡΠΈΠ²ΡΠ΅ ΠΠ΅Π·ΡΠ΅, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π΄ΠΈΡΡΠ΅ΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. Π±ΠΎΠ»Π΅Π΅. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π΄Π²ΠΈΠΆΡΡΠΈΠ΅ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΈ, Π΄Π»Ρ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠΎΠ² Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΠΈΠΌΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
ΠΈ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ±ΠΈΡΠ°ΡΡ.
ΠΠΎΠ½ΡΡΡΡΠΊΡΠΎΡ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΡΡ ΠΏΠΈΡΠ΅ΠΌ
Π‘ Postcards Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°Π±Π»ΠΎΠ½Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ ΠΎΠ½Π»Π°ΠΉΠ½ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ Π½Π°Π²ΡΠΊΠΎΠ² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ! ΠΠΊΠ»ΡΡΠ°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 100 ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΏΠΈΡΠ΅ΠΌ Π±ΡΡΡΡΠ΅Π΅, ΡΠ΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΡΡΠ³ΠΈΠ΅ ΠΏΡΠΎΠ΄ΡΠΊΡΡ ΠΡ ΡΠ°ΠΊΠΆΠ΅ Π²ΡΡΡΠ΅ΡΠΈΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠΈΠΏΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ jQuery, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Ρ
ΠΎΠ»ΡΡΡ HTML5 Π΄Π»Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π½Π°ΡΡΠ΄Ρ Ρ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΡΠΎ ΡΡΠΎΡΠΎΠ½Ρ Internet Explorer.ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΡΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π΄ΠΎΡΡΡΠΏΠ½Ρ Ρ ΡΠ΅ΡΡΡΡ Π²ΠΈΠ΄Π°ΠΌΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠΎΡΠΊΠΈ, ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΡΡΠΎΠ»Π±ΡΡ, Π»ΠΈΠ½ΠΈΠΈ Ρ ΡΠΎΡΠΊΠ°ΠΌΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ ΠΎΠ±Π»Π°ΡΡΡΠΌΠΈ. ΠΡΠΈ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π»Π΅Π³Π΅Π½Π΄Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ, ΠΈ ΡΡΠΎ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π² ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΉ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° Π³ΡΠ°ΡΠΈΠΊΠ°Ρ
. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π°ΠΌ ΠΏΠΎ CSS-Π³ΡΠ°ΡΠΈΠΊΠ°ΠΌ ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°ΠΌ.
ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΈ jQuery
Chartist: ΠΏΡΠΎΡΡΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ
Chartist ΡΠΎΠ·Π΄Π°Π½ Ρ ΡΡΠ΅ΡΠΎΠΌ Π±ΡΡΡΡΠΎΡΡ ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½ Π½Π° ΠΏΡΠΈΠ½ΡΠΈΠΏΠ°Ρ SVG.Π’Π°ΠΊ ΡΡΠΎ ΡΡΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ Π΄Π»Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΅ΡΠΊΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ»ΠΈ ΡΡΠ°ΡΠΈΡΡΠΈΠΊΡ Π½Π° Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅, ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ ΠΈ ββΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°Ρ .
ΠΡΠΎ ΡΠ²Π΅ΡΡ Π»Π΅Π³ΠΊΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ»ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ². ΠΡΠΎ Π΄ΡΡΠΆΠ΅Π»ΡΠ±Π½ΠΎ ΠΈ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΊΠ°ΠΊ Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ², ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ².
ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ CSS3 ΠΈ jQuery Graph
ΠΠΎΠ»ΡΡΠΈΠΌ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΡΠΎΠ³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΡ. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ Π»Π΅Π³ΠΊΠΈΠΉ ΠΈ ΠΈΠ·ΡΡΠΊΠ°Π½Π½ΡΠΉ.ΠΠ°Π»Π΅ΡΠΈΡ Π’ΠΈΠΌΠ±ΡΠΊ ΠΌΠ°ΡΡΠ΅ΡΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° Π±Π°Π·Π΅ JavaScript Β«FlotΒ» ΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ
Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. Π£ΡΠ΅Π±Π½ΠΎΠ΅ ΠΏΠΎΡΠΎΠ±ΠΈΠ΅ Π·Π°ΠΉΠΌΠ΅Ρ ΠΎΠ΄ΠΈΠ½ ΡΠ°Ρ Π²Π°ΡΠ΅Π³ΠΎ Π΄ΡΠ°Π³ΠΎΡΠ΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΡΠ½ΠΈΡΡ Π²ΡΠ΅ Π½Π΅ΡΡΠ½ΡΠ΅ ΠΌΠΎΠΌΠ΅Π½ΡΡ. ΠΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΊΠ°ΠΊ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ², ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΠΎΠ².
Highcharts
ΠΡΡΠΎΠΊΠΈΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ β ΡΡΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ, Π½ΠΎ Π³ΠΈΠ±ΠΊΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠΌΠ΅ΡΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅ Π² ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠ΅ ΠΈ Ρ ΠΎΡΠΎΡΠΎ ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠ΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.ΠΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° Π½ΠΎΠ²ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΡ , ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ HTML5, ΠΎΠ½ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΊΡΡΡΡ Π΅Π³ΠΎ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π».
ΠΠ½ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π²ΠΊΠ»ΡΡΠ°Ρ IE6. ΠΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, Π² Π½Π΅ΠΌ Π΅ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠ΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Ρ Π΄Π°Ρ, Π²ΡΠ±ΠΎΡ Π΄Π°ΡΡ, ΠΏΡΠΎΠΊΡΡΡΠΊΠ° ΠΈΠ»ΠΈ ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
jqPlot
jqPlot Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΡΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π½ΠΎ ΠΎΠ½ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΌΠΎΡΠ½ΡΠΉ Π² ΡΠΎΠΌ, ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π΄Π΅Π»Π°ΡΡ. ΠΠ½ Ρ
ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ Π΄Π°Π½Π½ΡΠΌΠΈ ΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΡ
Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎ, ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Ρ ΡΠΊΡΡΠ½ΡΡ ΡΡΠ°ΡΠΈΡΡΠΈΠΊΡ Π² ΠΏΡΠΈΡΡΠ½ΡΡ Π΄Π»Ρ Π³Π»Π°Π· ΠΈ ΡΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΡ. ΠΠ½ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»Π΅Π½ ΠΈ ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌ. Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ
Ρ
Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊ, ΡΠΎ ΡΡΠΎ:
- Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΡΠΈΠ»Ρ Π»ΠΈΠ½ΠΈΠΈ ΡΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠ²;
- Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΡΡΠΎΠ»Π±ΡΠ°ΡΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ;
- ΡΠΎΡΠ΅ΠΊ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ;
- Π±ΡΠ΅Π²Π΅Π½ΡΠ°ΡΡΡ ΠΎΡΠ΅ΠΉ Ρ Π΄Π΅Π»Π΅Π½ΠΈΡΠΌΠΈ;
- Π΄ΠΎ 9 ΠΎΡΠ΅ΠΉ Y;
- Π»ΠΈΠ½ΠΈΠΉ ΡΡΠ΅Π½Π΄Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π³Π΅Π½Π΅ΡΠΈΡΡΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ;
- ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ, ΡΡΠΎ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΡΠ΅Π½ΡΠΌΠΈ Π΄Π»Ρ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π»ΠΈΠ½ΠΈΠΉ, ΠΌΠ΅ΡΠΎΠΊ ΠΈ ΡΠ΅ΡΠΎΠΊ.
Π€Π»ΠΎΡ
Flot β ΡΡΠΎ ΠΊΡΠΎΡΠ΅ΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° jQuery Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΈΡΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌΠΈ.ΠΠ³ΠΎ ΠΎΡΠ»ΠΈΡΠ°Π΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΠΉ Π²ΠΈΠ΄, ΠΏΠΎΡΡΠΎΠΌΡ Π²Ρ Π½Π΅ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π·Π΄Π΅ΡΡ Π½ΠΈΡΠ΅Π³ΠΎ Π΄Π΅ΠΊΠΎΡΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ, ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΡΡΠ΅ ΡΠΎΡΠΌΡ ΠΈ ΠΎΠ΄Π½ΠΎΡΠΎΠ½Π½ΡΠ΅ ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠ΅ ΡΠ²Π΅ΡΠ½ΡΠ΅ ΡΠΎΠ½Ρ. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΈ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π²Π°ΡΠΈΠΌΠΈ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡΠΌΠΈ ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΡΠΌΠΈ.
ΠΠ½ Π±ΡΠ» ΡΡΠΏΠ΅ΡΠ½ΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ Ρ IE6 +, Chrome ΠΈ ΡΡΠ°ΡΡΠΌΠΈ Π²Π΅ΡΡΠΈΡΠΌΠΈ Safari, Firefox.
ΡΠΏΠ°ΡΠΊΠ»Π°ΠΉΠ½ΠΎΠ² jQuery
JQuery Sparklines β ΡΡΠΎ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈΠ· Π΄Π°Π½Π½ΡΡ , ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΌ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ HTML ΠΈΠ»ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠΌΠΈ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ JavaScript.ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΠΈΠ·
- Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌ;
- ΡΠΎΡΡΠ°Π²Π½ΡΡ Π»ΠΈΠ½ΠΈΠΉ; ΠΠΎΠΌΠΏΠΎΠ·ΠΈΡΠ½ΡΠΉ Π±ΡΡΡ
- ;
- Π΄ΠΈΡΠΊΡΠ΅ΡΠ½ΡΠΉ Ρ ΠΏΠΎΡΠΎΠ³ΠΎΠΌ ΠΈΠ»ΠΈ Π±Π΅Π·;
- ΡΡΠ΅Ρ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ;
- ΠΊΡΡΠ³ΠΎΠ²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ;
- ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠ²; ΠΠΎΡΠΎΠ±ΡΠ°ΡΡΠΉ ΡΡΠΆΠ΅Ρ
- ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅.
ΠΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΎΠΊΡΠ°ΡΠΊΡ.
TufteGraph
TufteGraph Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΡΠΈΡΡΡΠ΅ ΠΈ ΠΏΡΠΎΡΡΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°ΡΡ ΠΊΡΠ°ΡΠΎΡΡ ΠΏΠ»ΠΎΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΠΈ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π±Π΅Π»ΠΎΠ³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²Π°.ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ jQuery Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π²ΡΠ΅ΠΉ ΡΡΠΆΠ΅Π»ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΠΎΡΠ΅Π½Ρ Π±ΡΡΡΡΠΎ ΠΈ ΠΏΠΎΡΡΠΈ Π±Π΅Π· ΡΠ±ΠΎΠ΅Π². Π§ΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²Π½Π΅ΡΡΠΈ Π»ΡΠ±ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ ΠΈΠ»ΠΈ Ρ
ΠΎΡΠΈΡΠ΅, ΠΏΡΠΎΡΡΠΎ ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Ρ CSS ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π΅Π³ΠΎ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΎΠ½ Π±ΡΠ» ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ ΡΠΎΠ»ΡΠΊΠΎ Π² Firefox 3 ΠΈ Safari 3.
JS-Π³ΡΠ°ΡΠΈΠΊΠΈ
JS Charts β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π±ΡΡΡΡΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. Π₯ΠΎΡΡ Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ ΡΡΠΎ ΡΡΠ΅Π±ΡΠ΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π½ΠΎ ΡΡΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΠΎ Π΄Π°ΠΆΠ΅ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ Π½Π΅ ΡΠ°Π·Π±ΠΈΡΠ°Π΅ΡΡΡ Π² ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΡ .ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΅Π³ΠΎ ΠΎΠ½Π»Π°ΠΉΠ½ ΠΈ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ Π² Π»ΡΠ±ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡ Π±Π΅Π· Π»ΠΈΡΠ½ΠΈΡ Ρ Π»ΠΎΠΏΠΎΡ ΠΈ ΡΡΠ΅ΡΡ. ΠΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ:
- ΠΏΠ»ΠΎΡΠΊΠΈΡ ΠΈΠ»ΠΈ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΡΡ ΠΊΡΡΠ³ΠΎΠ²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ;
- ΠΏΠ»ΠΎΡΠΊΠΈΡ ΠΈΠ»ΠΈ ΡΡΠ΅Ρ ΠΌΠ΅ΡΠ½ΡΡ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌ;
- Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ².
ΠΡΡΡ ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π±Π»Π΅ΡΠΊ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈΠ»ΠΈ ΠΌΠ΅ΡΠΎΠ΄Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ.
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Google Chart
Google Chart Tools β ΡΡΠΎ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠΉ ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠ²Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π² ΠΎΡΠ³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΌ ΠΈ Π°ΠΊΠΊΡΡΠ°ΡΠ½ΠΎΠΌ Π²ΠΈΠ΄Π΅. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠΉ Π³Π°Π»Π΅ΡΠ΅Π΅ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ
Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Π·Π° ΡΠ΅ΠΊΡΠ½Π΄Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡΠΈΠΌ Π΄Π»Ρ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ
ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π³ΡΠ°ΡΠΈΠΊ Π±ΡΠ΄Π΅Ρ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ°Ρ
, ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
.
GraphUp β ΠΏΠ»Π°Π³ΠΈΠ½ jQuery
GraphUp β ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery ΠΏΡΠ΅ΠΌΠΈΡΠΌ-ΠΊΠ»Π°ΡΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π΅ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ. ΠΠ½ ΠΎΡΠ΅Π½Ρ Π»Π΅Π³ΠΊΠΈΠΉ ΠΈ Ρ ΠΎΡΠΎΡΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°ΡΡΠΈΡΡΠ΅ΠΌΡΠΌ, ΡΠ°ΠΊ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°ΡΡΠΈΡΡΡΡ Π΅Π³ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ, ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΎΡΠΈΡΡΠΈΡΠ΅Π»ΠΈ, ΡΠΈΡΠΎΠ²Π°Π»ΡΡΠΈΠΊΠΈ ΠΈ ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ ΠΊΠ°ΡΡΡ.ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΡΠΌ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡΠΌ Π³ΡΠ°ΡΠΈΠΊ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅Ρ Π΄Π°Π½Π½ΡΠ΅ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π΄Π°ΠΆΠ΅ Π±Π΅Π· Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ JavaScript.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π₯ΠΎΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π±Π΅ΡΠΏΠ»Π°ΡΠ½Ρ, ΡΠ°ΠΊ ΡΡΠΎ Ρ Π½ΠΈΡ
Π½Π΅Ρ Π½Π°Π΄Π»Π΅ΠΆΠ°ΡΠ΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ², ΠΎΠ½ΠΈ ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΡΠ²ΠΎΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΡ. ΠΠ½ΠΈ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΡΡ ΡΡΠ°ΡΠΈΡΡΠΈΠΊΡ Π² Π²ΠΈΠ΄Π΅ ΠΊΠ»Π°ΡΡΠΈΡΠ΅ΡΠΊΠΈΡ
Π³ΡΠ°ΡΠΈΠΊΠΎΠ², Π½ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ Π²Π°ΠΌ ΡΠ΅Π»ΡΠΉ ΡΡΠ΄ ΠΎΠΏΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΡΠ΅Π·Π΅Π½ΡΠ°ΡΠΈΡ Π²ΡΠ΄Π°ΡΡΠ΅ΠΉΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ°ΡΠΊΡΠ°ΡΠΊΡ, ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π»Π΅Π³Π΅Π½Π΄Π°ΠΌΠΈ ΠΈΠ»ΠΈ ΠΎΡΡΠΌΠΈ ΠΈ Π΄Π°ΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΡΡΠΈ ΠΈΠ»ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΆΠΈΠ²ΡΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ.
Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, Π½Π΅ Π²ΡΠ΅ ΠΈΠ· Π²ΡΡΠ΅ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ Π²Π°ΠΌ Ρ ΠΎΡΠΎΡΠΈΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π½Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , Π½ΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΈΠ· Π½ΠΈΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΡ ΡΠΎ ΡΡΠ°ΡΡΠΌΠΈ Π²Π΅ΡΡΠΈΡΠΌΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΡΡΠΎ Π²Π΅ΡΡΠΌΠ° Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠ΅ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ.
ΠΡΠ°Π²ΠΈΡΡΡ ΡΠΎ, ΡΡΠΎ Π²Ρ ΡΠΈΡΠ°Π΅ΡΠ΅? ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΠ΅ΡΡ Π½Π° Π½Π°ΡΠΈ Π³Π»Π°Π²Π½ΡΠ΅ Π½ΠΎΠ²ΠΎΡΡΠΈ.
18+ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ JavaScript Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ Π»ΡΠ±ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π±Π΅Π· Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. ΠΠ½ΠΈ Π±ΡΡΡΡΠΎ ΠΈ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΡ ΡΡΠ°ΡΠΈΡΡΠΈΠΊΡ.ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Ρ ΠΎΡΠΎΡΠΈΠΉ Π³ΡΠ°ΡΠΈΠΊ ΡΠ°ΠΊΠΆΠ΅ ΡΠ»ΡΡΡΠ°Π΅Ρ ΠΎΠ±ΡΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ Π²Π°ΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π»ΡΡΡΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ JavaScript Π΄Π»Ρ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. ΠΡΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ Π²Π°ΡΠΈΡ Π±ΡΠ΄ΡΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ².
Π₯ΠΎΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΡΠ²Π»ΡΡΡΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΌΠΈ ΠΈ ΠΈΠΌΠ΅ΡΡ ΠΎΡΠΊΡΡΡΡΠΉ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄, Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π½ΠΈΡ
ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΏΠ»Π°ΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ.
ΠΡΠ° ΡΡΠ°ΡΡΡ Π±ΡΠ»Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π° ββΠ² ΠΌΠ°Π΅ 2019 Π³. ΠΈ ΠΎΡΡΠ°ΠΆΠ°Π΅Ρ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript.
D3.js β ΠΠΎΠΊΡΠΌΠ΅Π½ΡΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π΄Π°Π½Π½ΡΡ
ΠΠΎΠ³Π΄Π° ΠΌΡ Π΄ΡΠΌΠ°Π΅ΠΌ ΠΎ Π³ΡΠ°ΡΠΈΠΊΠ°Ρ ΡΠ΅Π³ΠΎΠ΄Π½Ρ, ΠΏΠ΅ΡΠ²ΠΎΠ΅, ΡΡΠΎ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡ Π½Π° ΡΠΌ, β ΡΡΠΎ D3.js. ΠΡΠ΄ΡΡΠΈ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, D3.js ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΌΠΎΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΡΡΡΡΡΠ²ΠΎΠ²Π°Π»ΠΈ Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ. Π’Π°ΠΊΠΈΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΠΊΠ°ΠΊ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, Π²Ρ ΠΎΠ΄ ΠΈ Π²ΡΡ ΠΎΠ΄, ΠΌΠΎΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΠΈ Π·Π½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ jQuery, Π΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π»ΡΡΡΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ JavaScript Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. ΠΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π² D3.js ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML, SVG ΠΈ CSS.
Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΌΠ½ΠΎΠ³ΠΈΡ Π΄ΡΡΠ³ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ JavaScript, D3.js Π½Π΅ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Π³ΠΎΡΠΎΠ²ΡΠΌΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ ΠΈΠ· ΠΊΠΎΡΠΎΠ±ΠΊΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΠΏΠΈΡΠΎΠΊ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ D3.js, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΎΠ±Π·ΠΎΡ. ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, D3.js ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΠΎΠ³ΡΠΎΠΌΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
ΠΠ΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠΌ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΊΡΡΡΠ°Ρ ΠΊΡΠΈΠ²Π°Ρ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ, Π½ΠΎ Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ² ΠΈ ΡΠ΅ΡΡΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³ΡΡ Π²Π°ΠΌ Π½Π°ΡΠ°ΡΡ.
D3.js ΠΏΠ»ΠΎΡ ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎ ΡΡΠ°ΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ IE8. ΠΠΎ Π²Ρ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½Ρ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠ»Π°Π³ΠΈΠ½ aight, Π΄Π»Ρ ΠΊΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠ·ΡΡΠΈΡΡ D3.js Ρ Π½Π°Ρ Π΅ΡΡΡ ΠΊΠ½ΠΈΠ³Π° ΠΏΠΎ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ D3.
Google ΠΠ°ΡΡΡ
Google Charts β ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π²ΡΠ±ΠΎΡ Π΄Π»Ρ ΠΏΡΠΎΡΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², Π½Π΅ ΡΡΠ΅Π±ΡΡΡΠΈΡ ΡΠ»ΠΎΠΆΠ½ΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ. ΠΠ½ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π³ΠΎΡΠΎΠ²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ ΠΎΠ±Π»Π°ΡΡΡΠΌΠΈ, Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΠΊΠ°Π»Π΅Π½Π΄Π°ΡΠ½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, Π³Π΅ΠΎΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. ΠΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Ρ, ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΡ Π½Π° ΡΠ²ΠΎΡ ΡΡΡΠ°Π½ΠΈΡΡ Π·Π° ΡΡΠΈΡΠ°Π½Π½ΡΠ΅ ΠΌΠΈΠ½ΡΡΡ.
Google Charts ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π³ΡΠ°ΡΠΈΠΊΠ°.ΠΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ HTML5 / SVG Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ ΠΈ ΠΊΡΠΎΡΡΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅Π½Π½ΠΎΡΡΠΈ Π½Π° iPhone, iPad ΠΈ Android. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ VML Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΡΠ°ΡΡΡ
Π²Π΅ΡΡΠΈΠΉ IE.
ΠΠΎΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Google Charts.
ΠΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°JS
ChartJS ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΠΏΠ»ΠΎΡΠΊΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π»Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML5 Canvas Π΄Π»Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ (IE11 +).
ΠΠΈΠ°Π³ΡΠ°ΠΌΠΌΡChartJS ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ²Π»ΡΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ.ΠΠ½ΠΈ Ρ ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ . ΠΡΡΡ 8 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ (Π»ΠΈΠ½ΠΈΡ, ΡΡΠΎΠ»Π±ΠΈΠΊ, ΡΠ°Π΄Π°Ρ, ΠΏΠΎΠ½ΡΠΈΠΊ ΠΈ ΠΊΡΡΠ³ΠΎΠ²Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°, ΠΏΠΎΠ»ΡΡΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡΡ, ΠΏΡΠ·ΡΡΡ, ΡΠΎΡΠ΅ΡΠ½Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°, ΠΏΠ»ΠΎΡΠ°Π΄Ρ), Π° ΡΠ°ΠΊΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΈΡ ΡΠΌΠ΅ΡΠΈΠ²Π°ΡΡ. ΠΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Ρ ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡΡΡ.
ΠΠΎΡ ΡΡΠ°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ², ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ChartJS.
Chartist.js
Chartist.js ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠ°ΠΊ ΠΈ ChartJS, Chartist.js β ΠΏΡΠΎΠ΄ΡΠΊΡ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π°, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠ°Π·ΠΎΡΠ°ΡΠΎΠ²Π°Π»ΠΎΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π΄ΠΎΡΠΎΠ³ΠΈΡ
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript.ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ SVG Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΠΎΠ² CSS3 ΠΈ Sass. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Chartist.js ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΊΠ»Π°ΡΡΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΡΡΠΈΡΡ ΠΈ ΠΏΠΎΠΈΠ³ΡΠ°ΡΡ Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌΠΈ ΡΠΈΠΏΠ°ΠΌΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Chartist.js. ΠΡΠ°ΡΠΈΠΊΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Ρ, ΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ Π½Π° Π»Π΅ΡΡ.
Π§Π°ΡΡΡ
Recharts β ΡΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½ΡΠ΅ΠΌΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Ρ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΡΠΌΠΈ, ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ React.ΠΠ½ ΠΏΠΎΡΡΡΠΎΠ΅Π½ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² SVG ΠΈ D3.js. ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ ΡΠΎ ΡΠΏΠΈΡΠΊΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
n3-Π³ΡΠ°ΡΠΈΠΊΠΈ
ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ Angular, Π²Ρ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ n3-Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌΠΈ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΡΠΌΠΈ. n3-charts ΠΏΠΎΡΡΡΠΎΠ΅Π½ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3.js ΠΈ Angular. ΠΠ½ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π² Π²ΠΈΠ΄Π΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΈΠ² Angular.
ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΡΡΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ n3-Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
ΠΡΠ°ΡΠΈΠΊΠΈ Ember
Ember Charts β Π΅ΡΠ΅ ΠΎΠ΄Π½Π° ΠΎΡΠ»ΠΈΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ D3. js ΠΈ Ember.js. ΠΠ½ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΡΠ΄Ρ, Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ ΡΠΎΡΠ΅ΡΠ½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ SVG Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
ZingChart
ZingChart ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π³ΠΈΠ±ΠΊΠΈΠΉ, ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ, Π±ΡΡΡΡΡΠΉ, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠΉ ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΉ ΠΏΡΠΎΠ΄ΡΠΊΡ Π΄Π»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. ΠΡ ΠΏΡΠΎΠ΄ΡΠΊΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΡΠΌΠΈ, ΠΊΠ°ΠΊ Apple, Microsoft, Adobe, Boeing ΠΈ Cisco, ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Ajax, JSON, HTML5 Π΄Π»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
ZingChart ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 35 ΡΠΈΠΏΠΎΠ² ΠΈ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅ Π² ΡΠ΅ΠΆΠΈΠΌΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.ΠΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ ΠΈ ΡΠ΅ΠΌΠ°ΡΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΠΈ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡΡΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ Π΄Π°Π½Π½ΡΠ΅.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ ΠΈΡ Π±ΠΎΠ³Π°ΡΡΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
Π€ΠΈΡΠΌΠ΅Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ, Π½ΠΎ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° Π±Π΅Π· Π²ΠΎΠ΄ΡΠ½ΡΡ
Π·Π½Π°ΠΊΠΎΠ² Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΡΠΈ ΠΎΠ΄Π½Ρ ΠΈΠ· ΠΏΠ»Π°ΡΠ½ΡΡ
Π»ΠΈΡΠ΅Π½Π·ΠΈΠΉ ZingChart Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ Π²Π°ΡΠ΅Π³ΠΎ Π±ΠΈΠ·Π½Π΅ΡΠ°.
Highcharts
Highcharts β Π΅ΡΠ΅ ΠΎΠ΄Π½Π° ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ². ΠΠ½ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΈΠΏΠΎΠ² ΠΊΠ»Π°ΡΡΠ½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΠ²Π»Π΅ΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.ΠΠ°ΠΊ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ, Highcharts ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ Π³ΠΎΡΠΎΠ²ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠΏΠ»Π°ΠΉΠ½, ΠΏΠ»ΠΎΡΠ°Π΄Ρ, ΠΎΠ±Π»Π°ΡΡΡ, ΡΡΠΎΠ»Π±Π΅Ρ, ΡΡΠΎΠ»Π±Π΅Ρ, ΠΊΡΡΠ³ΠΎΠ²Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°, ΡΠ°Π·Π±ΡΠΎΡ ΠΈ Ρ. Π. ΠΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½Ρ ΠΈ Π³ΠΎΡΠΎΠ²Ρ ΠΊ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌΠΈ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Highcharts ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π°Π½Π½ΠΎΡΠ°ΡΠΈΠΉ ΠΊ Π²Π°ΡΠΈΠΌ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°ΠΌ.
ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ°ΠΌΡΡ Π±ΠΎΠ»ΡΡΠΈΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Highcharts ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ ΡΠΎ ΡΡΠ°ΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ β Π΄Π°ΠΆΠ΅ Π½Π°ΡΠΈΠ½Π°Ρ Ρ Internet Explorer 6. Π‘ΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ SVG Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π³ΡΠ°ΡΠΈΠΊΠΈ. Π ΡΡΡΠ°ΡΠ΅Π²ΡΠ΅ΠΌ Internet Explorer Π³ΡΠ°ΡΠΈΠΊΠ° ΡΠΈΡΡΠ΅ΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ VML.
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ
ΡΠ·ΡΠΊΠΎΠ² (.NET, PHP, Python, R ΠΈ Java) ΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² (Angular, Vue ΠΈ React), Π° ΡΠ°ΠΊΠΆΠ΅ Π΄Π»Ρ iOS ΠΈ Android.
Π₯ΠΎΡΡ Highcharts Π±Π΅ΡΠΏΠ»Π°ΡΠ΅Π½ Π΄Π»Ρ Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΡΠΈ Π»ΠΈΡΠ΅Π½Π·ΠΈΡ Π΄Π»Ρ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
FusionCharts
FusionCharts β ΠΎΠ΄Π½Π° ΠΈΠ· ΡΡΠ°ΡΠ΅ΠΉΡΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript, Π²ΡΠΏΡΡΠ΅Π½Π½Π°Ρ Π΅ΡΠ΅ Π² 2002 Π³ΠΎΠ΄Ρ. ΠΠΌΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ 100+ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ 1400+ ΠΊΠ°ΡΡ, Π»Π΅Π³ΠΊΠΎ ΡΠΊΠ°Π·Π°ΡΡ, ΡΡΠΎ FusionCharts β ΡΠ°ΠΌΠ°Ρ ΠΏΠΎΠ»Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript.ΠΠ½ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°ΠΌΠΈ JavaScript ΠΈ ΡΠ·ΡΠΊΠ°ΠΌΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΡΠ΅ΡΠ²Π΅ΡΠ°. ΠΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ HTML5 / SVG ΠΈ VML Π΄Π»Ρ Π»ΡΡΡΠ΅ΠΉ ΠΏΠ΅ΡΠ΅Π½ΠΎΡΠΈΠΌΠΎΡΡΠΈ ΠΈ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ ΡΠΎ ΡΡΠ°ΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ β Π΄Π°ΠΆΠ΅ Π²ΠΏΠ»ΠΎΡΡ Π΄ΠΎ Internet Explorer 6. ΠΡΠ° ΠΎΠ±ΡΠ°ΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ ΡΠ΄Π΅Π»Π°Π»Π° Π΅Π³ΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ Π² ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»Π³ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π² ΡΠΎΡΠΌΠ°ΡΡ JPG, PNG, SVG ΠΈ PDF.
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²Π΅ΡΡΠΈΡ FusionCharts Ρ Π²ΠΎΠ΄ΡΠ½ΡΠΌΠΈ Π·Π½Π°ΠΊΠ°ΠΌΠΈ Π² Π»ΠΈΡΠ½ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ . ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π»Ρ ΡΠ΄Π°Π»Π΅Π½ΠΈΡ Π²ΠΎΠ΄ΡΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΠΊΠ° Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΡΠΈ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΡΡ Π»ΠΈΡΠ΅Π½Π·ΠΈΡ.
Π€Π»ΠΎΡ
Flot β ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π³ΡΠ°ΡΠΈΠΊΠΎΠ² JavaScript Π΄Π»Ρ jQuery. ΠΡΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΎΠ΄Π½Π° ΠΈΠ· ΡΡΠ°ΡΠ΅ΠΉΡΠΈΡ
ΠΈ ΡΠ°ΠΌΡΡ
ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ².
Flot ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π»ΠΈΠ½ΠΈΠΈ, ΡΠΎΡΠΊΠΈ, Π·Π°ΠΊΡΠ°ΡΠ΅Π½Π½ΡΠ΅ ΠΎΠ±Π»Π°ΡΡΠΈ, ΠΏΠΎΠ»ΠΎΡΡ ΠΈ Π»ΡΠ±ΡΠ΅ ΠΈΡ ΠΊΠΎΠΌΠ±ΠΈΠ½Π°ΡΠΈΠΈ. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ ΡΠΎ ΡΡΠ°ΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ β Π½Π°ΡΠΈΠ½Π°Ρ Ρ IE6 ΠΈ Firefox 2.
Flot ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ΅Π½ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΠΎΡ ΡΠΏΠΈΡΠΎΠΊ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Flot.
amCharts
amCharts, Π½Π΅ΡΠΎΠΌΠ½Π΅Π½Π½ΠΎ, ΠΎΠ΄Π½Π° ΠΈΠ· ΡΠ°ΠΌΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ².ΠΠ½ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΊΠ°ΠΊ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΡΠ°ΠΊ ΠΈ Π³Π΅ΠΎΠ³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΊΠ°ΡΡΡ (Map Chart), ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ .
ΠΠ°ΠΊΠ΅Ρ Map Chart ΠΎΡΠ΅Π½Ρ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΠ΅Ρ. ΠΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²ΡΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΊΠ°ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΠΎΠΊ ΠΊΠΎΠ΄Π°. ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΠ· Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠΎΡ ΠΏΠ°ΠΊΠ΅Ρ, Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΈΠΈ ΠΊΠ°ΡΡ, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ ΠΈ ΡΠ΅ΠΏΠ»ΠΎΠ²ΡΠ΅ ΠΊΠ°ΡΡΡ. ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠ°ΡΡ Π² ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ΅, ΠΈ Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅.
amCharts ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ SVG Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π²ΠΎ Π²ΡΠ΅Ρ
ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. ΠΠ½ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌΠΈ TypeScript, Angular, React, Vue ΠΈ ΠΏΡΠΎΡΡΡΠΌ JavaScript.
ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΡΡΠΎΠΉ ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠ΅ΠΉ ΠΊΠ»Π°ΡΡΠ½ΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΉ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ amCharts.
ΠΠ΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ Π²Π΅ΡΡΠΈΡ amChart Π±ΡΠ΄Π΅Ρ ΠΎΡΡΠ°Π²Π»ΡΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° ΡΠ²ΠΎΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π³ΡΠ°ΡΠΈΠΊΠ°.
EAOharts
EAOharts β ΡΡΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΄ΠΎΠΌΠ°ΡΠ½ΠΈΡ ΠΈ Π΄Π΅Π»ΠΎΠ²ΡΡ Π΄Π°Π½Π½ΡΡ . ΠΡΠ°ΡΠΈΠΊΠΈ ΡΠΈΡΡΡΠ΅, ΡΠ΄ΠΎΠ±ΠΎΡΠΈΡΠ°Π΅ΠΌΡΠ΅ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅. EAOharts ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌ ΡΠΎ ΡΡΠ°ΡΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, Π²ΠΏΠ»ΠΎΡΡ Π΄ΠΎ IE6. ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΡΡΠΈΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
uvCharts
uvCharts β ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΡΠ²Π΅ΡΠΆΠ΄Π°Π΅Ρ, ΡΡΠΎ ΠΈΠΌΠ΅Π΅Ρ Π±ΠΎΠ»Π΅Π΅ 100 Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ.ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ 12 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈΠ· ΠΊΠΎΡΠΎΠ±ΠΊΠΈ.
uvCharts ΠΏΠΎΡΡΡΠΎΠ΅Π½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ D3.js. ΠΠ½ ΠΎΠ±Π΅ΡΠ°Π΅Ρ ΡΡΡΡΠ°Π½ΠΈΡΡ Π²ΡΠ΅ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΡΠ°ΡΡΠΈ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ· D3.js ΠΈ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΏΡΠΎΡΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ
ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. uvCharts Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ SVG ΠΈ HTML5, ΠΏΠΎΡΡΠΎΠΌΡ ΠΎΠ½ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ.
Plotly.js
Plotly.js β ΠΏΠ΅ΡΠ²Π°Ρ Π½Π°ΡΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠΊΡΡΡΡΠΉ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Ρ 2015 Π³ΠΎΠ΄Π°, ΡΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π»ΡΠ±ΠΎΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ.Plotly.js ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ 20 ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΊΠ°ΡΡΡ SVG, 3D-Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ ΡΡΠ°ΡΠΈΡΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ. ΠΠ½ ΠΏΠΎΡΡΡΠΎΠ΅Π½ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3.js ΠΈ stack.gl.
CanvasJS
CanvasJS β ΡΡΠΎ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ HTML5 Ρ Π²ΡΡΠΎΠΊΠΎΠΉ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ ΠΈ ΠΏΡΠΎΡΡΡΠΌ API. ΠΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ 30 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ (Π²ΠΊΠ»ΡΡΠ°Ρ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅, ΡΡΠΎΠ»Π±ΡΡ, ΡΡΠΎΠ»Π±ΡΡ, ΠΎΠ±Π»Π°ΡΡΠΈ, ΡΠΏΠ»Π°ΠΉΠ½Ρ, ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΠΊΠΎΠ»ΡΡΠ΅Π²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ Π½Π°ΠΊΠΎΠΏΠ»Π΅Π½ΠΈΠ΅ΠΌ ΠΈ Ρ. Π.), ΠΠΎΡΠΎΡΡΠ΅ Ρ
ΠΎΡΠΎΡΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Ρ. ΠΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ, ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΏΠ°Π½ΠΎΡΠ°ΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΈ Ρ. Π.CanvasJS ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°ΠΌΠΈ (Angular, React ΠΈ jQuery) ΠΈ ΡΠ΅ΡΠ²Π΅ΡΠ½ΡΠΌΠΈ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌΠΈ (PHP, Ruby, Python, ASP. Net, Node.JS, Java).
ΠΠΎΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ CanvasJS.
TOAST UI Chart
TOAST UI Chart β ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠ°Ρ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Π²ΠΊΠ»ΡΡΠ°Ρ IE8. ΠΠ½ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π²ΡΠ΅ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠ΅ ΡΠΈΠΏΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ ΠΊΠ°ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠ΅ΠΌ. ΠΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½Ρ Π² ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΡΠΎΠ»Π±Π΅Ρ Ρ Π»ΠΈΠ½ΠΈΠ΅ΠΉ ΠΈΠ»ΠΈ Π»ΠΈΠ½ΠΈΡ Ρ ΠΎΠ±Π»Π°ΡΡΡΡ ΠΈ Ρ. Π.ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ ΠΏΠΎΠ»Π½ΡΠΌ ΡΠΏΠΈΡΠΊΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
AnyChart
AnyChart β ΡΡΠΎ Π»Π΅Π³ΠΊΠ°Ρ ΠΈ Π½Π°Π΄Π΅ΠΆΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ, ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠΌΠΈ Π΄Π»Ρ Π²ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΡ ΠΈ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ. AnyChart ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ 68 Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΏΡΡΠΌΠΎ ΠΈΠ· ΠΊΠΎΡΠΎΠ±ΠΊΠΈ ΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²Π°ΡΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ PDF, PNG, JPG ΠΈΠ»ΠΈ SVG.
AnyChart ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ ΠΏΡΡΡ ΡΠΈΠΏΠΎΠ² ΡΠ΅ΡΡΡΡΠΎΠ² Π΄Π»Ρ ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ (Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ, ΡΠΏΡΠ°Π²ΠΎΡΠ½ΠΈΠΊ ΠΏΠΎ API, ΠΈΠ³ΡΠΎΠ²Π°Ρ ΠΏΠ»ΠΎΡΠ°Π΄ΠΊΠ°, Chartopedia ΠΈ FAQ).
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ ΡΠΊΠ°ΡΠ°ΡΡ Π²Π΅ΡΡΠΈΡ Ρ Π²ΠΎΠ΄ΡΠ½ΡΠΌΠΈ Π·Π½Π°ΠΊΠ°ΠΌΠΈ ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΈΡΡΡΠ°ΡΠΈΠΈ. ΠΠ΄Π½Π°ΠΊΠΎ, ΡΡΠΎΠ±Ρ ΠΈΠ·Π±Π°Π²ΠΈΡΡΡΡ ΠΎΡ Π±ΡΠ΅Π½Π΄ΠΎΠ² ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ AnyChart Π² ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ ΡΠ΅Π»ΡΡ , Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΈΠΎΠ±ΡΠ΅ΡΡΠΈ Π»ΠΈΡΠ΅Π½Π·ΠΈΡ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π’Π΅ΠΏΠ΅ΡΡ Π²ΡΠ±ΠΎΡ Π»ΡΡΡΠ΅ΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π΄Π»Ρ Π²Π°ΡΠΈΡ Π±ΡΠ΄ΡΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ Π²Π°Ρ. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΌ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΏΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΠ²ΠΎΠΈΠΌΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°ΠΌΠΈ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎ Π²ΡΠ±Π΅ΡΡΡ D3.js. ΠΠΎΡΡΠΈ Π²ΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈΠΌΠ΅ΡΡ Ρ ΠΎΡΠΎΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π½Π° ΡΠΎΡΡΠΌΠ°Ρ Stack Overflow.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³ΠΎΡΠΎΠ²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ ΡΡΠ°ΡΡΠ΅ 5 ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΠΎΠ½Π»Π°ΠΉΠ½-Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΡΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ ΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΡΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ D3.jsΒ», ΡΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Ρ D3.js. Π£ Π½Π°Ρ ΡΠ°ΠΊΠΆΠ΅ Π΅ΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½Π°Ρ ΡΠ΅ΡΠΈΡ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Google Charts Ρ Angular ΠΈ ΠΊΠ½ΠΈΠ³Π°: ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ Ρ D3.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π΄ΡΡΠ³ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ². ΠΠΎΡ Π΅ΡΠ΅ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΎΠΈΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅:
- GoJS β ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ
Π±Π»ΠΎΠΊ-ΡΡ
Π΅ΠΌ, ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΎΠ½Π½ΡΡ
Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ
ΡΠ·ΡΠΊΠΎΠ².
- C3.js β ΡΡΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡΠ°Π·ΠΎΠ²Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3.
- dimple β ΡΡΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΠΎ-ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ API Π΄Π»Ρ Π±ΠΈΠ·Π½Π΅Ρ-Π°Π½Π°Π»ΠΈΡΠΈΠΊΠΈ Π½Π° Π±Π°Π·Π΅ D3.
- Charted, by Medium β ΡΡΠΎ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅Ρ Π΄Π°Π½Π½ΡΠ΅. ΠΡ ΠΏΡΠΎΡΡΠΎ Π΄Π°Π΅ΡΠ΅ ΡΡΡΠ»ΠΊΡ Π½Π° ΡΠ°ΠΉΠ» Π΄Π°Π½Π½ΡΡ . (ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΈΡΠ°ΡΡ ΠΎΠ± ΡΡΠΎΠΌ Π½Π° Medium.)
- Smoothie Charts ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½Ρ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΠΌΠ΅Π΅ΡΠ΅ Π΄Π΅Π»ΠΎ Ρ ΠΏΠΎΡΠΎΠΊΠΎΠ²ΡΠΌΠΈ Π΄Π°Π½Π½ΡΠΌΠΈ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
- Chartkick.js β ΡΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΡΠΊΠΈ JavaScript.
- ΠΠΎΡΡΠΈΡ.js β ΠΌΠΎΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Ρ ΡΠΈΡΡΡΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠΎΠΌ. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Ρ Π»Π΅Π³ΠΊΠΎΡΡΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠ½ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° jQuery ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ RaphaΓ«l JavaScript.
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π²ΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ Π±ΡΡΡΡΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ:
- ΠΠ½ΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΡ ΠΈ ΠΎΡΡΠ΅ΡΡ Π·Π° ΡΡΠΈΡΠ°Π½Π½ΡΠ΅ ΠΌΠΈΠ½ΡΡΡ.
- Piktochart β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ, ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²Π°ΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΈΠΏΡ Π΄Π°Π½Π½ΡΡ
.
- Easelly β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ½ΡΠΎΠ³ΡΠ°ΡΠΈΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ.
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠ»ΡΡΡΠΈΡΡ ΡΠ²ΠΎΠΈ Π½Π°Π²ΡΠΊΠΈ ΡΠ°Π±ΠΎΡΡ Ρ JavaScript, Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΈΡΠ°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΊΠ½ΠΈΠ³ΠΈ ΠΏΠΎ JavaScript Π² Π½Π°ΡΠ΅ΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅.
Π₯ΠΎΠ»ΡΡ HTML
ΠΠ°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΄Π»Ρ ΡΠΎΡΠ½ΠΎΠΉ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠΏΡΠΈΠΉ , Π²ΠΊΠ»ΡΡΠ°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Β«ΡΡΠΎΠ²Π½Ρ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡΒ» ΠΈ ΡΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ².
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΠΈΡΡΠ° Π²Π΅Π±-ΡΠ°ΠΉΡΠ°: jFontSize
jFontSize β ΡΡΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ jQuery Π΄Π»Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ βA + ΠΈ A- Ρ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠ΅ΠΊΡΡΠ° β Π² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΎΡ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΠΈ ΡΠ°ΠΉΡΠΎΠ², ΠΏΠΎΠΌΠΎΠ³Π°Ρ Π»ΡΠ΄ΡΠΌ Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ Π·ΡΠ΅Π½ΠΈΡ Π»ΡΡΡΠ΅ Π²ΠΈΠ΄Π΅ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ.
ΠΠ½ΠΎΠΏΠΊΠΈ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π²ΡΡΠ°Π²Π»ΡΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠ³ΠΎ HTML-CSS (ΡΠ°ΠΊ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠΈΠΏ ΠΊΠ½ΠΎΠΏΠΎΠΊ), ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠΏΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ°ΡΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°.
ΠΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ°ΡΠ³Π΅ΡΠΈΠ½Π³ Π½Π° ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (ΠΈΠ»ΠΈ
Π΄Π»Ρ Π²ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ), ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ ΡΡΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΠΎΠΏΡΠΈΠΉ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Β«ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅-ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠ°Β» ΠΈ Β«ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π±ΡΠ΄Π΅Ρ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΡΒ».
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
CSS3 Transitions jQuery Image Slider: Flux Slider
CSS3 Transitions jQuery image Slider Β«Flux SliderΒ» β ΡΡΠΎ ΡΠ»Π°ΠΉΠ΄Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ CSS3 Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠ»Π°Π²Π½ΡΡ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΡΠ»Π°ΠΉΠ΄ΠΎΠ² Ρ 2D ΠΈΠ»ΠΈ 3D ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°ΠΌΠΈ.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ jQuery ΠΈΠ»ΠΈ Zepto.js, Π²Π΄ΠΎΡ Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°ΠΌΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery Nivo Slider ΠΈ ΠΈΠΌΠΈΡΠΈΡΡΡΡΠΈΠΉ ΠΈΡ Π±Π΅Π· ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ°ΠΉΠΌΠ΅ΡΠ° JavaScript.
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ² 10+ , Π²ΠΊΠ»ΡΡΠ°Ρ Bars-Bars3D, Blinds-Blinds3D, Cube, Zip ΠΈ Π΄ΡΡΠ³ΠΈΠ΅.
ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π½ΡΠΌΠ΅ΡΠ°ΡΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡ ΠΈ / ΠΈΠ»ΠΈ ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ-ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½Ρ ΡΡΠ½ΠΊΡΠΈΠΈ Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡ ΡΠ»Π°ΠΉΠ΄ΠΎΠ² ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ
.
jQuery-ΡΠ»Π°ΠΉΠ΄Π΅ΡΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Β«Flux SliderΒ» ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ ΡΠΎΠ±ΡΡΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ API .
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery ΠΈΠ»ΠΈ Zepto.js
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
ΠΠ΅Π±-ΡΠ°ΠΉΡ: http://www.joelambert.co.uk/flux/transgallery.html
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ jQuery: Diapo
Diapo β ΡΡΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»Π·ΡΠ½ΠΊΠΎΠ² ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌΠΈ ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΌΠΈ ΡΡΡΠ΅ΠΊΡΠ°ΠΌΠΈ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π°Π½Π°Π²Π΅Ρ ΠΈ ΠΌΠΎΠ·Π°ΠΈΠΊΠ°).
ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ HTML , ΠΈ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Π²ΡΡΡΠ½ΡΡ (Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Β«ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠΈΠΉ-ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉΒ» ΠΈΠ»ΠΈ ΡΡΡΠ»ΠΎΠΊ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΡΠΊΠΈΠ·Ρ) ΠΈΠ»ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ.
Π‘Π»Π°ΠΉΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ jquery Diapo β ΡΡΠΎ ΠΏΡΠΎΠ΅ΠΊΡ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ . ΠΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°ΡΠ°ΡΡ Π΅Π³ΠΎ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ, Π²Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠΈ ΠΏΡΠΎΠ΅ΠΊΡΡ ΠΈ ΠΏΡΠΎΠ΄Π°ΡΡ ΠΊΠ°ΠΊ ΡΠ°ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΡΠΏΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ.
ΠΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΄Π»Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ-ΠΎΡΠΊΠ»ΡΡΠ΅Π½ΠΈΡ ΡΡΠ½ΠΊΡΠΈΠΉ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ , Π·Π°Π΄Π°Π² Π½Π°ΡΠ΅Π·Π°Π½Π½ΡΠ΅ ΡΡΡΠΎΠΊΠΈ-ΡΡΠΎΠ»Π±ΡΡ, ΠΏΠ΅ΡΠΈΠΎΠ΄ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: ΠΏΠ»Π°Π³ΠΈΠ½Ρ jQuery, jQuery Mobile, Easing ΠΈ HoverIntent
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΡΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ jQuery: FlexSlider
FlexSlider β ΡΡΠΎ Π»Π΅Π³ΠΊΠΈΠΉ (ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΡΠΉ Π΄ΠΎ 4 ΠΠ) ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ jQuery , ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ, ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΈ Π»Π΅Π³ΠΊΠΎ Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ.
ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΡΠ΅ ΡΠΏΠΈΡΠΊΠΈ , Π»ΡΠ±ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ HTML ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ΠΎ Π²Π½ΡΡΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ
, ΠΈ ΠΎΠ½ΠΈ Π±ΡΠ΄ΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½Ρ Π² ΡΠ»Π°ΠΉΠ΄Ρ.
ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ , ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ ΠΈΠ»ΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ .
ΠΠΌΠ΅Π΅ΡΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ²: Π·Π°ΡΡΡ Π°Π½ΠΈΠ΅ ΠΈ ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΠ΅. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠΊΠΎΡΠΎΡΡΡ ΡΠ»Π°ΠΉΠ΄Π° + ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ.
FlexSlider ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΠΏΡΠΈΠΉ Π΄Π»Ρ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΡΠ΄ΠΎΠ±ΡΡΠ²Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ , Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Β«ΠΏΡΠΈΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π΄Π΅ΠΉΡΡΠ²ΠΈΡΒ» ΠΈΠ»ΠΈ Β«ΠΏΠ°ΡΠ·Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈΒ».
jQuery FlexSlider ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ:
- ΠΎΡΡΠ΄ΠΈΠ΅, ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ°
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
- ΠΠ½ΠΈΠΌΠ°ΡΠΈΡ ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΡ ΠΈ Π·Π°ΡΡΡ Π°Π½ΠΈΡ
- ΠΠΎΠ»Π·ΡΠ½ΠΊΠΈ Ρ ΡΠΈΡΠΎΠΊΠΈΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ
- ΠΠ°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅, ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ° ΠΈ ΡΠ΅Π½ΡΠΎΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
- Π£Π»ΡΡΡΠ°Π»Π΅Π³ΠΊΠΈΠΉ (ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΡΠΉ Π΄ΠΎ 4 ΠΠ)
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π»ΡΠ±ΡΠ΅ HTML-ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π² ΡΠ»Π°ΠΉΠ΄Π°Ρ
- Π‘ΠΎΠ·Π΄Π°Π½ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠΎΠ² ΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΠΎΠ²
- ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»ΠΈΡΠ΅Π½Π·ΠΈΠΈ MIT
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
jQuery Chop Slider: Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ jQuery Chop Slider, Zoom Slider, Bokeh Slider
jQuery Chop Slider β ΡΡΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΉ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ»Π°ΠΉΠ΄Π΅Ρ jQuery , ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π½Π΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° . Chop Slider ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π²ΡΡ ΠΌΠΎΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS3. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ CSS3 ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ (Π½ΠΎ Π²ΡΠ΅ Π΅ΡΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ) Π² ΡΡΠ°ΡΡΡ
(ΠΈ Internet Explorer) Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΠΏΡΠΎΡΠ²ΠΈΡΡ ΠΏΠΎΠ»Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π°.
jQuery Chop Slider Π₯Π°ΡΠ°ΠΊΡΠ΅ΡΠΈΡΡΠΈΠΊΠΈ:
- ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π²ΡΡ ΠΌΠΎΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS3
- ΠΠΌΠ΅Π΅Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ CSS3 ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ (Π½ΠΎ Π²ΡΠ΅ ΠΆΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ) Π² ΡΡΠ°ΡΡΡ (ΠΈ Internet Explorer) Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
- ΠΠ΅ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ².ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΡΠΎΡΠ²ΠΈΡΡ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°
- ΠΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π³ΠΈΠ±ΠΊΠΈΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ , ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ
- ΠΡΡΡΠΎΠ΅Π½Π½Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ
- ΠΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ ΡΠΈΡΡΠΎΠ²
- ΠΠ²ΡΠΎΠ·Π°ΠΏΡΡΠΊ ΡΡΠ½ΠΊΡΠΈΡ
- ΠΠΎΡΠΎΠ²ΠΎ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ HTML
- ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΡΡΠ»ΠΎΠΊ Π½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ (ΡΠ»Π°ΠΉΠ΄Ρ)
- ΠΠ΅Π³ΠΊΠΈΠΉ.
ΠΠΊΠΎΠ»ΠΎ 3 ΠΠ ΠΌΠΈΠ½ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°Π½ΠΎ ΠΈ ΡΠΆΠ°ΡΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ gzip
- ΠΡΠΎΡΡΠΎΡΠ° Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ
- ΠΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Π½Π΅ΠΊΠΎΡΠΎΡΡΠΌΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² .ΠΠ½ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° ΡΠ°ΡΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΎΠΊΡΡΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ²:
Chop Slider ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π³ΠΈΠ±ΠΊΠΈΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π²Π°Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ. Π Π°Π·ΠΌΠ΅Ρ ΡΠ°ΠΉΠ»Π° ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΎΠΊΠΎΠ»ΠΎ 3 ΠΠ Π² ΡΠΌΠ΅Π½ΡΡΠ΅Π½Π½ΠΎΠΌ ΠΈ ΡΠΆΠ°ΡΠΎΠΌ Π²ΠΈΠ΄Π΅. Chop Slider ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Internet Explorer v6 +, Firefox v3 +, Google Chrome v4 +, Safari v4 + ΠΈ Opera v10 +.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
Π‘Π»Π°ΠΉΠ΄Π΅Ρ Flux Ρ ΡΡΠ°Π½Π·Π°ΠΊΡΠΈΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSS3
Flux slider Ρ CSS3-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠΌ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ , ΡΠ°ΡΡΠΈΡΠ½ΠΎ Π²Π΄ΠΎΡ
Π½ΠΎΠ²Π»Π΅Π½Π½ΡΠΌ ΡΠ°Π½ΡΠ°ΡΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ Nivo Slider jQuery .ΠΠΌΠ΅ΡΡΠΎ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ°ΠΉΠΌΠ΅ΡΠ° Javascript, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠΉ jQuery, Flux ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²ΡΡ, Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΡΠ½ΡΡ ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ CSS3. ΠΠ° Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΎΠ½ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π² Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°Π½Π½Π΅ΠΌ / ΠΏΡΠΈΠ±Π»ΠΈΠ·ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΌ ΡΠΎΡΡΠΎΡΠ½ΠΈΠΈ, Π½ΠΎ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π° iPhone / iPad , ΠΏΠΎΡ
ΠΎΠΆΠ΅, Π΄Π°Π΅Ρ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ ΠΏΠ»Π°Π²Π½ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ. ΠΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² (ΠΊΠ°ΠΊ ΠΈ Nivo) ΠΎΡΠ΅Π½Ρ ΠΏΠ»Π°Π²Π½Π°Ρ, Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS3 ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π½ΠΎΠ²ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Nivo Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π²ΡΠ°ΡΠ΅Π½ΠΈΡ.
Π¦Π΅Π»Ρ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π°ΠΏΠΏΠ°ΡΠ°ΡΠ½ΠΎΠ΅ ΡΡΠΊΠΎΡΠ΅Π½ΠΈΠ΅, Π³Π΄Π΅ ΡΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Π½Π° ΠΌΠ΅Π½Π΅Π΅ ΠΌΠΎΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ , ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ.ΠΠ»Ρ Flux ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠΉ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ CSS3 ΠΈ ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π»ΠΈΠ±ΠΎ jQuery, Π»ΠΈΠ±ΠΎ Zepto.js, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ API. ΠΠ»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Zepto ΠΈΠ·-Π·Π° Π΅Π³ΠΎ ΠΏΠ»ΠΎΡΠ°Π΄ΠΈ ΡΠ°Π·Π²Π΅ΡΡΡΠ²Π°Π½ΠΈΡ <5k.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: CSS3 Transformations Enable Browser
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ»Π·ΡΠ½ΠΎΠΊ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ jQuery Ρ ΡΡΠΊΠΈΠ·Π°ΠΌΠΈ, ΠΏΠΎΠ΄ΠΏΠΈΡΡΠΌΠΈ ΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠΌΠΈ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°ΠΌΠΈ: Π½Π΅ΡΠ΄ΠΎΠ±Π½Π°Ρ Π²ΠΈΡΡΠΈΠ½Π°
Awkward Showcase β ΡΡΠΎ ΠΎΡΠ΅Π½Ρ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΠ»Π°ΠΉΠ΄Π΅ΡΠ° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ jQuery Ρ ΡΡΠΊΠΈΠ·Π°ΠΌΠΈ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ ΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΎΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠΈΠΏ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ HTML.
ΠΠ»Π°Π³ΠΈΠ½ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΡΠ΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ, Π° Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ HTML-CSS.
Slider ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΡ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ ΠΈΠ»ΠΈ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Ρ Π½Π°Π΄ ΡΠ»Π°ΠΉΠ΄Π°ΠΌΠΈ (Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠ»Π°ΠΉΠ΄Π°).
ΠΠ½ ΠΌΠΎΠΆΠ΅Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π²ΡΡΠΎΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ, ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΡΡΠ΅ΠΊΡΠΎΠ² ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π°, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ²Π°Π» ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»Π°ΠΉΠ΄Π°ΠΌΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
ΠΠ΅Π±-ΡΠ°ΠΉΡ: http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin/
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΏΠ°Π»ΠΈΡΡΡ ΡΠ²Π΅ΡΠΎΠ² jQuery: ExColor
ΠΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠ²Π΅ΡΠ° jQuery ExColor , ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΡΠ²Π΅ΡΠ° ΠΈΠ· Photoshop-ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΏΠ°Π»ΠΈΡΡΡ ΡΠ²Π΅ΡΠΎΠ² . ΠΠΎΠ΄ΡΠ»Ρ Π²ΡΠ±ΠΎΡΠ° ΡΠ²Π΅ΡΠ° jQuery Β«ExColorΒ» Π»Π΅Π³ΠΊΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π½Π° Π²Π°Ρ ΡΠ°ΠΉΡ.ΠΠ½ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΠ±ΡΠ°ΡΡ Π½ΡΠΆΠ½ΡΠΉ ΡΠ²Π΅Ρ. ΠΠΈΠ·Π°ΠΉΠ½ ΠΏΠ»Π°Π³ΠΈΠ½Π° ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ°Ρ
. ΠΡΠΎΡΡΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΠ΅ ΠΊ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ» ΡΠΊΡΠΈΠΏΡΠ° ΠΈ Π²ΡΠ΅.
ΠΠ½ ΠΏΡΠΈΠ²ΡΠ·Π°Π½ ΠΊ ΠΏΠΎΠ»ΡΠΌ
ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π½ ΠΏΡΠΎΡΡΡΠΌ Π²ΡΠ·ΠΎΠ²ΠΎΠΌ ΠΎΠ΄Π½ΠΎΡΡΡΠΎΡΠ½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ.
ΠΠ°Π»ΠΈΡΡΠ° ΡΠ²Π΅ΡΠΎΠ² Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ Π³ΠΈΠ±ΠΊΠ°Ρ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π² ΠΏΠ°Π»ΠΈΡΡΠ΅ ΡΠ²Π΅ΡΠΎΠ², ΠΈΠΌΠ΅Π΅Ρ 10 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π° Π²ΡΠ±ΠΎΡ.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π²Π΅Π±-ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π²ΡΠ±ΡΠ°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π΅Π³ΠΎ ΡΠ²Π΅ΡΠ° ΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π΄ΡΡΠ³ΠΈΠ΅ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π°.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠΏΠ°Π΄Π°ΡΡΠΈΠ΅ ΠΌΠ΅Π½Ρ jQuery: DropKick
DropKick ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ ΡΠ°ΡΠΊΡΡΠ²Π°ΡΡΠΈΡ ΡΡ ΠΌΠ΅Π½Ρ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠΎΠΌΠΈΡΠ΅Π»ΡΠ½ΡΠΌ ΠΏΡΠΎΡΠ΅ΡΡΠΎΠΌ, ΡΡΠ΅Π±ΡΡΡΠΈΠΌ ΡΠΉΠΌΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π½Π° Π½Π°ΡΡΡΠΎΠΉΠΊΡ.

DropKick ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅ ΡΡΠΎΠΌΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠΏΠΈΡΠΊΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΡΡΡ. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π²Π°ΡΠΈ ΡΠΎΡΠΌΡ ΠΈ Π·Π°ΠΏΡΠΎΡΡ AJAX Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.
ΠΠ‘ΠΠΠΠΠΠΠ‘Π’Π
- ΠΠ»Π°Π²ΠΈΠ°ΡΡΡΠ° Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
- Π’Π΅ΠΌΠ°ΡΠΈΠΊΠ°
- ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΠΎΠ±ΡΠ°ΡΠ½ΡΠ΅ Π²ΡΠ·ΠΎΠ²Ρ
ΠΡΠΊΡΡΡΡΠ΅ ΠΌΠ΅Π½Ρ DropKick Π² Internet Explorer 7 Π±ΡΠ΄ΡΡ Π·Π°ΠΊΡΡΡΡ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°ΠΌΠΈ DropKick, Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎ ΠΈ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±Π»ΠΈΠ·ΠΊΠΎ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΈΠ±ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ: ΠΏΡΠΎΡΡΠΎΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅
ΠΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π»Π΅Π³ΠΊΠΈΡ
ΠΈ Π³ΠΈΠ±ΠΊΠΈΡ
ΠΎΠ²Π΅ΡΠ»Π΅Π΅Π² Π² Π²Π°ΡΠΈ ΠΏΡΠΎΠ΅ΠΊΡΡ . Simple Overlay Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jquery, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΉ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ
ΡΡΡΠ΅ΠΊΡΠΎΠ² , Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Ρ
ΡΠΊΠΎΠ² CSS , ΡΡΡΠ΅ΠΊΡ Π·Π°ΡΡΡ
Π°Π½ΠΈΡ, ΡΡΡΠ΅ΠΊΡ ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ ΡΡΡΠ΅ΠΊΡΠ°, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ
ΠΎΠ±ΡΠ°ΡΠ½ΡΡ
Π²ΡΠ·ΠΎΠ²ΠΎΠ² Π΄Π»Ρ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠΈΡ
Π΄Π΅ΠΉΡΡΠ²ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ CSS3 ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Π‘ΡΡΠ΅ΡΡΠ²ΡΡΡ Π²ΡΡΠΎΠΊΠΎΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΈΠ· Π½ΠΈΡ ΠΈΠΌΠ΅ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π»Π°ΠΉΡΠ±ΠΎΠΊΡΠ° ΠΈΠ»ΠΈ ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ°Π»ΠΎΠ³Π°, Π° ΠΈΠ½ΠΎΠ³Π΄Π° Π²ΡΠ΅, ΡΡΠΎ Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ .
ΠΠ°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ, Π·Π°Π΄Π°Π² Π΅Π³ΠΎ ΡΠ²Π΅Ρ, ΡΡΠΎΠ²Π΅Π½Ρ Π½Π΅ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ, Π±ΡΠ΄Π΅Ρ Π»ΠΈ ΠΎΠ½ ΡΠ΄Π°Π»Π΅Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ onClick,
ΠΈ Ρ. Π.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΌ ΠΎΠ±ΡΠ°ΡΠ½ΡΠΌ Π²ΡΠ·ΠΎΠ²Π°ΠΌ , Π»ΡΠ±ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π·Π°ΠΏΡΡΠ΅Π½Ρ ΠΏΠΎΡΠ»Π΅ onShow
ΠΈ onHide
ΡΠΎΠ±ΡΡΠΈΠΉ.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
jQuery HTML5 File Uploader ΠΠ΅Π³ΠΊΠΈΠΉ jQuery Plguin
jQuery HTML5 Uploader β ΡΡΠΎ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΡΡΡΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΈΡΡΠ΅ΠΌΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ a-la-Gmail Π² Π²Π°ΡΠ΅ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ . ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ dropbox (Ρ.Π΅. div), Π° jQuery HTML5 Uploader ΡΠ΄Π΅Π»Π°Π΅Ρ Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ΅. ΠΠ°ΡΠ΅ΠΌ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΉΠ»ΠΎΠ² Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΈ ΡΠ°ΠΉΠ»Ρ Π±ΡΠ΄ΡΡ Π·Π°Π³ΡΡΠΆΠ΅Π½Ρ. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Π²Ρ
ΠΎΠ΄Π½ΡΠΌΠΈ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ.
jQuery HTML5 ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π° Π½Π° Π΄Π²Π΅ Π°ΡΠΈΠ½Ρ ΡΠΎΠ½Π½ΡΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ: Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°, , ΡΠ°ΠΉΠ» Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π² ΠΏΠ°ΠΌΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ° FileReader. ΠΠΎΠ»Π΅Π·Π½ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.ΠΠΏΠ΅ΡΠ°ΡΠΈΡ Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΡΠ΅ΡΠ²Π΅ΡΠ° Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΎΡΠΏΡΠ°Π²ΠΊΠ΅ ΡΡΡΠΎΠΊΠΈ Π΄Π²ΠΎΠΈΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° Π² postUrl.
ΠΠ½ Π±ΡΠ» ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π° Firefox ΠΈ Chrome.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
Tooltipsy: ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Tooltips Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ², ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Π΅ΠΌ
Tooltipsy β ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery , ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π³ΠΈΠ±ΠΊΡΡ ΠΎΡΠ½ΠΎΠ²Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ
ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ .
Tooltip ΡΠ»ΠΈΡΠΊΠΎΠΌ ΡΡΠ»ΠΎΠΆΠ½ΡΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ CSS.ΠΠΎΡΡΠΎΠΌΡ Ρ ΡΠΎΠ·Π΄Π°Π» Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΡΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ. Tooltipsy Π΄Π°Π΅Ρ Π²Π°ΠΌ ΠΏΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ CSS, Π°Π½ΠΈΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
ΠΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ ΡΠ³ΠΎΠ΄Π½ΠΎ, Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π½Π°ΡΡΡΠΎΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠΈΠΏ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΡΡΠΎΠ΅ΠΊ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Β«Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΏΠΎ ΠΊΡΡΡΠΎΡΡ ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡΒ» ΠΈ Β«Π΅Π΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΎΡ Π½ΠΈΡ Β».
Tooltipsy ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½, ΠΈ Π½Π°Π±ΠΎΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌΡΡ Π³ΠΈΠ±ΠΊΠΎΡΡΡ.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
ΠΠ΅Π±-ΡΠ°ΠΉΡ: http://tooltipsy.com/
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
OpenJS Grid β ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ jQuery Datagrid
OpenJS Grid β ΡΡΠΎ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ jQuery Grid ΠΈΠ· ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π²ΡΠΈΡ
. Π‘ ΠΎΡΠ΅Π½Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°Π±ΠΎΡΠΎΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ΅ΡΠΊΡ Π΄Π°Π½Π½ΡΡ
, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π΄Π΅Π»Π°ΡΡ Π²ΡΠ΅, ΡΡΠΎ , ΠΎΡ ΡΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΠΈ ΠΏΠΎΠΈΡΠΊΠ° Π΄ΠΎ ΡΠ»ΠΎΠΆΠ½ΡΡ
Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΊ Π±Π°Π·Π΅ Π΄Π°Π½Π½ΡΡ
.
OpenJS Grid β ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎΠ΅ Π² Π½Π°ΡΡΡΠΎΠΉΠΊΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π·Π°ΠΏΠΈΡΠ΅ΠΉ Π² Π²ΠΈΠ΄Π΅ ΡΠ΄ΠΎΠ±Π½ΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΡ Π΄Π°Π½Π½ΡΡ .
ΠΠ½ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ jQuery Ρ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ PHP Π΄Π»Ρ ΠΎΠ±ΡΠ°Π±ΠΎΡΠΊΠΈ Π·Π°ΠΏΡΠΎΡΠΎΠ² Ajax ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²ΡΠ·Π²Π°Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΡΠΎΠΉ / ΠΎΠ΄Π½ΠΎΡΡΡΠΎΡΠ½ΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ.
ΠΠ°Π½Π½ΡΠ΅, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΏΡΠΈ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠ΅, ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Ρ ΠΆΠ΅Π»Π°Π΅ΠΌΡΠΌ ΡΠΈΡΠ»ΠΎΠΌ, ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π·Π°ΠΏΠΈΡΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ Ρ ΡΠ°Π·Π±ΠΈΠ²ΠΊΠΎΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΎΡΡΠΎΡΡΠΈΡΠΎΠ²Π°Π½ .
Π Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ², Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
- ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ / ΡΠΊΡΡΡΠΈΠ΅ Π½ΠΎΠΌΠ΅ΡΠΎΠ² ΡΡΡΠΎΠΊ
- Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
- ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ Π·Π°ΠΏΠΈΡΠ΅ΠΉ
- ΡΠΈΠ»ΡΡΡΠ°ΡΠΈΡ Π·Π°ΠΏΠΈΡΠ΅ΠΉ Ρ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ Π΄Π°Ρ
ΠΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΠ°Π³Π΅ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ
Π²ΡΠ·ΠΎΠ²ΠΎΠ² (rowClick, loadComplete, saveFail ΠΈ Ρ. Π.), Π° Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ΅ΡΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½. ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΠ΅ΠΌΡ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ CSS3.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ°Π»Π΅ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ iPhone, iPad, Android, Blackberry ΠΈ ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²: PhotoSwipe
PhotoSwipe β ΡΡΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½Π°Ρ Π³Π°Π»Π΅ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΈ ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² . ΠΠ½ ΠΏΠΎΡΡΡΠΎΠ΅Π½ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ HTML, CSS + JavaScript ΠΈ Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΎΠ² .
PhotoSwipe β ΡΡΠΎ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript, ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ Π² Π²Π°ΡΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π²Π΅Π±-ΡΠ°ΠΉΡΡ. ΠΠ½ ΡΠΈΠ»ΡΠ½ΠΎ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² webkit. ΠΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Π° Π±ΠΎΠ»Π΅Π΅ ΡΠΈΡΠΎΠΊΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ jQuery Mobile, PhotoSwipe ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠ΅ΠΉ jQuery.
ΠΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΏΠΎΡ ΠΎΠΆ Π½Π° ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΈ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Ρ : Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΎΡΠΈΠ΅Π½ΡΠ°ΡΠΈΠΈ (ΡΠ°ΠΊΠΆΠ΅, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ).
ΠΠ½ΠΎΠΏΠΊΠ° Β«ΠΡΡΠΊΒ» ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π²ΠΈΠ΄Π΅ ΡΠ»Π°ΠΉΠ΄-ΡΠΎΡ , ΠΈ Π΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡΠΈΠΉ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π³Π°Π»Π΅ΡΠ΅ΠΈ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠΊΠΎΡΠΎΡΡΡ ΡΡΡΠ΅ΠΊΡΠΎΠ² fadeIn-fadeOut, Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΌΠ΅ΡΠΎΠ΄ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
PhotoSwipe ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ iPhone, iPad, Android, Blackberry +, Π° β ΡΡΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ jQuery Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΡΡΠΎΠΉ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ.
ΠΠ°Π»Π΅ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΈ ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: ΠΠ΅Ρ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π΄Π»Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΈ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΠ
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ»Π°Π³ΠΈΠ½GMAP3 jQuery Π΄Π»Ρ ΠΊΠ°ΡΡ Google
GMAP3 β ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jquery , ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΡΡΠΈΠΉ Ρ API ΠΊΠ°ΡΡΡ Google Π²Π΅ΡΡΠΈΠΈ 3. ΠΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΡ Google Maps Π½Π° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΡΠΆΠ΅ Π»Π΅Π³ΠΊΠΎ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΏΡΠΎΡΡΠΎΡΠ΅, ΠΊΠΎΡΠΎΡΡΡ Google ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π²ΠΎ Π²ΡΠ΅Ρ
ΡΠ²ΠΎΠΈΡ
ΠΏΡΠΎΠ΄ΡΠΊΡΠ°Ρ
.
ΠΠ΄Π½Π°ΠΊΠΎ Π²ΡΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠ°ΡΡ ΠΏΡΠΎΡΠ΅ Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΌ GMAP3 jQuery , Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΡΡΡ Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ°ΡΠ½ΡΠ΅ Π²ΡΠ·ΠΎΠ²Ρ).
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΠΏΡΠΎΡΠ΅Π½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΡ Π΄Π»Ρ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΉ API ΠΠ°ΡΡ Google , ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΡΡΠ½ΠΎ ΡΡΠ΅Π±ΡΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ Π±ΠΎΠ»ΡΡΠ΅Π³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΊΠΎΠ΄Π°, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
-
getAddress
β Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρgoogle.maps.GeocoderResult
ΠΈΠ·google.maps.LatLng
-
getRoute
β ΠΊΠΎΡΠΎΡΡΠΉ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρgoogle.maps.DirectionsResult
ΠΈΠ·google.maps.DirectionsRequest
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΊΠ°ΡΡ Google Π² ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΠΎΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ Π΄Π»Ρ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ Π³ΠΈΠ±ΠΊΠΎΡΡΠΈ.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
ΠΠ΅Π±-ΡΠ°ΠΉΡ: http://gmap3.net/
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
MotionCAPTCHA β Π ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΠ³ΡΡ Captcha Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery
MotionCAPTCHA , ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ jQuery , ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° HTML5 Canvas ΠΠ½ΡΡΡΡΠΌΠ΅Π½Ρ ΠΏΡΠΎΡΠ΅Π΄ΡΡΠ½ΠΎΠ³ΠΎ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Harmony ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΠΈΠΏ ΠΊΠ°ΠΏΡΠΈ, ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΠ³ΡΡΡ, ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ½ΠΈ Π²ΠΈΠ΄ΡΡ Π½Π° Ρ ΠΎΠ»ΡΡΠ΅, Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ ΡΠΎΡΠΌΡ.ΠΡΠΎ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΡΡΠ³ΠΎΠ΅, Π½ΠΎ ΠΈ ΡΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΠ΅ Π·Π°Π½ΡΡΠΈΠ΅, ΠΈ Π΅Π³ΠΎ Π΄Π°ΠΆΠ΅ ΠΏΡΠΎΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ².
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΡΠΎΠ΅ΠΊΡ ΡΠ²Π»ΡΠ΅ΡΡΡ Π΄ΠΎΠΊΠ°Π·Π°ΡΠ΅Π»ΡΡΡΠ²ΠΎΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ , ΡΡΠΈΡΡΠ²Π°Ρ, ΡΡΠΎ ΠΊΠ°ΠΏΡΠ° ΠΏΡΠΎΠ²Π΅ΡΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΠΊΠ»ΠΈΠ΅Π½ΡΠ° ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π°. ΠΠ΄Π½Π°ΠΊΠΎ Π² ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΡΡ ΡΠ»ΡΡΡΠΈΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΠ΅ΡΠ²Π΅ΡΠΎΠ² ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². Π‘ Π½Π΅ΡΠ΅ΡΠΏΠ΅Π½ΠΈΠ΅ΠΌ ΠΆΠ΄Ρ ΡΡΠΎΠ³ΠΎ!
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: jQuery
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
Mosaiqy: ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ
Mosaiqy β ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΉ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Π² ΡΠ΅ΡΠΊΠ΅ , ΠΏΠΎΡ
ΠΎΠΆΠ΅ΠΉ Π½Π° ΠΌΠΎΠ·Π°ΠΈΠΊΡ, .
ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²Π½ΡΡΡΠΈ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ Π΄Π²ΠΈΠΆΡΡΠΈΡ ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈ ΡΡΡΠΎΠΊ, Π³Π΄Π΅ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Ρ CSS3 ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ.
ΠΠΎΡΠ»Π΅ ΡΠ΅Π»ΡΠΊΠ° ΠΏΠΎ ΠΌΠΈΠ½ΠΈΠ°ΡΡΡΠ΅ ΠΈΡΡ ΠΎΠ΄Π½Π°Ρ Π²Π΅ΡΡΠΈΡ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΡΡ Π² ΡΠ΅ΡΠΊΡ Ρ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΡΠΊΠΎΠ»ΡΠΆΠ΅Π½ΠΈΡ.
ΠΈΠ·Π²Π»Π΅ΠΊΠ°Π΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ· ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠ° Π΄Π°Π½Π½ΡΡ JSON / JSONP , ΡΡΠΎ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΠΈΠ½ΡΠ΅Π³ΡΠ°ΡΠΈΡ ΡΠΎ ΡΠ»ΡΠΆΠ±Π°ΠΌΠΈ Ρ ΠΎΡΡΠΈΠ½Π³Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈ ΡΠΆΠ΅ Π΅ΡΡΡ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΠΈ Π΄Π»Ρ Flickr, Instagram ΠΈ Panoramio.
Mosaiqy ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ , ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ ΡΠΊΠΎΡΠΎΡΡΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΎΠ², Π·Π°Π΄Π΅ΡΠΆΠΊΠ° ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠ°ΠΆΠ΄ΡΠΌ, ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠ² / ΡΡΡΠΎΠΊ, Π²ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ / Π²ΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΡΠΈΠΊΠ»Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ»Π°Π³ΠΈΠ½ jQuery Tooltips ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ Π² ΡΠΎΡΠΌΠ΅ ΠΏΡΠ·ΡΡΡ Ρ: Grumble.js
Grumble.js , ΠΏΠ»Π°Π³ΠΈΠ½ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ
ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ jQuery ΠΎΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Huddle. com, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ Π² ΡΠΎΡΠΌΠ΅ ΠΏΡΠ·ΡΡΠ΅ΠΉ.
ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ°ΡΠ°ΡΡ Π²ΠΎΠΊΡΡΠ³ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΠΎΠ΄ Π»ΡΠ±ΡΠΌ ΡΠ³Π»ΠΎΠΌ, Π½Π° Π²ΡΠ΅ 360 Π³ΡΠ°Π΄ΡΡΠΎΠ². ΠΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π»ΡΠ±ΠΎΠ΅ ΡΠ°ΡΡΡΠΎΡΠ½ΠΈΠ΅.ΠΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ Π»ΡΠ±ΠΎΠΉ ΡΡΠΈΠ»Ρ CSS. ΠΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΡΠ΅Π³ΡΠ»ΠΈΡΠΎΠ²ΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΠ° Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Ρ Π»ΠΎΠΊΠ°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ. ΠΡΠ΅ΡΠ΅Π΄ΠΈ FX Π΄Π»Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ Π²ΠΎΡΡΠ°Π½ΠΈΠΉ. Π ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π² IE6 + ΠΈ Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ .
ΠΡΠ·ΡΡΠΈ ΠΈΡΡ ΠΎΠ΄ΡΡ ΠΈΠ· ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΏΡΠ°ΠΉΡΠ° , ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ ΡΠ΅ΡΠ°Π΅Ρ, ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ ΡΠ΅ΠΊΡΡΠ°.
ΠΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ fadeIn / fadeOut, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ Π½Π° Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ Π·Π°ΠΊΡΡΡΠΈΡ .
Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ
Π²ΡΠ·ΠΎΠ²ΠΎΠ² Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ : onShow
, onBeginHide
ΠΈ onHide
.
Π§ΡΠΎ ΡΡΠΎ Π·Π° ΠΌΠ°Π³ΠΈΡ?
grumble.js ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ°ΠΊΠΈΠ΅ ΠΌΠΎΠ΄Π½ΡΠ΅ ΡΠ»ΠΎΠ²Π΅ΡΠΊΠΈ, ΠΊΠ°ΠΊ CSS3 ΠΈ Β«ΠΌΠ°ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ°Β», ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅Π±Ρ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΌ, Π³Π΄Π΅ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅. Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΡ CSS3 Ρ IE6 + Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ
ΡΠΈΠ»ΡΡΡΠΎΠ² Matrix. Π‘ΠΏΡΠ°ΠΉΡΠΈΠ½Π³ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠ·ΡΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΎ ΠΊΠ°ΠΊ Ρ
ΠΎΡΠΈΡΠ΅ β ΡΡΠΎ ΠΏΡΠΎΡΡΠΎ CSS.
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΠ°ΡΠ·Π΅Ρ ΡΠ°ΠΉΠ»ΠΎΠ²Ρ PHP ΠΈ jQuery: SFBrowser
SFBrowser β ΡΡΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ , ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ PHP ΠΈ jQuery , Π΄Π»Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ°ΠΉΠ»Π°ΠΌΠΈ Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Ajaxed .
ΠΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΡΠΏΠΈΡΠΎΠΊ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ², ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΠΈΠΌΠ΅Π½Π° ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π²ΡΠ±ΡΠ°Π½Π½ΡΡ ΡΠ°ΠΉΠ»Π°Ρ . ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΅Π³ΠΎ, ΠΊΠ°ΠΊ Π»ΡΠ±ΠΎΠΉ Π΄ΠΈΠ°Π»ΠΎΠ³ ΠΎΡΠΊΡΡΡΠΈΡ ΡΠ°ΠΉΠ»Π°, Π΄Π»Ρ Π²ΡΠ±ΠΎΡΠ° ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ². Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ: Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΠ°ΠΉΠ»Π° , ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΠ°ΠΏΠΎΠΊ ΠΈ ΠΏΠ΅ΡΠ΅ΠΈΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡΠ΄Π°Π»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΈ ΠΏΠ°ΠΏΠΎΠΊ.
Π€ΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΡ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² . ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π³ΠΎΡΠΎΠ²ΡΡ
ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ filetree ΠΈ image-resize.
ΠΠ»Ρ Π±ΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΉ ΠΊΠ»Π°Π²ΠΈΡ .
ΠΡΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡΠ·ΡΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ , Π½ΠΎΠ²ΡΠ΅ ΡΠ·ΡΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ ΠΏΡΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π½ΠΎΠ²ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π»ΠΎΠΊΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ (Π°Π½Π³Π»ΠΈΠΉΡΠΊΠΈΠΉ, Π³ΠΎΠ»Π»Π°Π½Π΄ΡΠΊΠΈΠΉ ΠΈΠ»ΠΈ ΠΈΡΠΏΠ°Π½ΡΠΊΠΈΠΉ ΡΠΆΠ΅ Π²ΠΊΠ»ΡΡΠ΅Π½Ρ).
Π, SFBrowser ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ JavaScript API Π΄Π»Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ ΡΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ Π΅Π³ΠΎ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ.
Π.Π‘. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΡΡΡΠΏΠ΅Π½ Π² Π²ΠΈΠ΄Π΅ ΠΏΠ»Π°Π³ΠΈΠ½Π° WordPress.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: PHP
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° Π°Π²ΡΠΎΠ·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ jQuery Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΠΌ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΌ jQuery Combogrid
Combogrid β ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΡ
ΡΡΠ½ΠΊΡΠΈΠΉ Π°Π²ΡΠΎΠ·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π² ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π°.ΠΏΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π² ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Π±ΡΡΡΡΠΎ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡ ΠΈ Π²ΡΠ±ΠΈΡΠ°ΡΡ ΠΈΠ· ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ Π²Π²ΠΎΠ΄Π°, Π½ΠΎ Π² ΡΠ°Π±Π»ΠΈΡΠ½ΠΎΠΉ ΡΠΎΡΠΌΠ΅ ΠΈ Ρ ΡΠ°Π·Π±ΠΈΠ²ΠΊΠΎΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ. Combogrid ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΠ½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ. ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π²ΡΠ±ΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°.
ΠΠΎ ΠΌΠ΅ΡΠ΅ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Π²Π²ΠΎΠ΄ΠΈΡ, ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠΏΠΈΡΠΎΠΊ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠΎΠ² Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ Π²Π½ΡΡΡΠΈ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΡΠ΅ΡΠΊΠΈ Ρ ΡΠ°Π·Π±ΠΈΠ²ΠΊΠΎΠΉ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ.
Π·Π°ΠΏΡΠΎΡΠΎΠ² ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡΡΡ ΡΠ΅ΡΠ΅Π· Ajax, Π° ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΡ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°ΡΡΡΡ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ Π΄Π°Π½Π½ΡΡ JSON (ΠΈΠ»ΠΈ JSONP Π΄Π»Ρ ΠΌΠ΅ΠΆΠ΄ΠΎΠΌΠ΅Π½Π½ΡΡ Π·Π°ΠΏΡΠΎΡΠΎΠ²).
ΠΠΌΠ΅Π΅ΡΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΎΠΏΡΠΈΠΉ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΡ ΡΠ²Π΅ΡΠΎΠ² ΡΡΡΠΎΠΊ, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ Π²ΡΠ±ΠΎΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ Π·Π°ΠΏΡΠΎΡΡ, ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½Π°Ρ Π΄Π»ΠΈΠ½Π° ΡΠ΅ΠΊΡΡΠ° ΠΏΠ΅ΡΠ΅Π΄ Π°ΠΊΡΠΈΠ²Π°ΡΠΈΠ΅ΠΉ ΡΠ΅ΡΠΊΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
ΠΠ΅Π±-ΡΠ°ΠΉΡ: http://combogrid.javaedintorni.it/
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
Kendo UI: ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ° Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° HTML5
Kendo UI β ΡΡΠΎ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ ΡΡΠ΅Π΄Π° Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° HTML Ρ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΌΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠ°ΠΌΠΈ HTML5, CSS3 ΠΈ JavaScript, ΠΎΠ½Π° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΠΊΠ»ΠΈΠ΅Π½ΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ jQuery Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΠΎΠΌ ΠΏΠ°ΠΊΠ΅ΡΠ΅.
Π‘ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΠ΅ Π²ΠΈΠ΄ΠΆΠ΅ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°, ΠΎΡΠ½ΠΎΠ²Π°Π½Π½ΡΠ΅ Π½Π° jQuery ΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ.ΠΡΠ΅, ΡΡΠΎ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° HTML5, Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΠΎΠΌ ΠΏΠ°ΠΊΠ΅ΡΠ΅.
ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°:
- ΠΠΎΠ»Π½Π°Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ° Π΄Π»Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ HTML5
- ΠΠΎΡΠΎΠ²Π½ΠΎΡΡΡ ΠΊ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠΌ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌ
- ΠΠΎΠ»ΡΡΠ΅ Π½Π΅Ρ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ³ΠΎ JavaScript
- Rich UI, ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½ΡΠΉ Π½Π° jQuery
- Π¨ΠΈΡΠΎΠΊΠ°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² (Π΄Π°ΠΆΠ΅ ΡΡΠ°ΡΡΡ )
- ΠΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ°
- Π Π°Π·Π²ΠΈΡΠΈΠ΅ ΡΠΎ ΡΠΊΠΎΡΠΎΡΡΡΡ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²
Kendo UI ΡΠΎΠ·Π΄Π°Π½ Π΄Π»Ρ Π±Π΅ΡΠΏΠ΅ΡΠ΅Π±ΠΎΠΉΠ½ΠΎΠΉ ΡΠ°Π±ΠΎΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ Π½Π°ΡΡΠΎΠ»ΡΠ½ΡΡ ΠΊΠΎΠΌΠΏΡΡΡΠ΅ΡΠΎΠ² ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ Ρ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ.Kendo UI ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΏΠΎΠ»Π½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΠ΅Π½ΡΠΎΡΠ½ΠΎΠ³ΠΎ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈ ΠΏΡΠΎΡΠ΅ΡΡΠΈΡΠΎΠ²Π°Π½ Π½Π° ΡΠ»Π΅Π΄ΡΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌ:
- Android 2.
x +
- iOS 3.x +
- BlackBerry OS 6.x +
- WebOS X.x +
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
- Internet Explorer 6+
- Firefox 3+
- Safari 4+
- Π₯ΡΠΎΠΌ
- ΠΠΏΠ΅ΡΠ° 10+
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅: jQuery
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
Ninja UI: ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ Π²Π΅Π±-ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ²
Ninja UI β ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery , ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π²Π΅Π±-ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΈ Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΠΎ.
jQuery ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ jQuery Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ Π΅Π³ΠΎ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡΡ .
Ninja UI β ΡΡΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ°, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΠΈΠΌ Π½ΠΎΠ²ΡΠ΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΏΠ°ΠΊΠ΅ΡΠ΅.
ΠΠ½ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΡΠ°ΠΊΠΈΠ΅ Π²ΠΈΠ΄ΠΆΠ΅ΡΡ, ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΎΠΊ, Π°ΠΊΠΊΠΎΡΠ΄Π΅ΠΎΠ½, Π·Π½Π°ΡΠΊΠΈ, Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ / ΠΌΠΎΠ΄Π°Π»ΡΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, ΠΏΠΎΠ»Π·ΡΠ½ΠΎΠΊ, ΡΠ΅ΠΉΡΠΈΠ½Π³, Π²ΠΊΠ»Π°Π΄ΠΊΠΈ, Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π·Π½Π°ΡΠΎΠΊ Π·Π°Π³ΡΡΠ·ΡΠΈΠΊΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Ρ
ΠΎΠ»ΡΡΠ°.
ΠΡΠΎ Π½Π΅Π½Π°Π²ΡΠ·ΡΠΈΠ²ΡΡ , Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π·Π½Π°ΡΠΊΠΈ Π½Π° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΠΌΠ΅Π΅Ρ ΡΠΎΡΠΌΡ Π²Π΅Π±-ΡΡΠΈΡΡΠΎΠ².
Π‘ΠΊΠ°ΡΠ°ΡΡ Ninja UI jQuery Plguin
Π’ΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ: jQuery
Π‘ΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ: ΠΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ
ΠΠ΅Π±-ΡΠ°ΠΉΡ: http://ninjaui.com/
Demo Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΠ― ΠΠΠΠ¬Π¨ΠΠΠ ΠΠΠΠ₯ΠΠΠΠΠΠΠ―
10 ΠΏΠΎΠ»Π΅Π·Π½ΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ²
20 ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ jQuery, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π½Π°ΡΡ
ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ jQuery β 20 ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌΡΡ ΠΌΠΎΠ΄ΡΠ»Π΅ΠΉ jQuery ΠΈ Π±ΠΎΠ»Π΅Π΅ 100 ΠΎΡΠ»ΠΈΡΠ½ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² jQuery
50 Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ JavaScript Π΄Π»Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²
ΠΠ°ΠΊ Π²Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠ΅ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π² JavaScript? ΠΠ°ΠΊΠ°Ρ Π²Π°ΡΠ° Π»ΡΠ±ΠΈΠΌΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript?
Π― Π΄ΠΎΠ»Π³ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π±ΡΠ» ΠΏΠΎΠΊΠ»ΠΎΠ½Π½ΠΈΠΊΠΎΠΌ jqPlot Π·Π° Π΅Π³ΠΎ ΠΎΡΠΊΡΡΡΡΠΉ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄, ΠΏΡΠΎΡΡΠΎΡΡ, ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈ ΠΎΡΠ»ΠΈΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ. ΠΠ½ Ρ
ΠΎΡΠΎΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ ΠΊΠΎΡΠΏΠΎΡΠ°ΡΠΈΡΠΌΠΈ ΠΈ ΠΏΠΎΡΡΡΠΎΠ΅Π½ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ jQuery. ΠΠ΄Π½Π°ΠΊΠΎ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΌΠΎΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΡΠΈΠ²Π»Π΅ΠΊ D3. ΠΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ JavaScript, HTML, SVG ΠΈ CSS, ΡΡΠΎΠ±Ρ ΡΠ΅Π°Π»ΡΠ½ΠΎ ΠΎΠΆΠΈΠ²ΠΈΡΡ Π΄Π°Π½Π½ΡΠ΅. ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠΊΡΡΡΡΠΉ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄, Π½Π΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ jQuery, ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΌΠ°ΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² ΠΈ Π΄Π°ΠΆΠ΅ Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ
ΠΎΡΠΎΡΠΈΡ
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3. ΠΡΡΠ³ΠΎΠΉ ΠΊΡΡΠΏΠ½ΡΠΉ ΠΈΠ³ΡΠΎΠΊ β HighCharts, ΡΠ°ΠΊΠΆΠ΅ Π½Π°ΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π½Π° ΡΠΈΡΡΠΎΠΌ JavaScript ΡΠΎ Π²ΡΠ΅ΠΌΠΈ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°ΡΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π² JSFiddle, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠΎΡΠ½ΡΡ
ΡΡΠ½ΠΊΡΠΈΠΉ.ΠΠΎΠΌΠΈΠΌΠΎ ΡΡΠΈΡ
ΡΡΠ΅Ρ
, Π΅ΡΡΡ Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡΡ
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠΎΠΈΡ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅ΡΡ. ΠΠΎΡ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠ· 50 Π»ΡΡΡΠΈΡ
JS-Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²:
FusionCharts β ΠΎΠ½ΠΈ Π½Π°Π·ΡΠ²Π°ΡΡ ΡΠ΅Π±Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript ΠΊΠΎΡΠΏΠΎΡΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ, ΠΈ Ρ ΠΏΠΎΠ»Π°Π³Π°Ρ, ΡΡΠΎ Π½Π΅ Π±Π΅Π· ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΠΉ. ΠΠ½ΠΈ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΠ°ΠΌΡΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΈΠ· Π²ΡΠ΅Ρ
ΠΈ ΠΈΠΌΠ΅ΡΡ 90 ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° ΡΠ°Π·Π½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
ΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
(Π²ΠΊΠ»ΡΡΠ°Ρ IE 6, 7 ΠΈ 8, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΡΡ
ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ VML). Π£ Π½ΠΈΡ
Π΅ΡΡΡ ΠΌΠ°ΡΡΠ° ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ² Π±ΠΈΠ·Π½Π΅Ρ-ΠΏΠ°Π½Π΅Π»Π΅ΠΉ, ΠΎΠ±ΡΠΈΡΠ½Π°Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ
ΠΎΡΠΎΡΠΈΡ
ΡΡΠ°ΡΠ΅ΠΉ ΠΎ Π»ΡΡΡΠΈΡ
ΠΌΠ΅ΡΠΎΠ΄Π°Ρ
ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.Π£ Π½ΠΈΡ
ΡΠ°ΠΊΠΆΠ΅ Π΅ΡΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery. FusionCharts Π½Π°ΡΠ°Π» ΡΠ²ΠΎΡ Π΄Π΅ΡΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π΄Π΅ΡΡΡΡ Π»Π΅Ρ Π½Π°Π·Π°Π΄ (Ρ Π½ΠΈΡ
Π΄Π°ΠΆΠ΅ Π΅ΡΡΡ ΠΊΠ½ΠΈΠ³Π° ΠΎΠ± ΠΈΡ
ΡΡΠ°ΡΡΠΎΠ²ΠΎΠΌ ΠΏΡΡΠΈ) ΠΈ ΡΡΠ²Π΅ΡΠΆΠ΄Π°Π΅Ρ, ΡΡΠΎ Ρ Π½ΠΈΡ
21000 ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ² (LinkedIn, ΠΡΠ΅ΠΌΠΈΡΠ½ΡΠΉ Π±Π°Π½ΠΊ, ΠΠ΅Π»ΡΠΉ Π΄ΠΎΠΌ, Oracle ΠΈ Ρ. Π.).
D3 β Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΡΡΡΡΠ°ΡΡΠ΅, ΠΈ ΠΌΠ½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ Π΅Π³ΠΎ ΠΏΡΠΎΡΡΠΎΡΠ°. ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠ±ΡΠΈΡΠ½Π°, ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ Π½Π° GitHub, Π° ΠΏΡΠΈΠΌΠ΅ΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½Ρ. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΎΠ² D3 ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Tributary ΡΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΎΡΠ»ΠΈΡΠ½ΡΡ
ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ². ΠΡΠΎ ΡΠ°ΠΊ Ρ
ΠΎΡΠΎΡΠΎ, ΡΡΠΎ xcharts, nvd3, Rickshaw, Cubism.js, dc.js ΠΈ xkcd Π²ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π°Π½Ρ Π½Π° D3. ΠΡΠ»ΠΈ Π²Ρ Π΄Π΅Π»Π°Π΅ΡΠ΅ ΡΠ΄ΠΈΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ
, Π²Π°ΠΌ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²ΡΠ±ΡΠ°ΡΡ D3, Π² ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΏΠΎΠΌΡΠ½ΡΡΡΠ΅ Π²ΡΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ d3 ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΡΡ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΡΡ
ΠΏΡΠΎΡΡΡΡ
Π³ΡΠ°ΡΠΈΠΊΠΎΠ². ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Ρ Π½Π°ΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΠΊΠ½ΠΈΠ³Ρ Π‘ΠΊΠΎΡΡΠ° ΠΡΡΡΠ΅Ρ ΠΏΠΎ D3 ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Β«ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ
Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°Β» ΠΈ Β«Π£ΡΠ΅Π±Π½ΠΈΠΊΠΈ ΠΏΠΎ Dashing D3Β».
HighCharts β ΠΎΡΠ΅Π½Ρ ΠΌΠΎΡΠ½ΡΠΉ, ΠΌΠ½Π΅ Π½ΡΠ°Π²ΡΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΡ JSFiddle ΠΈ ΠΌΠΎΡΠ½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ. ΠΠ½Π΅ Π½Π΅ Π½ΡΠ°Π²ΠΈΡΡΡ ΠΏΠ»Π°ΡΠ° Π·Π° Π»ΠΈΡΠ΅Π½Π·ΠΈΡ, Π½ΠΎ Ρ Π½ΠΈΡ Π΅ΡΡΡ ΠΎΡΠ»ΠΈΡΠ½ΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΡ (IBM, NASA, MasterCard ΠΈ Ρ. Π.).Π£ Π½ΠΈΡ ΡΠ°ΠΊΠΆΠ΅ Π΅ΡΡΡ ΠΎΠ±ΡΠ°ΡΠ½Π°Ρ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ Ρ IE8.
jqPlot β Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ jQuery, Π²Ρ Π½Π΅ Ρ ΠΎΡΠΈΡΠ΅ ΠΏΠ»Π°ΡΠΈΡΡ Π·Π° HighCharts, Π° D3 β ΡΠ»ΠΈΡΠΊΠΎΠΌ ΠΌΠ½ΠΎΠ³ΠΎ Π΄Π»Ρ Π²Π°ΡΠΈΡ ΠΏΡΠΎΡΡΡΡ ΡΠ»ΡΡΠ°Π΅Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΡΠΎΠ³Π΄Π° jqPlot β ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ Π²ΡΠ±ΠΎΡ.
dygraphs β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΡΠ΄ΠΎΠ². ΠΡΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ»ΠΈΡΠ½ΠΎ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΡ Π½Π°Π±ΠΎΡΠΎΠ² Π΄Π°Π½Π½ΡΡ .
Protovis β Π±Π΅ΡΠΏΠ»Π°ΡΠ½Π°Ρ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ, ΡΠΎΠ·Π΄Π°Π½Π½Π°Ρ ΡΠΎΠΉ ΠΆΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠ΅ΠΉΡΠ°Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π½Π°Π΄ D3. ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΡΠ°Π²Π½ΠΈΡΡ D3 Ρ Protovis, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ stackoveflow.
Flot Charts β ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ jqPlot, Flot ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΡΠΈΡΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° JavaScript Π΄Π»Ρ jQuery Ρ ΡΠΏΠΎΡΠΎΠΌ Π½Π° ΠΏΡΠΎΡΡΠΎΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ, ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ. ΠΡΠ»ΠΈ Π²Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ ΡΡΠ°Π²Π½Π΅Π½ΠΈΠ΅ Flot ΠΈ jqPlot, Π² ΡΡΠΎΠΉ Π²Π΅ΡΠΊΠ΅ Π΅ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ.
Google Chart Tools β ΠΌΠΎΡΠ½ΡΠΉ, Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ, ΠΏΡΠΎΡΡΠΎΠΉ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ, Π² Π½Π΅ΠΌ Π΅ΡΡΡ Π²ΡΠ΅, ΠΎΡ ΠΏΡΠΎΡΡΡΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π΄ΠΎ ΡΠ»ΠΎΠΆΠ½ΡΡ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡΠ΅ΡΠΊΠΈΡ Π΄ΡΠ΅Π²ΠΎΠ²ΠΈΠ΄Π½ΡΡ ΠΊΠ°ΡΡ. ΠΡΠ°Π½ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Ρ ΠΎΡΠΎΡΠΎ ΠΏΡΠΎΠ΄ΡΠΌΠ°Π½Π½ΡΡ ΡΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎΠ³ΠΎ ΡΠΎΠΊΠ°.js β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ javascript Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3 Ρ Π²ΡΡΡΠΎΠ΅Π½Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΠΊΡΠΎΡΡΡΠΈΠ»ΡΡΡΠ°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ°Ρ Π²ΡΡΠΎΠΊΠΎΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΎΠΌΠ΅ΡΠ½ΡΠ΅ Π½Π°Π±ΠΎΡΡ Π΄Π°Π½Π½ΡΡ .
xcharts β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3 Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ².
nvd3 β ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, Π½Π΅ ΠΎΡΠ½ΠΈΠΌΠ°Ρ Ρ Π²Π°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ d3.js.
rickshaw β Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² JavaScript Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΡΠ΄ΠΎΠ².
Cubism.js β ΠΏΠ»Π°Π³ΠΈΠ½ D3 Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
ΡΡΠ΄ΠΎΠ².ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΊΡΠ±ΠΈΠ·ΠΌ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΡΡ
ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ
ΠΏΠ°Π½Π΅Π»Π΅ΠΉ Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΈΠ·Π²Π»Π΅ΠΊΠ°Ρ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· Π³ΡΠ°ΡΠΈΡΠ°, ΠΊΡΠ±Π° ΠΈ Π΄ΡΡΠ³ΠΈΡ
ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ².
xkcd β ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ Π² ΡΡΠΈΠ»Π΅ XKCD Π² Javascript Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ D3. ΠΠ·Π½Π°ΠΊΠΎΠΌΡΡΠ΅ΡΡ Ρ xkcdgraphs, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ xkcd.
jQuery Sparklines β ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ·Π΄Π°Π΅Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΏΡΡΠΌΠΎ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
peity β ΠΏΡΠΎΡΡΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΡΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π² ΠΏΡΠΎΡΡΡΡ ΠΌΠΈΠ½ΠΈ-ΠΊΡΡΠ³ΠΎΠ²ΡΡ, Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ ΠΈΠ»ΠΈ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ CANVAS.
BonsaiJS β Π»Π΅Π³ΠΊΠ°Ρ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Ρ ΠΈΠ½ΡΡΠΈΡΠΈΠ²Π½ΠΎ ΠΏΠΎΠ½ΡΡΠ½ΡΠΌ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ API ΠΈ ΡΠ΅Π½Π΄Π΅ΡΠ΅ΡΠΎΠΌ SVG.
Flotr β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Javascript Π΄Π»Ρ Prototype.js. ΠΠ½ ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ, ΡΠ°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π»Π΅Π³Π΅Π½Π΄Ρ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΎΡΡΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ, ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΌΡΡΠΈ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° Π²ΡΠ±ΠΎΡΠ°, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΏΠ΅ΡΠ΅Ρ Π²Π°ΡΡΠΈΠΊΠΈ ΡΠΎΠ±ΡΡΠΈΠΉ, ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΡΠΈΠ»Π΅ΠΉ CSS, ΡΠ΅ΠΊΡΡ, Π²ΠΊΠ»ΡΡΠ΅Π½Π½ΡΠΉ Π² Ρ ΠΎΠ»ΡΡ, ΠΏΠΎΠ²Π΅ΡΠ½ΡΡΡΠ΅ ΠΌΠ΅ΡΠΊΠΈ, ΡΠ²Π΅ΡΠΎΠ²ΡΠ΅ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π³ΡΠ°ΡΠΈΠΊΠ°, ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½Π°Ρ ΡΠ°Π±Π»ΠΈΡΠ°, Π΄Π°Π½Π½ΡΠ΅ CSV ΡΠΊΠ°ΡΠ°ΡΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
ProtoChart β ΠΠ°ΠΊ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΠ· Π½Π°Π·Π²Π°Π½ΠΈΡ, ProtoChart ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Javascript ΠΈ Prototype. ΠΠ½ ΠΈΠΌΠ΅Π΅Ρ ΠΎΡΠΊΡΡΡΡΠΉ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Canvas ΠΈ Π±ΡΠ» ΡΠΈΠ»ΡΠ½ΠΎ ΠΌΠΎΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π½ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°ΠΌΠΈ Flot, Flotr ΠΈ PlotKit.
Flotr2 β Π½Π΅Π΄Π°Π²Π½ΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡ HumbleSoftware, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΈ ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Canvas ΠΈ JavaScript. HumbleSoftware ΡΠ°ΠΊΠΆΠ΅ Π²ΡΠΏΡΡΡΠΈΠ»Π° envisionjs, ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ flotr2 ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ HTML5.
jQuery-Visualize β Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ ΠΎΠ»ΡΡΠ° HTML5, ΡΠΏΡΠ°Π²Π»ΡΠ΅ΠΌΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ ΡΠ°Π±Π»ΠΈΡΡ HTML. ΠΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π΄Π»Ρ jQuery.
JS Charts β Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ JavaScript, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅Ρ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎΠΉ Π²Π΅ΡΡΠΈΠΈ Π΅ΡΡΡ Π²ΠΎΠ΄ΡΠ½ΠΎΠΉ Π·Π½Π°ΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π°Π»ΠΈΡΡ, Π·Π°ΠΏΠ»Π°ΡΠΈΠ² Π·Π° Π»ΠΈΡΠ΅Π½Π·ΠΈΡ.
PlotKit β ΠΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π΄Π»Ρ Javascript. ΠΠ½ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ HTML Canvas, Π° ΡΠ°ΠΊΠΆΠ΅ SVG ΡΠ΅ΡΠ΅Π· Adobe SVG Viewer ΠΈ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°. PlotKit β ΡΡΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠ΅ΡΠ΅ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΉ CanvasGraph.
MilkChart β ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΡΠΉ JavaScript-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ MooTools. ΠΡΠΎ ΠΏΡΠΎΡΡΠΎ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΠΎ.
moochart β Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ MooTools, ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π½Π° ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠ·ΡΡΡΠΊΠΎΠ²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π½Π° ΡΠ΅Π³Π΅ Ρ ΠΎΠ»ΡΡΠ°.
moowheel β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠΉ JavaScript Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ MooTools.
table2chart β ΠΏΠ»Π°Π³ΠΈΠ½ MooTools, ΠΊΠΎΡΠΎΡΡΠΉ Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈΠ· Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΡΠ°Π±Π»ΠΈΡ Π΄Π°Π½Π½ΡΡ .
Canvas 3D Graph β ΠΎΡΠΎΠ±ΡΠΉ ΡΠΈΠΏ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΠΈΠΉ ΡΠΈΡΠ»Π° Π² 3D.
TufteGraph β Π΅ΡΠ΅ ΠΎΠ΄Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΠΎΡΠ½ΠΎΠ²Π°Π½Π½Π°Ρ Π½Π° jQuery. Π£ Π½Π΅Π³ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΡΠΉ API, Π° Π½Π΅ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ ΡΠ΅ΡΠ΅Π· CSS.
ArborJS β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π²Π΅Π±-Π²ΠΎΡΠΊΠ΅ΡΠΎΠ² ΠΈ jQuery.
TimePlot β ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ Π½Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΡΠ΄ΠΎΠ² Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π°Π½Π½ΠΎΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠ° Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠΌΠΈ ΡΠΎΠ±ΡΡΠΈΡΠΌΠΈ.
gRaphael β ΡΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ Π²Π΅Π±-ΡΠ°ΠΉΡΠ΅ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Raphael.
ICO β Π΅ΡΠ΅ ΠΎΠ΄Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π³ΡΠ°ΡΠΎΠ² JavaScript Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ Π Π°ΡΠ°ΡΠ»Ρ.
Elycharts β ΡΠΈΡΡΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ javascript, ΠΏΡΠΎΡΡΠ°Ρ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΠ°Ρ. ΠΠ½ ΠΎΡΠ½ΠΎΠ²Π°Π½ Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°Ρ jQuery ΠΈ RaphaΓ«l.
ZingChart β ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½Π½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π² HTML5, SVG, VML ΠΈ Flash. Π£ Π½ΠΈΡ ΡΠ°ΠΊΠΆΠ΅ Π΅ΡΡΡ ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠ° jQuery Π΄Π»Ρ ΡΡΠΎΠΉ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
RGraph β ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ΅Π³Π° Ρ ΠΎΠ»ΡΡΠ° HTML5.
Dojo Charting β Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Dojo, ΡΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Dojo β ΠΎΡΠ»ΠΈΡΠ½ΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ².
Bluff β Bluff β ΡΡΠΎ ΠΏΠΎΡΡ Π½Π° JavaScript Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Gruff Π΄Π»Ρ Ruby. ΠΠ½ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ Π΄Π»Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ Π²ΡΠ΅Ρ ΡΡΠ½ΠΊΡΠΈΠΉ Gruff Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌΠΈ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡΠΌΠΈ.
canvasXpress β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° javascript Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΡΠ΅Π³Π° Canvas, ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π² HTML5.
ccchart β ΠΏΡΠΎΡΡΠ°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° JavaScript, Π½Π΅ Π·Π°Π²ΠΈΡΡΡΠ°Ρ ΠΎΡ ΡΠ°ΠΊΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ, ΠΊΠ°ΠΊ jQuery.
JIT β JavaScript InfoVis Toolkit ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ
Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΉ Π΄Π°Π½Π½ΡΡ
Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ°.
JSXGraph β ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ Π³Π΅ΠΎΠΌΠ΅ΡΡΠΈΠΈ, ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΡΡΠ½ΠΊΡΠΈΠΉ, Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π² Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
Smoothie Charts β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ JavaScript Π΄Π»Ρ ΠΏΠΎΡΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΠΈ Π΄Π°Π½Π½ΡΡ .
YUI Charts β ΠΌΠΎΠ΄ΡΠ»Ρ YUI, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ JavaScript API Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΎΡΠΌΠ°ΡΠ°Ρ , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ SVG, HTML Canvas ΠΈ VML Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ²ΠΎΠΈΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
amcharts β Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ JavaScript / HTML5, Π²ΠΊΠ»ΡΡΠ°Ρ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ (ΡΡΠΎΠ»Π±ΡΡ, ΡΡΠΎΠ»Π±ΡΡ, Π»ΠΈΠ½ΠΈΠΈ, ΠΏΠ»ΠΎΡΠ°Π΄ΠΈ, ΡΡΡΠΏΠ΅Π½ΡΠ°ΡΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ, ΡΠ³Π»Π°ΠΆΠ΅Π½Π½ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ, ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠ½ΠΈΠΊΠΈ ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ OHLC), ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ / ΠΊΠΎΠ»ΡΡΠ΅Π²ΡΠ΅, ΡΠ°Π΄Π°ΡΠ½ΡΠ΅ / ΠΏΠΎΠ»ΡΡΠ½ΡΠ΅ ΠΈ xy / ΡΠΎΡΠ΅ΡΠ½ΡΠ΅ / ΠΏΡΠ·ΡΡΡΠΊΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
Emprise JavaScript Charts β Π³ΡΠ°ΡΠΈΠΊΠΈ Π½Π° ΡΠΈΡΡΠΎΠΌ JavaScript Ρ ΠΎΡΠ»ΠΈΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ ΠΈ Ρ ΠΎΡΠΎΡΠ΅ΠΉ ΠΊΡΠΎΡΡ-Π±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ.
JavaScript Diagram Builder β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ² ΠΈ ΡΡΠ½ΠΊΡΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠΌΠΎΡΡ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈΠ»ΠΈ Π³ΡΠ°ΡΠΈΠΊ.
jGraph β ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ HTML5 Ρ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ IE 6-8 ΠΈ ΡΠ΅Π½ΡΠΎΡΠ½ΡΡ
ΡΡΡΡΠΎΠΉΡΡΠ².
Sencha Touch Charts β ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ HTML5 Canvas ΠΈ CSS3 Π΄Π»Ρ Π΄ΠΎΡΡΠ°Π²ΠΊΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π² ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ Π²Π΅Π±-Π±ΡΠ°ΡΠ·Π΅ΡΡ.
Style Chart β Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΡΠ΅ΡΠ²ΠΈΡ Ajax Visualization Charting
ΠΡΠ»ΠΈ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ΠΈ Π²Π΅Π±-ΡΠ»ΡΠΆΠ±Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠ΅ΠΉ Π΄Π°Π½Π½ΡΡ , Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ Datavisualization.ch.
ΠΡΠΎΠΏΡΡΡΠΈΠ» Π»ΠΈ Ρ Ρ ΠΎΡΠΎΡΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² JavaScript?
ΠΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅:
MetricsGraphics.js β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ°, ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½Π°Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3 ΠΈ ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ Π΄Π»Ρ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΡΠ΄ΠΎΠ².
AwesomeChartJS β Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡΠΈΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ JavaScript ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ Ρ ΠΎΠ»ΡΡΠ°
Sigma.js β ΠΎΠ±Π»Π΅Π³ΡΠ΅Π½Π½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΡΠ΅Π²ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΉ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ ΠΎΠ»ΡΡΠ° HTML.
Graphene β ΠΏΠ°Π½Π΅Π»Ρ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΈ Π½Π°Π±ΠΎΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π² ΡΠ΅Π°Π»ΡΠ½ΠΎΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3 ΠΈ Backbone.
jQuery ToastChart β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΡΠ΅Ρ
ΡΠΈΠΏΠΎΠ² Π΄Π°Π½Π½ΡΡ
Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Ρ
ΠΎΠ»ΡΡΠ° HTML5.
ChartsJS β ΠΡΠΎΡΡΡΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΠΎ-ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΠ΅ Π³ΡΠ°ΡΡ Π΄Π»Ρ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠΎΠ² ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ².
Cytoscape.js β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π³ΡΠ°ΡΠΎΠ² JavaScript Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π΄Π»Ρ Π°Π½Π°Π»ΠΈΠ·Π° ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ.
Ember Timetree β Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠΉΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠΊΠ°Π»Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Ember.js ΠΈ D3.js.
Simplify.js β ΠΊΡΠΎΡΠ΅ΡΠ½Π°Ρ Π²ΡΡΠΎΠΊΠΎΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΡΠΏΡΠΎΡΠ΅Π½ΠΈΡ 2D / 3D ΠΏΠΎΠ»ΠΈΠ»ΠΈΠ½ΠΈΠΉ JavaScript (ΠΈΠ·Π²Π»Π΅ΡΠ΅Π½Π° ΠΈΠ· Leaflet)
DataMaps β ΠΠ°ΡΡΡ Π΄Π»Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ Π² Javascript (Ρ d3js)
Aristochart β ΠΏΡΠΎΡΡΡΠ΅ ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ Π΄Π²ΡΡ ΠΌΠ΅ΡΠ½ΡΠ΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
ΠΠΎΡΡΠΈΡ.js β Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΡΠ΄ΠΎΠ² Ρ jQuery ΠΈ Raphael.js
Grafico β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ javascript Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ RaphaΓ«l ΠΈ Prototype.js
jQuery orgChart β Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ JQuery, ΠΊΠΎΡΠΎΡΡΠΉ Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΠΈΠ΅ΡΠ°ΡΡ ΠΈΡΠ΅ΡΠΊΡΡ ΠΎΡΠ³Π°Π½ΠΈΠ·Π°ΡΠΈΠΎΠ½Π½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈΠ· Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ Π½Π΅ΡΠΏΠΎΡΡΠ΄ΠΎΡΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ°.
TimeChart β ΠΌΠΎΡΠ½Π°Ρ ΠΈ ΠΏΡΠΎΡΡΠ°Ρ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ
Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ Π½Π° ΡΠΈΡΡΠΎΠΌ HTML5-JavaScript.
JointJS β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript Ρ ΠΎΡΠΊΡΡΡΡΠΌ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
sDashboard β ΠΏΡΠΎΡΡΠΎΠΉ ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ Π΄Π»Ρ ΠΏΡΠΈΠ±ΠΎΡΠ½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π° javascript
jQuery Spidergraph β ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΌΠΎΠ΄ΡΠ»Ρ Π³ΡΠ°ΡΠ° ΠΏΠ°ΡΠΊΠ° HTML5 Π΄Π»Ρ jQuery.
sheetsee.js β Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΡΠΉΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΠΈΠ· ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΡ Google.
Chartbuilder β ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3.js, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΎΡΡΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ²
dViz β Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π΅ΠΊΠ»Π°ΡΠ°ΡΠΈΠ²Π½ΠΎΠΉ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ , Π½Π°ΠΏΠΈΡΠ°Π½Π½Π°Ρ Π½Π° JavaScript. ΠΡΡΡΠ°ΠΈΠ²Π°ΠΉΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΡΠΎΡΡΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΠΊΠΎΠ΄ HTML.
Chartkick.js β Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Javascript Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ ΠΊΠΎΠ΄ΠΎΠΌ.
CSSplot β ΠΡΠΎΡΡΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ CSS
Plottable β ΠΠΈΠ±ΠΊΠΈΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3
ChartJS β ΠΏΡΠΎΡΡΡΠ΅, ΠΏΠΎΠ½ΡΡΠ½ΡΠ΅ ΠΈ ΡΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ
Π‘ΡΠΆΠ΅ΡΠ½ΠΎ.js β ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠ°Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° JavaScript, ΠΏΠΎΡΡΡΠΎΠ΅Π½Π½Π°Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ D3.