Π Π°Π·Π½ΠΎΠ΅

Jquery Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ: 5 Π»ΡƒΡ‡ΡˆΠΈΡ… jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для построСния Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ²

07.04.2019

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

5 Π»ΡƒΡ‡ΡˆΠΈΡ… jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для построСния Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ²

Если Π²Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с Ρ†ΠΈΡ„Ρ€Π°ΠΌΠΈ, Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΡ… Π½Π΅ Ρ‚Π°ΠΊ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, особСнно ΠΊΠΎΠ³Π΄Π° ΠΈΡ… ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ. Π›ΡƒΡ‡ΡˆΠ΅ всСго ΠΈΡ… ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² ΠΈΠ»ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ ΠΈ поэтому Π² этой записи я подСлюсь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΈΠ· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹.

И Ρ‚Π°ΠΊ сразу приступим.

Flot β€” это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½Π΅ΠΌΠ½ΠΎΠ³ΠΈΡ… jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ построСния Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ². ΠžΡ‚ простых ΠΈ самых слоТных.

Π’ΠΎΡ‚ нСсколько ΠΈΠ· ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎ:

  1. простой Π³Ρ€Π°Ρ„ΠΈΠΊ
  2. Ρ€Π°Π·Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ²
  3. Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ (ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· AJAX)

Hightcharts β€” это простой Π² использовании скрипт для отобраТСния Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ Π½Π° сайтС. ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΉ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹:

  1. ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€
  2. Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° посрСдством AJAX
  3. ΠšΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ Π²ΠΈΠ΄

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ вСсь список Π΄Π΅ΠΌΠΎ.

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
ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ
user146584     29 июля 2009 Π² 15:27

8 ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ²


  • Как Qt ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ²?

    Π’ Qt ΠΊΠ°ΠΊ поддСрТиваСтся рСализация Π³Ρ€Π°Ρ„ΠΎΠ², Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ построСниС Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ²? Π•ΡΡ‚ΡŒ Π»ΠΈ Ρƒ нас ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ классы Qt ΠΈΠ»ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ для Π½Π΅Π³ΠΎ, ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ для Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ? Π“Ρ€Π°Ρ„ΠΈΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ здСсь Π±ΡƒΠ΄Π΅Ρ‚ нарисован, прСдставляСт собой Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊ, ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚ΠΎΠΊΠΎΠΌ ΠΈ напряТСниСм.

  • ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ΅ использованиС Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ², Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰ΠΈΡ… построСниС Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ knitr .Rmd

    ΠŸΡ€ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΌ использовании Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰Π΅Π³ΠΎ построСниС Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ², Π½Π° Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Π½Π΅ ΡΡΡ‹Π»Π°ΡŽΡ‚ΡΡ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠ½ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹ для ΠΎΠ±ΠΎΠΈΡ… Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ², хотя ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ.

    Π§Ρ‚ΠΎ я ΠΌΠΎΠ³Ρƒ с этим ΠΏΠΎΠ΄Π΅Π»Π°Ρ‚ΡŒ? ## Test Β«`{r} col <- black Β«` Β«`{r chunk1} plot(0, col=col) Β«` Β«`{r} col…



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


  • ΠŸΠΎΡΡ‚Ρ€ΠΎΡ‡Π½Ρ‹ΠΉ Π°Π½Π°Π»ΠΈΠ· ΠΈ построСниС Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°Ρ… Π²ΠΎ врСмя ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ

    Π― Π³ΠΎΡ‚ΠΎΠ²Π»ΡŽ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΏΠΎ Π°Π½Π°Π»ΠΈΠ·Ρƒ Π΄Π°Π½Π½Ρ‹Ρ…, ΠΈ ΠΌΠ½Π΅ прСдоставляСтся ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ 2-3 ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΡ€ head-up. Π― Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€(+ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΡ€) для ΠΊΠΎΠ΄Π°, ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€(+ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΡ€) для консольного дисплСя ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€(+ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΡ€) для Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ². ΠœΠΎΠ½ΠΈΡ‚ΠΎΡ€Ρ‹ β€” для мСня, ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΡ€Ρ‹-для Π·Ρ€ΠΈΡ‚Π΅Π»Π΅ΠΉ. Π― такТС…

  • ΠŸΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² с использованиСм 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:

  1. ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ холст:
 // с ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
