ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ β 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)
ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° ΠΌΡΡΠΈ
ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π Π΅Π³ΡΠ»ΠΈΡΡΠ΅ΠΌΡΠΉ ΠΏΠ΅ΡΠΈΠΎΠ΄ ΡΡΡΠ΅Π΄Π½Π΅Π½ΠΈΡ
http://dygraphs.com/
3. Highcharts β ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ JavaScript Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°
ΠΠ΅ΠΌΠΎ Π‘ΠΊΠ°ΡΠ°ΡΡ
Highcharts ΡΠ²Π»ΡΠ΅ΡΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΎΠΉ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠΉΠΊΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² , Π½Π°ΠΏΠΈΡΠ°Π½Π½Π°Ρ Π½Π° ΡΠΈΡΡΠΎΠΌ JavaScript, ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π΄Π»Ρ Π²Π°ΡΠ΅Π³ΠΎ Π²Π΅Π±-ΡΠ°ΠΉΡΠ° ΠΈΠ»ΠΈ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. Highcharts Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π»ΠΈΠ½ΠΈΠΈ, ΡΠΏΠ»Π°ΠΉΠ½Ρ, ΠΎΠ±Π»Π°ΡΡΠΈ, areaspline, ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π±Π°Ρ, ΠΏΠΈΡΠΎΠ³, ΡΠ°Π·Π±ΡΠΎΡ, ΡΠ³Π»ΠΎΠ²ΡΠ΅ Π΄Π°ΡΡΠΈΠΊΠΈ, arearange, areasplinerange, columnrange ΠΈ ΠΏΠΎΠ»ΡΡΠ½ΡΠ΅ ΡΠΈΠΏΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
http://www.highcharts.com/
4. JQuery Ρ ΡΡΡΠ΅ΠΊΡΠΎΠΌ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠ° ΠΌΡΡΠΈ
ΠΠ΅ΠΌΠΎ Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ PNG ΠΈΠ»ΠΈ JPG ΡΠΏΡΠ°ΠΉΡΡ.
ΠΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΠΎΠ±ΡΡΠΈΡ ΡΠ΅Π½ΡΠΎΡΠ°, ΠΊΠΎΠ»Π΅ΡΠΈΠΊΠ° ΠΌΡΡΠΈ, ΠΈ ΠΊΠ»Π°Π²ΠΈΠ°ΡΡΡΡ.
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 β ΡΠ²Π΅ΡΠ»ΡΠΉ ΠΈ ΡΠ΅ΠΌΠ½ΡΠΉ ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ ΠΊΠ°ΠΊ Π΅ΡΡΡ, ΠΈΠ»ΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ»ΡΠΆΠΈΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΎΡΠΏΡΠ°Π²Π½ΠΎΠΉ ΡΠΎΡΠΊΠΈ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ ΠΈ Π³ΡΠ°ΡΠΈΠΊΠΎΠ².
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, Π³ΡΠ°Ρ, Π³ΡΠ°ΡΠΈΠΊ, Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°
ΠΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° Π½Π° CSS ΠΈ HTML / Habr
:hover
Π ΠΎΡΠ΅ΡΠ΅Π΄Π½ΠΎΠΉ ΡΠ°Π· ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Ρ ΠΏΠ»Π°Π³ΠΈΠ½Ρ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΎΠΊ, Π½Π°ΡΠΊΠ½ΡΠ»ΡΡ Π½Π° Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΠΎΡΡ.
ΠΠΈΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΡ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ ΠΈ ΡΠ²Π΅ΡΡ ΡΠ΅ΠΊΡΠ΅ΡΠ½ΠΎΠ³ΠΎ Π² ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π½Π΅ Π±ΡΠ»ΠΎ, Π½ΠΎ ΠΎΠ½Π° ΠΌΠ½Π΅ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ»Π°ΡΡ ΡΠ²ΠΎΠ΅ΠΉ ΠΏΡΠΎΡΡΠΎΡΠΎΠΉ ΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠ΅ΠΌ javascriptβa.
ΠΠ±ΠΌΠΎΠ·Π³ΠΎΠ²Π°Π² Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅, ΡΠ΅ΡΠΈΠ» ΡΡΠΎ Π½Π° ΡΠ°ΠΌΠΎΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ΅ ΡΠΎΠΆΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ, Π½Π° ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°Ρ Π²ΡΠΎΡΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ, ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ 3Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ ΠΈ Ρ.Π΄. ΠΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ Π±Π»ΠΎΠΊ-ΡΡ Π΅ΠΌΡ!

Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ
ΠΠ·ΡΠ² Π·Π° ΠΎΡΠ½ΠΎΠ²Ρ Π±Π»ΠΎΠΊ-ΡΡ Π΅ΠΌΡ Π΄Π»Ρ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ (ΠΏΡΠΎΡΡ ΠΏΡΠΎΡΠ΅Π½ΠΈΡ, Π³Π΄Π΅ ΠΏΠΎΠΏΠ°Π»Π°ΡΡ ΠΌΠ½Π΅ ΡΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°, Ρ ΡΠΆΠ΅ Π½Π΅ ΠΏΠΎΠΌΠ½Ρ):

