ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ «Гистограмма»

  1. ΠΠ°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉΒ».
  2. ΠžΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ΡΡ ΠΎΠΊΠ½ΠΎ Β«Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Β».
  3. Π’ ΠΏΠΎΠ»Π΅ «НазваниС» Π·Π°Π΄Π°Ρ‚ΡŒ имя создаваСмому Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρƒ.
  4. Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π΅ «Код Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° (JavaScript)Β». ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ 1 Π²Π½ΠΈΠ·Ρƒ Π΄Π°Π½Π½ΠΎΠΉ страницы.
  5. Π—Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π΅ «Бвойства Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° (JSON)Β». ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ 2 Π²Π½ΠΈΠ·Ρƒ Π΄Π°Π½Π½ΠΎΠΉ страницы.
    ПолС «Бвойства Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° (JSON)Β» ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ дальнСйшСй Ρ€Π°Π±ΠΎΡ‚Π΅ с Π΄Π°Π½Π½Ρ‹ΠΌ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠΌ Π°Π½Π°Π»ΠΈΡ‚ΠΈΠΊ ΠΈΠΌΠ΅Π» Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ настройки этих свойств.
  6. ΠΠ°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒΒ».
  7. На ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов появится Π½ΠΎΠ²Ρ‹ΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚.

Β 

Π˜Π½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Π°Ρ настройка ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° осущСствляСтся Π² ΠΏΡƒΠ½ΠΊΡ‚Π΅ Β«ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ свойства».

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ с ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ‰Ρ‘Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρƒ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Β«Π£Π΄Π°Π»ΠΈΡ‚ΡŒΒ».

Если ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹ созданы Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· Dashboard Designer ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΌΡƒ ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ сСрвСру, Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ станСт доступным Π²ΠΎ всСх Dashboard Designer, ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Ρ… ΠΊ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ сСрвСру.

Если Dashboard Designer Π·Π°ΠΏΡƒΡ‰Π΅Π½ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ПК, Π° Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ ПК Π² Dashboard Designer Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚, Ρ‚ΠΎ Dashboard Designer Π½Π° ΠΏΠ΅Ρ€Π²ΠΎΠΌ ПК слСдуСт ΠΏΠ΅Ρ€Π΅Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ.

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρƒ доступна Β«ΠŸΡ€ΠΈΠ²ΡΠ·ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ…Β». ΠžΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΠ΅Ρ‚ΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ стандартному Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρƒ Β«Π“Ρ€Π°Ρ„ΠΈΠΊΒ».

ΠŸΡ€ΠΈΠ²ΡΠ·ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Β«ΠŸΡ€ΠΈΠ²ΡΠ·ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ…Β» ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ! Зависит ΠΎΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ добавляСмого ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°.

ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ 1
var categories = w.data.rows.map(function(row) {

Β Β Β  return row[0];

});

var series = w.data.cols.map(function (col, colIndex) {

Β Β Β  var data = w.data.values[colIndex].map(function (value) {

Β Β Β Β Β Β Β  return parseFloat(value);

Β Β Β  });

Β Β Β  return {

Β Β Β Β Β Β Β  name: col,

Β Β Β Β Β Β Β  data: data

Β Β Β  }

});



Highcharts.chart(w.general.renderTo, {

Β Β Β  chart: {

Β Β Β Β Β Β Β  type: 'column'

Β Β Β  },

Β Β Β  xAxis: {

Β Β Β Β Β Β Β  categories: categories

Β Β Β  },

Β Β Β  yAxis: {

Β Β Β Β Β Β Β  title: {

Β Β Β Β Β Β Β Β Β Β Β  text: w.props.yAxisTitle

Β Β Β Β Β Β Β  }

Β Β Β  },

Β Β Β  plotOptions: {

Β Β Β Β Β Β Β  series: {

Β Β Β Β Β Β Β Β Β Β Β  dataLabels: {

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  enabled: w.props.dataLabels.enabled,

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  style: {

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  color: w.props.dataLabels.color,

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  }

Β Β Β Β Β Β Β Β Β Β Β  }

Β Β Β Β Β Β Β  }

Β Β Β  },

Β Β Β  series: series

});
ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ 2
{

Β Β Β  "yAxisTitle": "РасстояниС",

Β Β Β  "dataLabels": {

Β Β Β Β Β Β Β Β  "enabled": true,

Β Β Β Β Β Β Β Β  "color": "red"

Β Β Β  }

}