ΠΠΎΠ±ΡΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°ΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ChartMaster! ChartMaster - ΡΡΠΎ ΠΌΠΎΡΠ½Π°Ρ ΠΈ Π³ΠΈΠ±ΠΊΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π²Π°ΠΌ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π°Π½Π°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π΄Π°Π½Π½ΡΠ΅ Ρ Π»Π΅Π³ΠΊΠΎΡΡΡΡ.
ΠΡΠ° Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡ Π²Π°ΠΌ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ ChartMaster, Π²ΠΊΠ»ΡΡΠ°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ, ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΊΠΎΠ½ΡΠ΅ΠΏΡΠΈΠΈ, API-ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΡ ΠΈ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ. ΠΠ΄Π΅ΡΡ Π²Ρ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π²ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, ΡΡΠΎΠ±Ρ Π½Π°ΡΠ°ΡΡ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΠ΅ ΠΈ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ²Π½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Π΄Π»Ρ Π²Π°ΡΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ².
ChartMaster ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΌΠΎΡΠ½ΡΠΉ Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΈΠΏΠΎΠ² Π³ΡΠ°ΡΠΈΠΊΠΎΠ², Π²ΠΊΠ»ΡΡΠ°Ρ ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΡΡΠΎΠ»Π±ΡΠ°ΡΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ, ΡΠ°Π΄Π°ΡΠ½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅. ΠΡ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ Π΄Π°Π½Π½ΡΠ΅ Π² ΡΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΈ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΠΉ ΡΠΎΡΠΌΠ΅, ΡΠΎΠ·Π΄Π°Π²Π°Ρ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΈ Ρ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌΠΈ ΡΡΠΈΠ»ΠΈΡΠΌΠΈ.
ΠΡΡΠ³ΠΎΠ²Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° - ΡΡΠΎ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΊΡΡΠ³Π°, ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π½Π° ΡΠ΅ΠΊΡΠΎΡΡ, ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π°Π½Π½ΡΡ . Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ ChartMaster Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΡΡΠ³ΠΎΠ²ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΈ ΠΏΠΎΠ½ΡΡΠ½ΠΎΠ³ΠΎ API.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π²Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄ createChart
ΠΊΠ»Π°ΡΡΠ° ChartMaster
Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠΏΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ 'pie'
. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°:
const pieChart = ChartMaster.createChart('pie', {
element: document.querySelector('#chart1'),
data: [
{ label: 'Category A', value: 60, color: '#FF6384' },
{ label: 'Category B', value: 25, color: '#36A2EB' },
{ label: 'Category C', value: 65, color: '#FFCE56' },
{ label: 'Category D', value: 15, color: '#1c781c' }
],
options: {}
})
ΠΡΡΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΡΠΉ ΠΊΠΎΠ΄ ΡΠΎΠ·Π΄Π°ΡΡ ΠΊΡΡΠ³ΠΎΠ²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈ ΠΏΡΠΈΠ²ΡΠΆΠ΅Ρ Π΅Π΅ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ chart1
Π² Π²Π°ΡΠ΅ΠΌ DOM-Π΄Π΅ΡΠ΅Π²Π΅. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π΄Π°Π½Π½ΡΡ
ΡΠΊΠ°Π·Π°Π½ ΠΌΠ°ΡΡΠΈΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ², ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΠΎΠ»Ρ:
element
: HTMLElement, Π² ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΡΡΡ canvas, Π»Π΅Π³Π΅Π½Π΄Π°, ΠΌΠ΅ΡΠΊΠΈ ΠΈ Π΄Ρ.
label
: ΡΡΡΠΎΠΊΠ°, Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ
value
: ΡΠΈΡΠ»ΠΎ, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅
color
: ΡΡΡΠΎΠΊΠ°, ΡΠ²Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΠ΅ΠΊΡΠΎΡΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ HEX, RGB, RGBA
borderWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ΅ΠΊΡΠΎΡΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 0.
borderColor
: Π¦Π²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ΅ΠΊΡΠΎΡΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#000000' (ΡΠ΅ΡΠ½ΡΠΉ).
padding
: ΠΡΡΡΡΠΏ ΠΏΠΎ ΠΊΡΠ°ΡΠΌ canvas. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 0.
legend
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π»Π΅Π³Π΅Π½Π΄Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
lightenValue
: ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ΅Π΅ Π½Π°ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΎΡΠ²Π΅ΡΠ»ΠΈΡΡ ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΡΠΎΡΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 50.
tooltip
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠ΅ΠΊΡΠΎΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
labels
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΌΠ΅ΡΠΊΠΈ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ Π½Π° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: false.
interaction
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΎ Π»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠΎΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠ±ΡΡΠΈΡ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΡ). ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
colorTransitionTimingFunction
: Π€ΡΠ½ΠΊΡΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΡΠ²Π΅ΡΠΎΠ² ΡΠ΅ΠΊΡΠΎΡΠΎΠ². ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: easeInOutQuart
, ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΡΡΠ°Ρ ΠΏΠ»Π°Π²Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄.
colorTransitionTimingFunction: function (progress) {
return progress < 0.5 ? 2 * progress * progress : 1 - Math.pow(-2 * progress + 2, 2) / 2
},
colorTransitionDuration
: ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΡΠ²Π΅ΡΠΎΠ² ΡΠ΅ΠΊΡΠΎΡΠΎΠ² Π² ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ
. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 200.
onSegmentHover
: Π€ΡΠ½ΠΊΡΠΈΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π°, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠ΅ΠΊΡΠΎΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ ΡΠ²ΠΎΡ Π»ΠΎΠ³ΠΈΠΊΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΡΠ΅ΠΊΡΠΎΡΠ°ΠΌΠΈ.
Π‘ΡΠΎΠ»Π±ΡΠ°ΡΠ°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠΉ Π²ΡΡΠΎΡΡ. ΠΠ°ΠΆΠ΄ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ Π΅Π΅ ΡΠΈΡΠ»ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ»Π±ΡΠ°ΡΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
const barChart = ChartMaster.createChart('bar', {
element: document.querySelector('#chart2'),
data: [
{ label: 'Category A', value: 60 },
{ label: 'Category B', value: 25 },
{ label: 'Category C', value: -65 },
{ label: 'Category D', value: 15 }
],
options: {}
})
element
: ΠΠ»Π΅ΠΌΠ΅Π½Ρ DOM-Π΄Π΅ΡΠ΅Π²Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ±ΡΠ°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΡΠΊΠ°Π·Π°Π² Π΅Π³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ document.querySelector.
data
: ΠΠ°ΡΡΠΈΠ² ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ², ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡΠΈΡ
Π΄Π°Π½Π½ΡΠ΅ Π΄Π»Ρ ΡΡΠΎΠ»Π±ΡΠ°ΡΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠ°ΠΆΠ΄ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° label
(Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ) ΠΈ value
(ΡΠΈΡΠ»ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ).
options
: ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΎΠΏΡΠΈΠΈ Π΄Π»Ρ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ ΡΡΠΎΠ»Π±ΡΠ°ΡΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
gridYColor
: Π¦Π²Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΡΠ΅ΡΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#d4d4d4'.
gridXColor
: Π¦Π²Π΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΡΠ΅ΡΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#d4d4d4'.
gridYWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΡΠ΅ΡΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
gridXWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΡΠ΅ΡΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
barColor
: Π¦Π²Π΅Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#29c5f6'.
barBorderColor
: Π¦Π²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#000000'.
barBorderWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 0.
barWidth
: Π¨ΠΈΡΠΈΠ½Π° ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 50.
barSpacing
: Π Π°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 30.
barBorderRadius
: Π Π°Π΄ΠΈΡΡ ΡΠΊΡΡΠ³Π»Π΅Π½ΠΈΡ ΡΠ³Π»ΠΎΠ² ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 0.
yAxisSplitNumber
: ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π½Π° ΠΎΡΠΈ Y. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 10.
paddingTop
: ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ
Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 2.
paddingBottom
: ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ ΡΠ½ΠΈΠ·Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 2.
legend
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π»Π΅Π³Π΅Π½Π΄Ρ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
labelsX
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΌΠ΅ΡΠΊΠΈ ΠΏΠΎ ΠΎΡΠΈ X. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
labelsY
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΌΠ΅ΡΠΊΠΈ ΠΏΠΎ ΠΎΡΠΈ Y. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
gridX
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ ΡΠ΅ΡΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
gridY
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ ΡΠ΅ΡΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
interaction
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΎ Π»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠΎΠΉ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅, ΡΠ΅Π»ΡΠΎΠΊ). ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
lightenValue
: ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΎΡΠ²Π΅ΡΠ»Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΡΠΎΠ»Π±Π΅Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 50.
tooltip
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΡΠΎΠ»Π±Π΅Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
colorTransitionTimingFunction
: Π€ΡΠ½ΠΊΡΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΡΠ²Π΅ΡΠΎΠ². ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: easeInOutQuart
.
colorTransitionDuration
: ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΡΠ²Π΅ΡΠΎΠ² Π² ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄Π°Ρ
. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 200.
onBarHover
: Π€ΡΠ½ΠΊΡΠΈΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π°, ΠΊΠΎΡΠΎΡΠ°Ρ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΡΠΎΠ»Π±Π΅Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
ΠΠΈΠ½Π΅ΠΉΠ½Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Π΄Π°Π½Π½ΡΡ , Π³Π΄Π΅ ΡΠΎΡΠΊΠΈ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡΡΡΡ Π»ΠΈΠ½ΠΈΡΠΌΠΈ. ΠΠ½Π° ΡΠΈΡΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΏΠΎ ΠΎΡΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠΌ ΡΠΈΡΠ»ΠΎΠ²ΡΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌ.
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΌΠ΅ΡΠΎΠ΄ createChart
ΠΊΠ»Π°ΡΡΠ° ChartMaster
Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠΏΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ 'line'
. ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΠ΅Ρ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ:
const lineChart = ChartMaster.createChart('line', {
element: document.querySelector('#chart3'),
data: [10, 5, 0, 90, 30, -10, 10],
options: {}
})
Π Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° DOM, Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ document.querySelector('#chart3')
. ΠΠ°Π½Π½ΡΠ΅ Π΄Π»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ Π² ΠΌΠ°ΡΡΠΈΠ²Π΅ data
. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΌΡ Π·Π°Π΄Π°Π»ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ [10, 5, 0, 90, 30, -10, 10]
. ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΎΠΏΡΠΈΠΈ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ, ΠΏΠ΅ΡΠ΅Π΄Π°Π² ΠΈΡ
Π² ΠΎΠ±ΡΠ΅ΠΊΡ options
.
padding
: ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ Π²ΠΎΠΊΡΡΠ³ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 5.
axisYColor
: Π¦Π²Π΅Ρ ΠΎΡΠΈ Y. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#000000'.
axisYTickLength
: ΠΠ»ΠΈΠ½Π° Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π½Π° ΠΎΡΠΈ Y. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 5.
axisYTickWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π½Π° ΠΎΡΠΈ Y. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
axisYTickColor
: Π¦Π²Π΅Ρ Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π½Π° ΠΎΡΠΈ Y. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#000000'.
axisYWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° ΠΎΡΠΈ Y. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
axisXColor
: Π¦Π²Π΅Ρ ΠΎΡΠΈ X. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#000000'.
axisXWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° ΠΎΡΠΈ X. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
axisXTickLength
: ΠΠ»ΠΈΠ½Π° Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π½Π° ΠΎΡΠΈ X. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 5.
axisXTickColor
: Π¦Π²Π΅Ρ Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π½Π° ΠΎΡΠΈ X. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#000000'.
axisXTickWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π½Π° ΠΎΡΠΈ X. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
gridYColor
: Π¦Π²Π΅Ρ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ
Π»ΠΈΠ½ΠΈΠΉ ΡΠ΅ΡΠΊΠΈ ΠΏΠΎ ΠΎΡΠΈ Y. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#e0e0e0'.
gridYWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ
Π»ΠΈΠ½ΠΈΠΉ ΡΠ΅ΡΠΊΠΈ ΠΏΠΎ ΠΎΡΠΈ Y. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
gridXColor
: Π¦Π²Π΅Ρ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ
Π»ΠΈΠ½ΠΈΠΉ ΡΠ΅ΡΠΊΠΈ ΠΏΠΎ ΠΎΡΠΈ X. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#e0e0e0'.
gridXWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΡ
Π»ΠΈΠ½ΠΈΠΉ ΡΠ΅ΡΠΊΠΈ ΠΏΠΎ ΠΎΡΠΈ X. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
line
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΡΠΈΡΠΎΠ²Π°ΡΡ Π»ΠΈΠ½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
lineColor
: Π¦Π²Π΅Ρ Π»ΠΈΠ½ΠΈΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#ff0000'.
lineWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π»ΠΈΠ½ΠΈΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
interpolation
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ½ΡΠ΅ΡΠΏΠΎΠ»ΡΡΠΈΡ Π΄Π»Ρ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΡΠΎΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΡ ΡΠΎΡΠ΅ΠΊ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
tensionCoeff
: ΠΠΎΡΡΡΠΈΡΠΈΠ΅Π½Ρ Π½Π°ΡΡΠΆΠ΅Π½ΠΈΡ Π»ΠΈΠ½ΠΈΠΈ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈΠ½ΡΠ΅ΡΠΏΠΎΠ»ΡΡΠΈΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
yAxisSplitNumber
: ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π΄Π΅Π»Π΅Π½ΠΈΠΉ Π½Π° ΠΎΡΠΈ Y. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 5.
labelsX
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΌΠ΅ΡΠΊΠΈ ΠΏΠΎ ΠΎΡΠΈ X. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
labelsY
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΌΠ΅ΡΠΊΠΈ ΠΏΠΎ ΠΎΡΠΈ Y. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
gridX
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ΅ΡΠΊΡ ΠΏΠΎ ΠΎΡΠΈ X. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
gridY
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠ΅ΡΠΊΡ ΠΏΠΎ ΠΎΡΠΈ Y. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
tooltip
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
dots
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΡΠΊΠΈ Π½Π° Π»ΠΈΠ½ΠΈΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: false.
dotColor
: Π¦Π²Π΅Ρ ΡΠΎΡΠ΅ΠΊ Π½Π° Π»ΠΈΠ½ΠΈΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#ffffff'.
dotRadius
: Π Π°Π΄ΠΈΡΡ ΡΠΎΡΠ΅ΠΊ Π½Π° Π»ΠΈΠ½ΠΈΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 3.
dotBorderWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠΎΡΠ΅ΠΊ Π½Π° Π»ΠΈΠ½ΠΈΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 2.
dotBorderColor
: Π¦Π²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΡΠΎΡΠ΅ΠΊ Π½Π° Π»ΠΈΠ½ΠΈΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#000000'.
iteraction
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ Π²ΠΊΠ»ΡΡΠΈΡΡ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠΎΠΉ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
iteractionAdditionalRadius
: ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ°Π΄ΠΈΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΎΠ±Π»Π°ΡΡΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΡΠΎΡΠΊΠ°ΠΌΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 4.
tooltipLabel
: Π’Π΅ΠΊΡΡ Π΄Π»Ρ ΠΌΠ΅ΡΠΊΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠ΅ΠΉ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: ''.
colorTransitionTimingFunction
: Π€ΡΠ½ΠΊΡΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΡΠ²Π΅ΡΠΎΠ². ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: easeInOutQuart
.
onDotHover
: Π€ΡΠ½ΠΊΡΠΈΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠΎΡΠΊΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
ΠΠΎΠ»ΡΡΠ½Π°Ρ ΠΊΡΡΠ³ΠΎΠ²Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠΌ Π²ΠΈΠ·ΡΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Π΄Π°Π½Π½ΡΡ , ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π΄Π°Π½Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π΄ΠΈΡΡΠΎΠ² ΡΠ΅ΠΊΡΠΎΡΠΎΠ². ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΌΡ ΡΠ³Π»Ρ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅ΠΊΡΠΎΡΠ°ΠΌΠΈ, ΠΏΠΎΠ»ΡΡΠ½Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ ΠΏΡΠΎΡΡΠΎΡΡ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ .
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΠΎΠ»ΡΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄ createChart
ΠΊΠ»Π°ΡΡΠ° ChartMaster
Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠΏΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ 'polar'
. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°:
const polarChart = ChartMaster.createChart('polar', {
element: document.querySelector('#chart4'),
data: [
{ label: 'Category A', value: 60, color: 'rgba(255, 99, 132, 0.6)' },
{ label: 'Category B', value: 25, color: 'rgba(54, 162, 235, 0.6)' },
{ label: 'Category C', value: 65, color: 'rgba(255, 206, 86, 0.6)' },
{ label: 'Category D', value: 15, color: 'rgba(28, 120, 28, 0.6)' },
{ label: 'Category E', value: 45, color: 'rgba(90, 50, 48, 0.6)' }
],
options: {}
})
borderWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠ΅Π³ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 0.
borderColor
: Π¦Π²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΡΠ΅Π³ΠΌΠ΅Π½ΡΠΎΠ² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#000000'.
padding
: ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠΉ ΠΎΡΡΡΡΠΏ Π²ΠΎΠΊΡΡΠ³ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 0.
legend
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π»Π΅Π³Π΅Π½Π΄Ρ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
lightenValue
: ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ Π±ΡΠ΄ΡΡ ΠΎΡΠ²Π΅ΡΠ»Π΅Π½Ρ ΡΠ²Π΅ΡΠ° ΡΠ΅Π³ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 50.
tooltip
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠ΅ΠΊΡΠΎΡΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
labels
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΌΠ΅ΡΠΊΠΈ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
iteraction
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, Π²ΠΊΠ»ΡΡΠ΅Π½ΠΎ Π»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠΎΠΉ (Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ΅Π³ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ). ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
rings
: ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΊΠΎΠ»Π΅Ρ Π²Π½ΡΡΡΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 10.
sectorGaps
: Π Π°Π·ΠΌΠ΅Ρ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠΎΠ² ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π³ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Π² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 0.
gridColor
: Π¦Π²Π΅Ρ Π»ΠΈΠ½ΠΈΠΉ ΡΠ΅ΡΠΊΠΈ Π²Π½ΡΡΡΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#cecece'.
gridLineWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π»ΠΈΠ½ΠΈΠΉ ΡΠ΅ΡΠΊΠΈ Π²Π½ΡΡΡΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
axisLabelAngle
: Π£Π³ΠΎΠ» ΠΏΠΎΠ²ΠΎΡΠΎΡΠ° ΠΌΠ΅ΡΠΎΠΊ ΠΎΡΠ΅ΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π² Π³ΡΠ°Π΄ΡΡΠ°Ρ
. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: -90.
colorTransitionTimingFunction
: Π€ΡΠ½ΠΊΡΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΡΠ²Π΅ΡΠΎΠ². ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: easeInOutQuart
.
colorTransitionDuration
: ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΡΠ²Π΅ΡΠ° ΡΠ΅Π³ΠΌΠ΅Π½ΡΠΎΠ². ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 200.
onSectorHover
: Π€ΡΠ½ΠΊΡΠΈΡ ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ³ΠΎ Π²ΡΠ·ΠΎΠ²Π°, Π²ΡΠ·ΡΠ²Π°Π΅ΠΌΠ°Ρ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΡΠ΅ΠΊΡΠΎΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
ΠΠ½Π° ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΡΠ°Π΄ΠΈΠ°Π»ΡΠ½ΡΡ Π»ΠΈΠ½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΡ ΠΎΠ΄ΡΡ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ ΠΎΠ±ΡΠ΅ΠΉ ΡΠΎΡΠΊΠΈ (ΡΠ΅Π½ΡΡΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ) ΠΈ ΡΠΎΠ΅Π΄ΠΈΠ½ΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠΎΡΠΊΠΈ Π΄Π°Π½Π½ΡΡ Π½Π° ΡΡΠΈΡ Π»ΠΈΠ½ΠΈΡΡ . Π Π°Π΄Π°ΡΠ½Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ ΡΡΠ°Π²Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°Π·Π½ΡΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ Π²Π½ΡΡΡΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡΠ° Π΄Π°Π½Π½ΡΡ .
ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΌΠ΅ΡΠΎΠ΄ createChart
ΠΊΠ»Π°ΡΡΠ° ChartMaster
Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΠΏΠ° Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ 'radar'
. ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°:
const radarChart = ChartMaster.createChart('radar', {
element: document.querySelector('#chart5'),
data: [
{ label: 'Category A', value: 60 },
{ label: 'Category B', value: 25 },
{ label: 'Category C', value: 65 },
{ label: 'Category D', value: 15 },
{ label: 'Category E', value: 45 }
]
})
gridLineWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π»ΠΈΠ½ΠΈΠΉ ΡΠ΅ΡΠΊΠΈ Π² ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
gridColor
: Π¦Π²Π΅Ρ Π»ΠΈΠ½ΠΈΠΉ ΡΠ΅ΡΠΊΠΈ Π² ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#565656'.
axesLineWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π»ΠΈΠ½ΠΈΠΉ ΠΎΡΠ΅ΠΉ Π² ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 1.
axesColor
: Π¦Π²Π΅Ρ Π»ΠΈΠ½ΠΈΠΉ ΠΎΡΠ΅ΠΉ Π² ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#000000'.
splitSections
: ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ΅ΠΊΡΠΈΠΉ, Π½Π° ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Π° ΡΠ°Π΄Π°ΡΠ½Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 8.
labelOffset
: ΠΡΡΡΡΠΏ ΠΌΠ΅ΡΠΎΠΊ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ ΠΎΡ ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 20.
labels
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΌΠ΅ΡΠΊΠΈ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
lineWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π»ΠΈΠ½ΠΈΠΈ Π΄Π°Π½Π½ΡΡ
Π² ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 2.
colorTransitionDuration
: ΠΠ»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΡΠ²Π΅ΡΠ° Π² ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 200.
bgSectionColor
: Π¦Π²Π΅Ρ Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΡΠΎΠ½Π° ΡΠ΅ΠΊΡΠΈΠΈ Π² ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 'rgba(240, 55, 55, 0.4)'.
tooltip
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
dots
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΡΠΎΡΠΊΠΈ Π΄Π°Π½Π½ΡΡ
. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
dotColor
: Π¦Π²Π΅Ρ ΡΠΎΡΠ΅ΠΊ Π΄Π°Π½Π½ΡΡ
Π² ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#ffffff'.
dotRadius
: Π Π°Π΄ΠΈΡΡ ΡΠΎΡΠ΅ΠΊ Π΄Π°Π½Π½ΡΡ
Π² ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 3.
dotBorderWidth
: Π’ΠΎΠ»ΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ ΡΠΎΡΠ΅ΠΊ Π΄Π°Π½Π½ΡΡ
Π² ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 2.
dotBorderColor
: Π¦Π²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ ΡΠΎΡΠ΅ΠΊ Π΄Π°Π½Π½ΡΡ
Π² ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: '#000000'.
iteraction
: Π€Π»Π°Π³, ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΠΈΠΉ, Π²ΠΊΠ»ΡΡΠ΅Π½Π° Π»ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ Ρ ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠΎΠΉ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: true.
iteractionAdditionalRadius
: ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΠ°Π΄ΠΈΡΡ Π΄Π»Ρ ΠΎΠ±Π»Π°ΡΡΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ Ρ ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠΎΠΉ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: 5.
colorTransitionTimingFunction
: Π€ΡΠ½ΠΊΡΠΈΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠ°Ρ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Π° ΡΠ²Π΅ΡΠΎΠ². ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: easeInOutQuart
.
onDotHover
: ΠΠ±ΡΠ°ΡΠ½ΡΠΉ Π²ΡΠ·ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΊΡΡΡΠΎΡΠ° Π½Π° ΡΠΎΡΠΊΡ Π΄Π°Π½Π½ΡΡ
Π² ΡΠ°Π΄Π°ΡΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ: ΠΏΡΡΡΠ°Ρ ΡΡΠ½ΠΊΡΠΈΡ.