ΡΠ΅ΡΠΈΠ» ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ ΡΡΡΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΏΠΎ ΡΡΠΎΠΉ ΡΡΡΠ»ΠΊΠ΅.
Π‘ΠΊΡΠΈΠ½ΡΠΎΡ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΠΎΠΌΡ Π»Π΅Π½Ρ ΠΊΠ»ΠΈΠΊΠ°ΡΡ:

Π’Π΅ΠΏΠ΅ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎ ΠΊΠΎΠ΄Π΅
HTML
Π‘ΡΡΡΠΊΡΡΡΠ½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΡ span Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ Π²Π½ΡΡΡΠΈ. ΠΠ½ΡΡΡΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π΄Π²Π° Π±Π»ΠΎΠΊΠ° a ΠΏΠΎΡΠ»Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΠΊΠΎΡΠΎΡΡΡ Π½ΠΎΠ²ΡΠΉ span, ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ, Π½ΠΎΠ²Π°Ρ ΡΡΡΡΠΊΡΡΡΠ½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ°.
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-ΠΎΠΌ), Π° Π²ΡΠΎΡΠ°Ρ β Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠ°Ρ. ΠΠ°ΠΊ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ, Π±ΡΠΎΡΠ·Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ ΡΡΠ΅ΠΉΠΊΠΈ ΡΠ°Π±Π»ΠΈΡΡ, Ρ ΠΊΠΎΡΠΎΡΡΡ Π΅ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ (Π½Π΅ΠΏΡΡΡΡΠ΅). ΠΠΎΡΡΠΎΠΌΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΏΠ΅ΡΠ²ΡΡ ΡΡΠ΅ΠΉΠΊΡ-Β«ΡΡΠΎΠ»Π±ΠΈΠΊΒ», Π² Π½Π΅Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ, ΠΏΠΎ ΠΊΡΠ°ΠΉΠ½Π΅ΠΉ ΠΌΠ΅ΡΠ΅, ΡΠΈΠΌΠ²ΠΎΠ»
ΠΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° ΡΡΠΈΡ Π΄Π²ΡΡ ΡΡΠ΅Π΅ΠΊ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Π° (ΡΠΈΡΠΈΠ½Π° ΡΠ°Π±Π»ΠΈΡΡ), Π° ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΡΡΠΎΠΊ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΡΡΠΎΠ»Π±ΠΈΠΊΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ (ΡΠΈΡΠ»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ).
Π ΡΡΡ Π½Π°ΡΠΈΠ½Π°ΡΡΡΡ Π½Π°ΡΠΈ ΠΏΠ΅ΡΠ²ΡΠ΅ Β«ΠΏΠΎΠ΄Π²ΠΎΠ΄Π½ΡΠ΅ ΠΊΠ°ΠΌΠ½ΠΈΒ» Π½Π° ΡΠ²Π΅ΡΠ»ΠΎΠΌ ΠΏΡΡΠΈ ΠΊ Π²Π΅Π»ΠΈΠΊΠΎΠΉ ΡΠ΅Π»ΠΈ :-). ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Π±ΡΠΎΡΠ·Π΅Ρ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Β«ΠΏΡΠΎΡΡΠΎ ΡΠ°ΠΊΒ», Π±Π΅Π· ΡΡ ΠΈΡΡΠ΅Π½ΠΈΠΉ, ΠΏΠΎΡΡΡΠΎΠΈΡΡ ΡΠ°Π±Π»ΠΈΡΡ, Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠΎΡΠΊΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ°Π·Π½ΡΠ΅! ΠΠ»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π²ΡΠ²ΠΎΠ΄ΠΈΠΌΠΎΠΉ ΡΠ°Π±Π»ΠΈΡΡ Π±ΡΠΎΡΠ·Π΅Ρ Π²ΡΡΠΈΡΠ»ΡΠ΅Ρ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² (ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ) ΠΈ Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊ (ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ°).
ΠΠ· ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π΅ΡΡΡ Π΄Π²Π° Π²ΡΡ ΠΎΠ΄Π°:
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΡΡΠΎΠ»Π±ΠΈΠΊΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ, ΠΊΠ°ΠΆΠ΄Π°Ρ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ.
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ ΡΡΠ΅Π΅ΠΊ: Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΠ΅ΠΉΠΊΠΈ 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, ΠΏΠΎΡΡΠΎΠΌΡ Π²ΡΡΠΎΡΠ° ΡΡΠ΅Π΅ΠΊ ΡΠ°Π±Π»ΠΈΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌΠΈ ΡΡΠΈΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΌ Β«Π½Π°ΠΏΠΈΡΠ°Π½Β» ΡΠΈΠΌΠ²ΠΎΠ» Π² Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΡΡΠ΅ΠΉΠΊΠ΅ (Π½Π΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΡΠΎ ΡΠΈΠΌΠ²ΠΎΠ» ΠΏΡΠΎΠ±Π΅Π»Π°, ΠΎΠ½, ΠΊΠ°ΠΊ ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ ΡΠΈΠΌΠ²ΠΎΠ», ΠΈΠΌΠ΅Π΅Ρ ΡΠ²ΠΎΡ Π²ΡΡΠΎΡΡ) ΠΈ ΠΎΡΡΡΡΠΏΠΎΠΌ ΠΌΠ΅ΠΆΠ΄Ρ Β«Π°Π±Π·Π°ΡΠ΅ΠΌΒ» ΠΈ Π³ΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ ΡΡΠ΅ΠΉΠΊΠΈ. Π‘ΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ, Π΅ΡΠ»ΠΈ Π½Π΅ ΠΏΡΠΈΠ½ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΌΠ΅Ρ, ΡΠΎ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ ΠΈ Ρ ΡΠ°Π·Π½ΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ.
Β«ΠΠ±ΡΠΈΠΌ Π²ΠΈΠ΄ΠΎΠΌ ΡΠ΅ΡΠ΅Π½ΠΈΡΒ» ΡΡΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π²ΡΡΠΎΡΡ ΡΡΠ΅ΠΉΠΊΠΈ ΠΈ Π·Π°Π΄Π°Π½ΠΈΠ΅ Π΅Π΅ Π²ΡΡΠΎΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ° 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 β ΡΡΠΎΠΊ ΡΠ΄Π°Π»Π΅Π½ Π°Π²ΡΠΎΡΠΎΠΌ
- 5
- 4
- 3
- 2
- 1
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