Π Π°Π·Π½ΠΎΠ΅

Html Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° – Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ Π½Π° html5

11.05.2020

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

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡƒ β€” htmllab

Cтолбчатая Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°

Π”ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° β€” графичСскоС прСдставлСниС Π΄Π°Π½Π½Ρ‹Ρ… гСомСтричСскими Ρ„ΠΈΠ³ΡƒΡ€Π°ΠΌΠΈ (ΠΎΡ‚Ρ€Π΅Π·ΠΊΠ°ΠΌΠΈ, столбцами, сСкторами ΠΈ Ρ‚.Π΄.), ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅Π΅ быстро ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½. На HTML создаСтся столбчатая Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ. Если ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ SVG-Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ нСвСроятных прСдставлСния Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ, ΠΊΠ°ΠΊ Π² d3.js.

На курсах часто Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ вопрос ΠΎ создании простой столбчатой Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ срСдствами HTML ΠΈ CSS. Для ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Π³Ρ€Π°Ρ„ΠΈΠΊΠ° Π½ΡƒΠΆΠ΅Π½ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, снабдим Π΅Π³ΠΎ классом .graph ΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты столбцы, ΠΏΡƒΡΡ‚ΡŒ это Π±ΡƒΠ΄ΡƒΡ‚ элСмСнты div с классом .item.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡƒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ

Для Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π³Ρ€Π°Ρ„ΠΈΠΊΠ° Π½ΡƒΠΆΠ½ΠΎ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ усилий: .item β€” Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ 100% ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΡ‚ .graph, Π·Π½Π°Ρ‡ΠΈΡ‚ достаточно Π·Π°Π΄Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ столбцу ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΈ тСкст Π²Π½ΡƒΡ‚Ρ€ΠΈ, ΠΊΠ°ΠΊ Π·Π°Π΄Π°Ρ‡Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅ΡˆΠ΅Π½Π°. Π€ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ вынСсти Π² стили Π²Π½Π΅ HTML-элСмСнта, Ρ‚Π°ΠΌ ΠΆΠ΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ высоту (Ρ‚.Π΅. Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ столбца, ΠΎΠ½Π° Ρƒ всСх ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ одинаковая) Π° Π²ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ всСгда ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ.

<div>
  <div>10</div>
  <div>25</div>
  <div>30</div>
  <div>50</div>
</div>

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡƒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ

Для Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ столбчатой Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ CSS-свойства. Π’ΡƒΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ Ρ€Π°Π·Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ вёрстки, Π½ΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΠ»Π΅ΠΌΡ‹ΠΌ ΠΏΠΎ скорости видится Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ .item свойства display: inline-block. Π’ этом случаС придётся ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ ΠΈ Π²Ρ‹Π½ΠΎΡΠΈΡ‚ΡŒ Π² стилСвой Ρ„Π°ΠΉΠ» ΠΈΠ»ΠΈ Π² head, Π° высоту ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ столбца.

<div>
  <div>10</div>
  <div>25</div>
  <div>30</div>
  <div>50</div>
</div>

Один Ρ€Π°Π· свСрстав ΠΏΠΎΠ΄ΠΎΠ±Π½ΡƒΡŽ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡƒ, Π² дальнСйшСм ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ скрипт Π½Π° JavaScript, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΠ»Π°ΡΡŒ рутинная Ρ€Π°Π±ΠΎΡ‚Π° ΠΏΠΎ созданию ΠΈΠ· Π½Π°Π±ΠΎΡ€Π° чисСл β€” симпатичного Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, Π° самим ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ стили ΠΈΠ»ΠΈ оформлСния Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ Π³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈΠ»ΠΈ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹, стоящиС Π±ΠΎΠ»Π΅Π΅ слоТныС ΠΈ красивыС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.

#graph.graph{
  border: 1px dashed #77FF5C;
  padding: 5px;
}
#graph .item{
  margin: 2px;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  padding: 3px;
  border-radius: 3px;  
  background-color: #00508C;
  box-shadow: 0 0 1px #2280AC;
}
#graph .item:hover{
  background-color: #2280AC;  
  box-shadow: 0 0 2px #2280AC;
}
   
#graph.horizontal{
  width: 200px;
}
#graph.horizontal .item{
  height: 20px;
  text-align: right;
}
#graph.vertical{
 height: 120px;
 width: 200px; 
 padding-bottom: 10px;
}
#graph.vertical .item{
  width: 20px;  
  float: left;
  display: inline-block;
}

Π€ΠΈΠ΄Π» с ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ.

htmllab.ru

ΠŸΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° 12 скриптов для построСния красивых Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ.

Π€Π΅Π²
26
2013

Π”ΠΎΠ±Ρ€Ρ‹ΠΉ дСнь ΠΌΠΎΠΉ Π΄ΠΎΡ€ΠΎΠ³ΠΎΠΉ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŒ ΡΠ΅Π³ΠΎΠ΄Π½Ρ я Ρ…ΠΎΡ‡Ρƒ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ Ρ‚Π΅Π±Π΅ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² для ΠΏΠΎΡΡ‚роСния Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ ΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ². Π”ΡƒΠΌΠ°ΡŽ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π½Π°ΠΉΠ΄Π΅Ρ‚ Π΄Π»Ρ сСбя Ρ‡Ρ‚ΠΎ Ρ‚ΠΎ ΠΈΠ½Ρ‚СрСсноС.

1. jqPlot β€” Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹ΠΉ JQuery Plugin для построСния Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ²

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

jqPlot β€” JQuery ΠŸΠ»Π°Π³ΠΈΠ½ Π΄Π»Ρ ΠΏΠΎΡΡ‚роСния Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² Π½Π° Javascript.
jqPlot ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ красивыС Π»ΠΈΠ½ΠΈΠΈ, Π±Π°Ρ€Ρ‹ ΠΈ ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ с большим количСством Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ:
ΠœΠ½ΠΎΠ³ΠΎΡ‡ΠΈΡΠ»Π΅Π½Π½Ρ‹Π΅ стили Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ.
Π”Π°Π½Π½Ρ‹Π΅ Π½Π° оси с настраиваСмым Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ.
Π”ΠΎ 9 осСй Y.
ΠŸΠΎΠ²ΠΎΡ€ΠΎΡ‚ тСкста оси.
АвтоматичСскоС вычислСниС Π»ΠΈΠ½ΠΈΠΈ Ρ‚Ρ€Π΅Π½Π΄Π°.

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки.
ΠŸΡ€ΠΎΡΡ‚ΠΎΡ‚Π°  ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΡ.

http://www.jqplot.com/

2. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Dygraphs

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Dygraphs являСтся Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, которая строит  ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅, ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Π΅ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… рядов. Она ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для отобраТСния ΠΏΠ»ΠΎΡ‚Π½Ρ‹Ρ… массивов Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ….

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ:
ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… рядов Π±Π΅Π· использования Π²Π½Π΅ΡˆΠ½ΠΈΡ… сСрвСров ΠΈΠ»ΠΈ Ρ„Π»ΡΡˆ-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Internet Explorer (с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ excanvas)
ΠœΠ°Π»Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ (69kb)
ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ значСния ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ
Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅  ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅
Π Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄ усрСднСния

Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с API Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ Google
http://dygraphs.com/

3. Highcharts β€” Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ JavaScript для вашСго сайта

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Highcharts являСтся Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ для постройки Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² , написанная Π½Π° чистом JavaScript, прСдлагая ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ для вашСго Π²Π΅Π±-сайта ΠΈΠ»ΠΈ Π²Π΅Π±-прилоТСния. Highcharts Π² настоящСС врСмя ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π»ΠΈΠ½ΠΈΠΈ, сплайны, области, areaspline, ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π±Π°Ρ€, ΠΏΠΈΡ€ΠΎΠ³, разброс, ΡƒΠ³Π»ΠΎΠ²Ρ‹Π΅ Π΄Π°Ρ‚Ρ‡ΠΈΠΊΠΈ, arearange, areasplinerange, columnrange ΠΈ полярныС Ρ‚ΠΈΠΏΡ‹ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ.

http://www.highcharts.com/

4. JQuery с эффСктом ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠ° ΠΌΡ‹ΡˆΠΈ

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

НС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚  PNG ΠΈΠ»ΠΈ JPG спрайты.
ΠžΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ события сСнсора, колСсика ΠΌΡ‹ΡˆΠΈ, ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹.

http://anthonyterrien.com/knob/

5. Π‘Ρ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ Π½Π° CSS3

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π‘Ρ‚ΠΈΠ»ΡŒΠ½Ρ‹Π΅,  Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅  ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹ с использованиСм CSS3.
http://www.red-team-design.com

6. Highcharts с JQuery

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Highcharts это совмСстимая  Ρ JQuery ΠΈ Mootools, Π±ΠΈΠ±Π»Π΅ΠΎΡ‚Π΅ΠΊΠ° для построСния Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ². Она совмСстима со всСми стандартными Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, для построСния Π³Ρ€Π°Ρ„Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚  JSON Π΄Π°Π½Π½Ρ‹Π΅. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚  Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΈΠΏΠΎΠ² Π³Ρ€Π°Ρ„Π°  Π»ΠΈΠ½ΠΈΠΈ, сплайны , ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, areaspline, ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π±Π°Ρ€, pie ΠΈ Ρ‚ΠΎΡ‡Π΅Ρ‡Π½ΡƒΡŽ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡƒ.
 Highcharts.com

7. Анимированный Π³Ρ€Π°Ρ„ Π½Π° HTML5 ΠΈ JQuery

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΡ€Π΅ΠΊΡ€Π°ΡΠ½Π°Ρ, интСрактивная круговая Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° с использованиСм Π½ΠΎΠ²Π΅ΠΉΡˆΠΈΡ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ HTML5. НС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚  Flash.

8. Π­ΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π³Ρ€Π°Ρ„ Π½Π° CSS3

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ являСтся ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΉΠΊΠΈ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Π³Ρ€Π°Ρ„ΠΈΠΊΠ°Ρ… Π½Π° CSS3, Π±Π΅Π· JavaScript ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ИспользованиС CSS3 сСлСкторов поистинС впСчатляСт: трансформации, Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ Π² использовании. К ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡŽ Π½Π΅ поддСрТиваСтся Π²  IE.

9. Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° Π½Π° JQuery ΠΈ HTML5

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Visualize ΠΏΠ»Π°Π³ΠΈΠ½ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ элСмСнты содСрТания Π² структурированной HTML Ρ‚Π°Π±Π»ΠΈΡ†Π΅, ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ HTML5, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΈΡ… Π² Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡƒ ΠΈΠ»ΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊ. НапримСр, Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π΄Π°Π½Π½Ρ‹Ρ… строки ΠΌΠΎΠ³ΡƒΡ‚ ΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΌ Π±Π°Ρ€ΠΎΠ², Π»ΠΈΠ½ΠΈΠΉ ΠΈΠ»ΠΈ ΠΊΠ»ΠΈΠ½Π΅Π². Visualize Ρ‚Π°ΠΊΠΆΠ΅ автоматичСски провСряСт максимальноС ΠΈ минимальноС значСния Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΈΡ… для расчСта оси Ρ… значСния для Π»ΠΈΠ½ΠΈΠΈ ΠΈ гистограммы. НаконСц, ΠΏΠ»Π°Π³ΠΈΠ½ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Π΄Π²Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… стиля CSS β€” свСтлый ΠΈ  Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ  ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒ, ΠΈΠ»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ Π² качСствС ΠΎΡ‚ΠΏΡ€Π°Π²Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ для настройки Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ ΠΈ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ².

http://filamentgroup.com

10. ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ Π±Π°Ρ€Ρ‹ Π½Π° CSS

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΡ€Π΅ΠΊΡ€Π°ΡΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ построСния Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹Ρ… Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ²-Π±Π°Ρ€ΠΎΠ².

11. Π›ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π“Ρ€Π°Ρ„ΠΈΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

12. JQuery с Google Charts

Π”Π΅ΠΌΠΎ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

GvChart это ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Google Charts для создания ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ с использованиСм Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ· HTML Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Π² использовании ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡΡ‚ΡŒ Ρ‚ΠΈΠΏΠΎΠ² Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ ΡƒΡ€ΠΎΠΊΠ°: http://www.adatum.ru
Автор: Π‘Π΅Ρ€Π³ΠΎΠΌΠ°Π½ΠΎΠ² Π”ΠΌΠΈΡ‚Ρ€ΠΈΠΉ
ΠœΠ΅Ρ‚ΠΊΠΈ: angular gauges chart, area chart, arearange chart, areaspline chart, areasplinerange chart, bar chart, column chart, columnrange chart, line chart, pie chart, polar chart, scatter chart, spline chart, Π³Ρ€Π°Ρ„, Π³Ρ€Π°Ρ„ΠΈΠΊ, Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°

adatum.ru

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Π°Ρ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° Π½Π° CSS ΠΈ HTML / Habr

:hover

Π’ ΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎΠΉ Ρ€Π°Π· просматривая ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок, наткнулся Π½Π° Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ пост.
НичСго свСрхслоТного ΠΈ свСрхсСкрСтного Π² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π΅ Π±Ρ‹Π»ΠΎ, Π½ΠΎ ΠΎΠ½Π° ΠΌΠ½Π΅ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»Π°ΡΡŒ своСй простотой ΠΈ отсутствиСм javascript’a.
Обмозговав Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅, Ρ€Π΅ΡˆΠΈΠ» Ρ‡Ρ‚ΠΎ Π½Π° самой подсказкС Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ подсказки, Π½Π° подсказках Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ уровня, ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ подсказки 3Π΅Π³ΠΎ уровня ΠΈ Ρ‚.Π΄. МоТно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Π±Π»ΠΎΠΊ-схСму!


РСализация

Взяв Π·Π° основу Π±Π»ΠΎΠΊ-схСму для ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ (ΠΏΡ€ΠΎΡˆΡƒ прощСния, Π³Π΄Π΅ попалась ΠΌΠ½Π΅ эта ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, я ΡƒΠΆΠ΅ Π½Π΅ помню):

Ρ€Π΅ΡˆΠΈΠ» ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Ρ‚Ρ€ΡƒΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΠΎ этой ссылкС.
Π‘ΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ для Ρ‚Π΅Ρ…, ΠΊΠΎΠΌΡƒ лСнь ΠΊΠ»ΠΈΠΊΠ°Ρ‚ΡŒ:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎ ΠΊΠΎΠ΄Π΅

HTML

Бтруктурная Π΅Π΄ΠΈΠ½ΠΈΡ†Π° прСдставляСт собою span с тСкстом Π²Π½ΡƒΡ‚Ρ€ΠΈ. Π’Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π΄Π²Π° Π±Π»ΠΎΠΊΠ° a послС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½ΠΎΠ²Ρ‹ΠΉ span, ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, новая структурная Π΅Π΄ΠΈΠ½ΠΈΡ†Π°.

CSS

БобствСнно сам Π΄Π²ΠΈΠ³Π°Ρ‚Π΅Π»ΡŒ:

Π’ зависимости ΠΎΡ‚ полоТСния курсора, Ρ‚ΠΎΡ‚ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ Π±Π»ΠΎΠΊ Π²ΡΡ‚Π°ΡŽΡ‚ ΠΏΠΎΠ΄ Π±Π»ΠΎΠΊΠΎΠΌ, Π½Π°Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ находится курсор.
Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π― Π½Π΅ ΠΏΡ€Π΅Ρ‚Π΅Π½Π΄ΡƒΡŽ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΎΠΈ Π½Π°Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, Π½ΠΎ Π΄ΡƒΠΌΠ°ΡŽ Ρ‡Ρ‚ΠΎ сиС нСбольшоС Ρ‚Π²ΠΎΡ€Π΅Π½ΠΈΠ΅ Π½Π°Ρ‚ΠΎΠ»ΠΊΠ½Π΅Ρ‚ ΠΊΠΎΠ³ΠΎ-Ρ‚ΠΎ Π½Π° Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ экстравагантныС ΠΈΠ΄Π΅ΠΈ.

Π•Ρ‰Π΅ Ρ€Π°Π· моя Π±Π»ΠΎΠΊ-схСма

О Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказках Π½Π° CSS

habr.com

JavaScript Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ для создания ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Ρ… Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ

Morris.js
Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° создана ΠΏΠΎΠ΄ Π΄Π΅Π²ΠΈΠ·ΠΎΠΌ Β«ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ слоТными». Π“Ρ€Π°Ρ„ΠΈΠΊΠΈ, гистограммы, ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Π΅ ΠΈ ΠΊΠΎΠ»ΡŒΡ†Π΅Π²Ρ‹Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ выглядят красиво, Π° API ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ нСслоТным.

gRaphael
МалСнькая, Π½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π°Ρ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π° страницС Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹, Π½ΠΎ ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ манипуляции Π½Π°Π΄ графичСскими ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ спСцэффСкты ΠΊ изобраТСниям ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ элСмСнты.

jqPlot
jqPlot β€” ΠΏΠ»Π°Π³ΠΈΠ½ ΠΊ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ jQuery, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ красивыС Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ самых Ρ€Π°Π·Π½Ρ‹Ρ… Π²ΠΈΠ΄ΠΎΠ² (Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Π΅, гистограммы, ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Π΅ ΠΈ Π΄Ρ€.) ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠΉ мноТСство Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов: оси (Π² Ρ‚ΠΎΠΌ числС Π΄ΠΎ 9 Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ…), Π»Π΅Π³Π΅Π½Π΄Ρ‹, значСния ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΈ ΠΏΡ€ΠΎΡ‡Π΅Π΅.

ECharts
КомплСксная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰Π°Ρ Π±ΠΎΠ»Π΅Π΅ 17 основных Π²ΠΈΠ΄ΠΎΠ², Π½Π΅ считая ΠΈΡ… ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΉ. ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ΠΈ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ впСчатляСт.

Circle
Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, Π½ΠΎ Ссли Π²Π°ΠΌ этого достаточно, Ρ‚ΠΎ это ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€, учитывая, Ρ‡Ρ‚ΠΎ Π² ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅ ΠΎΠ½Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‡ΡƒΡ‚ΡŒ большС 5 kB.

JSGraphics.js
JSGraphics.js позволяСт динамичСски Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π½Π° страницС Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Π½ΠΎ ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ графичСскиС ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Ρ‹ β€” Π»ΠΈΠ½ΠΈΠΈ, окруТности, ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½Ρ‹ ΠΈ ΠΏΠΎΠ»ΠΈΠ»ΠΈΠ½ΠΈΠΈ. ΠžΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠ° Π² использовании Π΄Π°ΠΆΠ΅ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π½Π΅ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ большим ΠΎΠΏΡ‹Ρ‚ΠΎΠΌ Π² написании Java-скриптов.

CircleDonutChart
CircleDonutChart ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π½Π° страницС ΠΊΠΎΠ»ΡŒΡ†Π΅Π²ΡƒΡŽ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡƒ Π² 2D прСдставлСнии ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ рисования ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²ΠΎΠ² SVG-Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΌ элСмСнтС. ИзмСнСния Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽΡ‚ΡΡ ΠΏΠ»Π°Π²Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ.

jQuery Kontrol
Π­ΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, содСрТащая элСмСнты управлСния Π² Π²ΠΈΠ΄Π΅ ΠΊΠΎΠ»ΡŒΡ†Π΅Π²ΠΎΠ³ΠΎ манипулятора, XY манипулятора ΠΈ манипулятора Π² Π²ΠΈΠ΄Π΅ гистограммы. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ с canvas ΠΈ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ png ΠΈΠ»ΠΈ jpg спрайты. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€ΠΎΠΉ, ΠΌΡ‹ΡˆΡŒΡŽ ΠΈ ТСстами.

Chart.js
ЛСгкая, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-ориСнтированная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° для отобраТСния Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ. ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ 8 способов Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ…. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ всСми аспСктами построСния Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ, Ρ‡Ρ‚ΠΎ позволят ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠ΅ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, Π² Ρ‚ΠΎΠΌ числС Π½Π° retina-дисплСях. Для отобраТСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ элСмСнт canvas ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх HTML5 совмСстимых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

Circliful
Как ΠΆΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π»ΡŽΠ±ΡΡ‚ ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹! И Π²ΠΎΡ‚ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° β€” Circliful. ΠŸΠΎΡΡ‚Ρ€ΠΎΠ΅Π½Π° Π½Π° HTML5 ΠΈ jQuery ΠΈ полагаСтся Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ Π½Π° Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π΅ΡΠΊΡƒΡŽ отрисовку, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… спрайтов. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ Π½Π° экранах любого Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.

Cake Chart
Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π°Ρ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΡƒΡŽ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΊΡ€ΡƒΠ³ΠΎΠ²ΡƒΡŽ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡƒ. Π‘Π°ΠΌΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ, Π½ΠΎ Π½Π΅ обСспСчиваСт Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ. Π’ΠΏΡ€ΠΎΡ‡Π΅ΠΌ, это совсСм нСслоТно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈ самому.

postovoy.net

ИспользованиС HTML-Ρ‚Π°Π±Π»ΠΈΡ† для Π²Ρ‹Π²ΠΎΠ΄Π° Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²ΠΈΠ΄ΠΎΠ² скриптов, Π² частности β€” скриптов голосований, Π±Ρ‹Π²Π°Π΅Ρ‚ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Π½ΠΈΡ… наглядный Π²Ρ‹Π²ΠΎΠ΄ Ρ‚Π΅Ρ… ΠΈΠ»ΠΈ ΠΈΠ½Ρ‹Ρ… статистичСских Π΄Π°Π½Π½Ρ‹Ρ… Π² Π²ΠΈΠ΄Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹.

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ «графичСский» Π²Ρ‹Π²ΠΎΠ΄ CGI-скрипта организуСтся ΠΏΡƒΡ‚Π΅ΠΌ формирования скриптом рисунка Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² Π²Π΅Π±-Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ (Ρ‡Π°Ρ‰Π΅ всСго GIF ΠΈΠ»ΠΈ PNG) ΠΈ вставки ссылки Π½Π° этот рисунок <IMG src=»…»> Π½Π° Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΡƒΡŽ HTML-страничку.

Однако написаниС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ΠΏΠΎ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ рисунков прСдставляСт Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ трудности, особСнно для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… программистов, Ρ‚.ΠΊ. это ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ Π»ΠΈΠ±ΠΎ доскональноС ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ довольно слоТных Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² графичСских Ρ„Π°ΠΉΠ»ΠΎΠ², Π»ΠΈΠ±ΠΎ использованиС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ, написанных Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ.

ВсС это ослоТняСтся Π΅Ρ‰Π΅ ΠΈ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ сТатия Π΄Π°Π½Π½Ρ‹Ρ… LZW, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π² GIF, являСтся Π² настоящСС врСмя ΠΏΠ°Ρ‚Π΅Π½Ρ‚ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ ΠΈ нСбСсплатным для использования. Π˜Π½Ρ‹ΠΌΠΈ словами, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Β«ΠΆΠ΅Π»Π΅Π·Π°Β» ΠΈ ПО, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π΄Π°Π½Π½Ρ‹ΠΉ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ ΠΏΠ°Ρ‚Π΅Π½Ρ‚Π½Ρ‹Π΅ отчислСния Ρ„ΠΈΡ€ΠΌΠ΅-Π΄Π΅Ρ€ΠΆΠ°Ρ‚Π΅Π»ΡŽ ΠΏΠ°Ρ‚Π΅Π½Ρ‚Π°. А ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ‚Π°ΠΊΠΎΠΉ порядок Π²Π΅Ρ‰Π΅ΠΉ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅ΠΏΡ€ΠΈΠ΅ΠΌΠ»Π΅ΠΌ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² бСсплатного ПО, Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Π΅ графичСскиС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π»ΠΈΠ±ΠΎ вовсС Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ GIF, Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ «нСсТатых» GIF-Ρ„Π°ΠΉΠ»ΠΎΠ².

Однако ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π»ΠΈ для Π²Ρ‹Π²ΠΎΠ΄Π° Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ Π½Π° HTML-страницС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Β«Π½Π°ΡΡ‚ΠΎΡΡ‰ΡƒΡŽΒ» Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ? НСт Π»ΠΈ Β«Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… способов»? И Π²ΠΎΠΎΠ±Ρ‰Π΅, являСтся Π»ΠΈ использованиС Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Π»ΡƒΡ‡ΡˆΠΈΠΌ ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΡƒΡ‚Π΅ΠΌ Π²Ρ‹Π²ΠΎΠ΄Π° Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ?

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ Β«Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ способ» Π²Ρ‹Π²ΠΎΠ΄Π° столбчатых (Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Ρ…) Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ, основанный Π½Π° HTML-Ρ‚Π°Π±Π»ΠΈΡ†Π°Ρ…. Π­Ρ‚ΠΎΡ‚ способ, ΠΏΠΎ ΠΌΠΎΠ΅ΠΌΡƒ мнСнию, отличаСтся ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ (Π° ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ β€” Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ) простотой Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ качСством Β«Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°Β».

Как извСстно, язык HTML позволяСт ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ практичСски всСми ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ Ρ‚Π°Π±Π»ΠΈΡ†. Π‘ΡƒΡ‚ΡŒ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΠΌΠΎΠΆΠ½ΠΎ Β«ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΒ» Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ Π²ΠΏΠΎΠ»Π½Π΅ приличная Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°.

НапримСр, Ρ‚Π°ΠΊ:

ΠŸΡ€ΠΈ этом Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Ρ†Π΅Π½ΠΎΠΉ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… усилий ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ΅ практичСски любой Π²ΠΈΠ΄ β€” ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π° столбцов (ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Π·Π°Π»ΠΈΡ‚ΡŒ ΠΈΡ… рисунком), ΠΈΡ… ΡˆΠΈΡ€ΠΈΠ½Ρƒ, расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ ΠΈ Ρ‚.Π΄. МоТно Π΄Π°ΠΆΠ΅ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π° столбцах тСкст. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ всС это дСлаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ лишь ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΈ содСрТимого ячССк Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΠΎΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π° вся «тСхничСская» Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΏΠΎ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Π½Π° экранС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° лоТится Π½Π° Β«ΠΏΠ»Π΅Ρ‡ΠΈΒ» Π±Ρ€ΠΎΡƒΠ·Π΅Ρ€Π°.

Выводимая Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ. Π”Π°Π»Π΅Π΅ ΠΌΡ‹ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ ΠΊΠ°ΠΊ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ простыС ΠΈ Π±ΠΎΠ»Π΅Π΅ наглядно ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠ΅ идСю.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ столбСц Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ прСдставлСн строкой Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρ‚ΠΎ Π΄Π°Π»Π΅Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ внСсти ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Ρ‹, столбСц Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ я Π±ΡƒΠ΄Ρƒ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ «столбСц», Π° столбСц Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ β€” «столбик». πŸ™‚

Π’Ρ‹Π²ΠΎΠ΄ CGI-скрипта, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ Ρ‚Π°ΠΊΡƒΡŽ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡƒ, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ вставлСн Π² страницу с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SSI ΠΈΠ»ΠΈ IFRAME. ΠŸΡ€ΠΈ этом Π½Π°Π΄ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°, вставлСнная Π½Π° страницу Ρ‡Π΅Ρ€Π΅Π· SSI, являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ самой страницы ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, сохраняСтся/отобраТаСтся/ΠΊΡΡˆΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ вмСстС с Π½Π΅ΠΉ. Π’ ΠΎΠ΄Π½ΠΈΡ… случаях это прСимущСство, Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… β€” нСдостаток. Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ нСдостатком этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° (Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ β€” Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ сущСствСнным) являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ рисунка, нСльзя ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° выглядСла ΠΊΠ°ΠΊ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°?

Π’ ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ΅ΠΌ случаС Π² качСствС Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с двумя ячСйками Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строкС. ΠŸΠ΅Ρ€Π²Π°Ρ ячСйка Π±ΡƒΠ΄Π΅Ρ‚ собствСнно столбиком Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ (ΠΎΠ½Π° Π²ΠΈΠ΄ΠΈΠΌΠ° ΠΈ отобраТаСтся Π½ΡƒΠΆΠ½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ΠΈΠ»ΠΈ background-ΠΎΠΌ), Π° вторая β€” нСвидимая. Как извСстно, Π±Ρ€ΠΎΡƒΠ·Π΅Ρ€ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ ячСйки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΅ΡΡ‚ΡŒ содСрТимоС (нСпустыС). ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ячСйку-«столбик», Π² Π½Π΅Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ, ΠΏΠΎ ΠΊΡ€Π°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅Ρ€Π΅, символ &nbsp;

ΠžΠ±Ρ‰Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° этих Π΄Π²ΡƒΡ… ячССк для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строки Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Π° (ΡˆΠΈΡ€ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹), Π° количСство строк соотвСтствуСт количСству столбиков Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ (числу ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ).

И Ρ‚ΡƒΡ‚ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ΡΡ наши ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Β«ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½Ρ‹Π΅ ΠΊΠ°ΠΌΠ½ΠΈΒ» Π½Π° свСтлом ΠΏΡƒΡ‚ΠΈ ΠΊ Π²Π΅Π»ΠΈΠΊΠΎΠΉ Ρ†Π΅Π»ΠΈ :-). Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π±Ρ€ΠΎΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ «просто Ρ‚Π°ΠΊΒ», Π±Π΅Π· ΡƒΡ…ΠΈΡ‰Ρ€Π΅Π½ΠΈΠΉ, ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строчкС значСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбцов Ρ€Π°Π·Π½Ρ‹Π΅! Для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΠΎΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±Ρ€ΠΎΡƒΠ·Π΅Ρ€ вычисляСт ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбцов (ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строки) ΠΈ высоты строк (ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ столбца).

Из этого полоТСния Π΅ΡΡ‚ΡŒ Π΄Π²Π° Π²Ρ‹Ρ…ΠΎΠ΄Π°:

  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ€Π°Π·Π½Ρ‹Ρ… столбиков Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, каТдая ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ строки.
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ объСдинСния ячССк: для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ячСйки HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ, Π½Π° сколько строк ΠΈ/ΠΈΠ»ΠΈ Π½Π° сколько столбцов ΠΎΠ½Π° «распространяСтся» (ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ rowspan ΠΈ colspan тэга <TD>соотвСтствСнно).

Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ случаС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбцов ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ разности ΠΌΠ΅ΠΆΠ΄Ρƒ сосСдними ΠΏΠΎ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΌΠΈ значСниями, Π° Π½ΡƒΠΆΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ячСйки-«столбика» Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строкС ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ «распространСниСм» ΠΏΠ΅Ρ€Π²ΠΎΠΉ ячСйки Π½Π° Π½ΡƒΠΆΠ½ΠΎΠ΅ количСство столбцов.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€: для отобраТСния Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ со столбиками 100, 300 ΠΈ 400 пиксСлСй Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с ΡˆΠΈΡ€ΠΈΠ½Π°ΠΌΠΈ столбцов 100, 200 ΠΈ 100. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ столбик Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ Β«Π·Π°ΠΉΠΌΠ΅Ρ‚Β» ΠΎΠ΄ΠΈΠ½ столбСц Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π²Ρ‚ΠΎΡ€ΠΎΠΉ β€” Π΄Π²Π° ΠΈ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ β€” Ρ‚Ρ€ΠΈ. БоотвСтствСнно, вторая, нСвидимая ячСйка Π·Π°ΠΉΠΌΠ΅Ρ‚ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ столбцов, сколько ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ.

БоотвСтствСнно, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΏΠΎ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Β«Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹-Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹Β» Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π² сСбя Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ сортировки ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΈ вычислСния Π½ΡƒΠΆΠ½Ρ‹Ρ… ΡˆΠΈΡ€ΠΈΠ½ столбцов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ рассмотрим практичСский ΠΏΡ€ΠΈΠΌΠ΅Ρ€ скрипта для Β«Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎΒ» Π²Ρ‹Π²ΠΎΠ΄Π° Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹.

#!/usr/bin/perl

#Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ для Π²Ρ‹Π²ΠΎΠ΄Π° Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹
#массив $data - Π΄Π°Π½Π½Ρ‹Π΅ для Π²Ρ‹Π²ΠΎΠ΄Π° (ΡƒΠΆΠ΅ Π² пиксСлях).
#$val - количСство Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΡ‹Ρ… столбцов (соотв количСству элСмСнтов $data).

$data[1]=200; $color[1]="#FF0000";
$data[2]=100; $color[2]="#00FF00";
$data[3]=150; $color[3]="#0000FF";
$data[4]=400; $color[4]="#00FFFF";
$data[5]=500; $color[5]="#FF00FF";
$data[6]=600; $color[6]="#FFFF00";
$val=6;

#НиТС располоТСн ΠΊΠΎΠ΄ сортировки Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΡ‹Ρ… Π½Π° Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ
#Π’ процСссС Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π½Π° основС массива @data создаСтся отсортированный
#массив @stp ΠΈ Ρ…ΡΡˆ %lvl с количСством столбцов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ
#столбика Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹

$rows=1;
$stp[0]=0;
$stp[1]=$data[1];
$lvl{$data[1]}=1;
$i=2;

while($i<=$val){

$p=0; $x=1;

while($x<=$rows && $p==0)
{
if ($data[$i]==$stp[$x]){$p=1;$lvl{$data[$i]}=$x;goto a1;};

if ($data[$i]<$stp[$x]){
#Вставка Π½ΠΎΠ²ΠΎΠ³ΠΎ значСния "Π² сСрСдину" массива @stp
for ($y=$rows+1;$y>=$x;$y=$y-1){$stp[$y+1]=$stp[$y];};
$stp[$x]=$data[$i];
#ΠšΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌ Ρ…ΡΡˆ %lvl с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ "сдвига" @stp
foreach $itm(keys %lvl){if ($lvl{$itm}>=$x){$lvl{$itm}=$lvl{$itm}+1;};};
$lvl{$data[$i]}=$x;
$rows=$rows+1;
$p=1;
};

$x++;
};

if ($p==0){$rows=$rows+1;$stp[$rows]=$data[$i]; $lvl{$data[$i]}=$rows};


$i++;
};

#А здСсь ΠΌΡ‹, собствСнно, Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ

print "Content-Type: text/htmlnn";
print "<TABLE border=0>n<TR>";

#Π’Ρ‹Π²ΠΎΠ΄ΠΈΠΌ ΠΏΠ΅Ρ€Π²ΡƒΡŽ строку Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π·Π°Π΄Π°ΡŽΡ‰ΡƒΡŽ Π±Ρ€ΠΎΡƒΠ·Π΅Ρ€Ρƒ Π½ΡƒΠΆΠ½Ρ‹Π΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ячССк
#Она Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ, Ρ‚.ΠΊ. ячСйки пустыС
for ($k=1;$k<=$rows;$k=$k+1){
$w=$stp[$k]-$stp[$k-1];
print "<TD width=$w></TD>";
};
print "</TR>n";

#Π’Ρ‹Π²ΠΎΠ΄ΠΈΠΌ строки, содСрТащиС Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡƒ
for ($v=1;$v<=$val;$v=$v+1){
$tl=$lvl{$data[$v]};
$rst=$rows-$tl;
print "<TR>";
#Если видимая ячСйка Π΅ΡΡ‚ΡŒ (Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ 0: $tl>0),
#Ρ‚ΠΎ Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌ Π΅Π΅:
if ($tl>0)
{print "<TD bgcolor=$color[$v] colspan=$tl> </TD>";};

#Если нСвидимая ячСйка Π΅ΡΡ‚ΡŒ (Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π΅ Ρ€Π°Π²Π½ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ),
#Ρ‚ΠΎ Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌ Π΅Π΅:
if ($rst>0)
{print "<TD colspan=$rst></TD>";};

print "</TR>n";
};
print "</TR></TABLE>";

Π’.ΠΊ. ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ здСсь ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ Π² качСствС исходных Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡƒΠΆΠ΅ Β«Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅Β» значСния Π² пиксСлах (Π° Π½Π΅ собствСнно Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρ‹ Π² ΠΈΡ… исходном Π²ΠΈΠ΄Π΅), Ρ‚ΠΎ ΠΏΠ΅Ρ€Π΅Π΄ Π΅Π³ΠΎ использованиСм Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρ‹ (скаТСм, ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹) Π² количСства пиксСлСй с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹.

Допустим, Π½Π°ΠΌ Π½Π°Π΄ΠΎ вывСсти Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ голосования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ΡΡ Π² ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… $za, $prot, $vozd Π² значСниях ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ².

$width=400; #ЖСлаСмая ΡˆΠΈΡ€ΠΈΠ½Π° Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹

$data[1]=($za/100)*$width;
$data[2]=($prot/100)*$width;
$data[3]=($vozd/100)*$width;
$val=3;

Π’ рядС случаСв Π’Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ явно Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ столбиков Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹, Ρ‚.Π΅. высоту строк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. И здСсь Π’Π°ΠΌ встрСтится Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Β«ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½Ρ‹ΠΉ камСнь» Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ width ΠΈ height тэга <TD> Π·Π°Π΄Π°ΡŽΡ‚ Π½Π΅ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹Π΅, Π° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ значСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты ячСйки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π’.Π΅. Ссли Β«ΠΏΠΎ содСрТимому» ячСйка мСньшС, Ρ‡Π΅ΠΌ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… width ΠΈ height, Ρ‚ΠΎ ΠΎΠ½Π° «растягиваСтся» Π΄ΠΎ Π½ΡƒΠΆΠ½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ².