var myCanvas = $ ('# 3dcanvas'). scene3d ();

// ΠΈΠ»ΠΈ с опциями ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ Π²Ρ‹Π±ΠΎΡ€Ρƒ
var myCanvas = $ ('# 3dcanvas'). scene3d ({
ΡˆΠΈΡ€ΠΈΠ½Π°: Β«600 пиксСлСй»,
высота: Β«600 пиксСлСй»,
Ρ„ΠΎΠ½: "#eeeeee"
}); 
  1. Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ свои 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});
}); 
  1. Ρ‰Π΅Π»Ρ‡ΠΎΠΊ, ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚, ΠΏΠ°Π½ΠΎΡ€Π°ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ …

Π”Π΅ΠΌΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π² ΠΏΠ°ΠΏΠΊΠ΅ Β«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


Π’Π°Ρˆ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ элСмСнт.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ HTML ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для рисования Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Π½Π° Π²Π΅Π±-страницС.

Рисунок Π²Ρ‹ΡˆΠ΅ создан с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ.

Он ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ элСмСнта: красный ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, ΠΌΠ½ΠΎΠ³ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹ΠΉ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹ΠΉ тСкст.


Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ холст HTML?

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ HTML ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для рисования Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Β«Π½Π° Π»Π΅Ρ‚ΡƒΒ» с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сцСнариСв (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ JavaScript).

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ β€” это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ. Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сцСнарий, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ.

Canvas ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² рисования ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ², ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠΎΠ², ΠΊΡ€ΡƒΠ³ΠΎΠ², тСкста ΠΈ добавлСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.


ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

Числа Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΡƒΡŽ Π­Π»Π΅ΠΌΠ΅Π½Ρ‚.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚
<холст> 4,0 9,0 2,0 3,1 9,0

Π₯олст HTML ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ тСкст

Canvas ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ тСкст с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΈΠ»ΠΈ Π±Π΅Π· Π½Π΅Π΅.


HTML Canvas ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ

Canvas ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ возмоТности для графичСского прСдставлСния Π΄Π°Π½Π½Ρ‹Ρ… с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹.



HTML Canvas ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

Canvas ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ всС: ΠΎΡ‚ простых ΠΏΡ€Ρ‹Π³Π°ΡŽΡ‰ΠΈΡ… мячСй Π΄ΠΎ слоТных Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ.


Π₯олст HTML ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ

Canvas ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Бобытия JavaScript.

Canvas ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° любоС дСйствиС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ клавиш, ΠΌΡ‹ΡˆΡŒ Ρ‰Π΅Π»Ρ‡ΠΊΠΈ, наТатия ΠΊΠ½ΠΎΠΏΠΎΠΊ, двиТСния ΠΏΠ°Π»ΡŒΡ†Π°).


Π₯олст HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΈΠ³Ρ€Π°Ρ…

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹

Canvas для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ мноТСство возмоТностСй для ΠΈΠ³Ρ€ HTML ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ.


ΠŸΡ€ΠΈΠΌΠ΅Ρ€ холста

Π’ HTML элСмСнт выглядит Ρ‚Π°ΠΊ:

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π° Π½Π΅Π³ΠΎ ΠΌΠΎΠ³ ΡΡΡ‹Π»Π°Ρ‚ΡŒΡΡ JavaScript.

Атрибуты ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ для опрСдСлСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° холста.

Π‘ΠΎΠ²Π΅Ρ‚: Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ нСсколько элСмСнтов Π½Π° ΠΎΠ΄Π½ΠΎΠΉ HTML-страницС.

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ элСмСнт Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°ΠΌΠΊΠΈ ΠΈ содСрТимого.

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ стиля:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