Наш ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ Π·Π°Π΄Π°Π΅Ρ‚ Π² тэгах <TD> ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ height, поэтому высота ячССк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ опрСдСляСтся Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ «написан» символ &nbsp; Π² Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ячСйкС (нСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ это символ ΠΏΡ€ΠΎΠ±Π΅Π»Π°, ΠΎΠ½, ΠΊΠ°ΠΊ ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ символ, ΠΈΠΌΠ΅Π΅Ρ‚ свою высоту) ΠΈ отступом ΠΌΠ΅ΠΆΠ΄Ρƒ Β«Π°Π±Π·Π°Ρ†Π΅ΠΌΒ» ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌΠΈ ячСйки. БоотвСтствСнно, Ссли Π½Π΅ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΌΠ΅Ρ€, Ρ‚ΠΎ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… страницах ΠΈ Ρƒ Ρ€Π°Π·Π½Ρ‹Ρ… посСтитСлСй Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ нСсколько ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ.

Β«ΠžΠ±Ρ‰ΠΈΠΌ Π²ΠΈΠ΄ΠΎΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΒ» этой Π·Π°Π΄Π°Ρ‡ΠΈ являСтся минимизация собствСнной высоты ячСйки ΠΈ Π·Π°Π΄Π°Π½ΠΈΠ΅ Π΅Π΅ высоты с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° height тэга <TD>.

Π‘Π°ΠΌΡ‹ΠΌ Β«Ρ€Π°Π΄ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΒ» способом ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ высоты являСтся ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π² Π²ΠΈΠ΄ΠΈΠΌΡƒΡŽ ячСйку вмСсто & нСтСкстового содСрТимого, скаТСм, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 1Γ—1 пиксСль:

<IMG width=1 height=1 src="trans.gif">

Π° Π² trans.gif ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² 1 пиксСль.

Π’ΠΎΠ³Π΄Π° «собствСнная» высота ячССк получится ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ°Π»Π° (нСсколько пиксСлСй) ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ height ΠΈ Π’Ρ‹ смоТСтС ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ высоту ячССк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹-Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹, Π° ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΈ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ столбиков.

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ способ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Β«ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽΒ» высоту ячССк β€” максимально ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π² Β«Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉΒ» ячСйкС.

www.internet-technologies.ru

20 ΠΌΠ°Π½ΡƒΠ°Π»ΠΎΠ² ΠΏΠΎ созданию Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML5 ΠΈ CSS3 | DesigNonstop

20 ΠΌΠ°Π½ΡƒΠ°Π»ΠΎΠ² ΠΏΠΎ созданию Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML5 ΠΈ CSS3

2

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΡƒΡŽ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ ΠΌΠ°Π½ΡƒΠ°Π»ΠΎΠ² ΠΏΠΎ HTML5 ΠΈ CSS3, которая сСгодня посвящСна ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π³Ρ€Π°Ρ„ΠΈΠΊΠ°ΠΌ ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°ΠΌ. НаглядноС прСдставлСниС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ, Π»Π΅Π³Ρ‡Π΅ воспринимаСтся Π·Ρ€ΠΈΡ‚Π΅Π»Π΅ΠΌ Π² ΠΏΠ»Π°Π½Π΅ усвоСния ΠΈ восприятия. Π“Ρ€Π°Ρ„ΠΈΠΊΠΈ Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ гистограмма Π° Π²ΠΈΠ΄Π΅ Ρ†Π²Π΅Ρ‚Π½Ρ‹Ρ… полосок Π·Π° значСниями Π½Π° шкалС ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚. Или круговая Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° с полями, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ значСниям ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ…. Или это просто Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹ΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊ ΠΈ эффСктным Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΌ эффСктом. Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠ΅ Ρ€Π°Π΄ΡƒΠ΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ Π²Ρ‹Π±ΠΎΡ€Π°.

1. Pure Css Data Chart

2. CSS3 Charts

3. CSS3 Bar Graphs

4. Pie Charts with CSS3

5. Snazzy Animated Pie Chart

6. CSS3 Graph Animation

7. CSS bar charts

8. Creating a graph

9. Accessible Data Visualization

10. Wicked CSS3 3d bar chart

11. Vertical Bar Graphs

12. Flexible bar graphs

13. CSS Stacked Bar Graphs

14. CSS Vertical Bar Graphs

15. Pie Charts with CSS3

16. Bar Graph

17. Javascript Chart Plotting

18. Bar Chart

19. Accessible bar chart

20. CSS3 Charts example β€” ΡƒΡ€ΠΎΠΊ ΡƒΠ΄Π°Π»Π΅Π½ Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ

ΠžΡ†Π΅Π½ΠΈΡ‚Π΅, поТалуйста, ΡΡ‚Π°Ρ‚ΡŒΡŽ!
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, Π² срСднСм: 5 ΠΈΠ· 5)

www.designonstop.com

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

ΠŸΡ€ΠΎΡΡ‚Π°Ρ Π² установкС ΠΈ настройкС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ. ΠŸΡ€ΠΎΡΡ‚ΠΎ взяли ΠΈ установили.

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

beloweb.ru

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

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