<холст style = "border: 1px сплошной" # 000000; ">

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам Β»

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π³Π»Π°Π²Π°Ρ… ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π½Π° холстС.



25+ послСдних ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ jQuery | jQuery

25+ ПослСдниС ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ скрипты jQuery для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² . Π­Ρ‚ΠΎΡ‚ пост содСрТит слайдСров jQuery, , Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для слайд-ΡˆΠΎΡƒ, мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ jQuery, ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚Ρ‹, Ρ€ΠΎΡ‚Π°Ρ‚ΠΎΡ€Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π½Ρ‹Π΅ мСню, элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Ρ„ΠΎΡ€ΠΌΡ‹ Π²Π΅Π±-ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚ΠΎΠ², ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. послСдних скриптов jQuery, собраны Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС.

ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ jQuery Π²Ρ‹ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ постоянно, ΠΈ это Π½Π΅ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ Π±Π΅Π·ΡƒΠΌΠ½ΠΎ популярСн, ΠΈ Π½Π΅ зря. ЕдинствСнная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… всС Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ всСгда Π½Π°Ρ‡Π΅ΠΊΡƒ ΠΈ ΠΏΠΎΠ΄Π±Π΅Ρ€Π΅ΠΌ для вас нСсколько Ρ…ΠΎΡ€ΠΎΡˆΠΈΡ…. Π’ΠΎΡ‚ 10 ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ².

Π’ этом постС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡˆΡ‚Ρ€Π°Ρ„ΠΎΠ²Π°Ρ‚ΡŒ 25+ ПослСдниС ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ jQuery . ΠΠ°ΡΠ»Π°ΠΆΠ΄Π°Ρ‚ΡŒΡΡ!

Вас Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ, посвящСнныС соврСмСнным тСндСнциям.

ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΏΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒΡΡ ΠΊ Π½Π°ΠΌ, ΠΈ Π²Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ своими мыслями, Π΄Π°ΠΆΠ΅ Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ссылки Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ совСты ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΡ‚ΡŒΡΡ нашим читатСлям.

НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° Π½Π°ΡˆΡƒ RSS-Π»Π΅Π½Ρ‚Ρƒ ΠΈ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° нас Π² Twitter β€” для послСдних ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ.

jQuery Flexible Font Size Plguin: FitText


FitText Π΄Π΅Π»Π°Π΅Ρ‚ Π³ΠΈΠ±ΠΊΠΈΠΌΠΈ font-sizes jQuery ΠΏΠ»Π°Π³ΠΈΠ½ для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ тСкст помСщаСтся Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ элСмСнт .Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ этот ΠΏΠ»Π°Π³ΠΈΠ½ Π² своСм Π³ΠΈΠ±ΠΊΠΎΠΌ ΠΈΠ»ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΠΏΠΎΠ»Π½ΡΡŽΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта. Он ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Π²Ρ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² тСкстС Π°Π±Π·Π°Ρ†Π°.

Он автоматичСски обновляСт Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π² соотвСтствии с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΎΠ±ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°ΡŽΡ‰Π΅Π³ΠΎ Π΅Π³ΠΎ элСмСнта ΠΈ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π΅Ρ€Π°Π·Ρ€Ρ‹Π²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ (ΠΈΠ·-Π·Π° Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°), Π΄Π°ΠΆΠ΅ Ссли страница отобраТаСтся ΠΈΠ· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° мобильного ΠΈΠ»ΠΈ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, для Ρ‚ΠΎΡ‡Π½ΠΎΠΉ настройки прСдусмотрСно нСсколько ΠΎΠΏΡ†ΠΈΠΉ , Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ установки «уровня ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡΒ» ΠΈ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅ минимального ΠΈ максимального Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ².

ВрСбования: 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.

  • Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

    Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *