Сравнение версий

Ключ

  • Эта строка добавлена.
  • Эта строка удалена.
  • Изменено форматирование.


  1. Нажать на кнопку «Создать новый».
  2. Откроется окно «Создать новый виджет».
  3. В поле «Название» задать имя создаваемому виджету.
  4. Заполнить поле «Код виджета (JavaScript)». Пример можно увидеть в Приложении 1 внизу данной страницы.
  5. Заполнить поле «Свойства виджета (JSON)». Пример можно увидеть в Приложении 2 внизу данной страницы.
    Поле «Свойства виджета (JSON)» предназначено для того, чтобы при дальнейшей работе с данным виджетом аналитик имел возможность изменять настройки этих свойств.
  6. Нажать на кнопку «Создать».
  7. На панели инструментов появится новый виджет.

 

Индивидуальная настройка пользовательского виджета осуществляется в пункте «Пользовательские свойства».

Чтобы удалить виджет с панели инструментов необходимо щёлкнуть по виджету правой кнопкой мыши и выбрать «Удалить».

Предупреждение

Если пользовательские виджеты созданы в одном из Dashboard Designer подключенному к определенному серверу, то добавленный виджет станет доступным во всех Dashboard Designer, подключенных к тому же серверу.


Предупреждение

Если Dashboard Designer запущен на одном ПК, а на другом ПК в Dashboard Designer добавили пользовательский виджет, то Dashboard Designer на первом ПК следует перезапустить.


Предупреждение

Пользовательскому виджету доступна «Привязка данных». Осуществляется аналогично стандартному виджету «График».


Предупреждение

Привязка данных с помощью вкладки «Привязка данных» может работать не корректно! Зависит от функциональности добавляемого пользовательского виджета.


Блок кода
languagejs
themeRDark
titleПриложение 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

});


Блок кода
languagejs
themeRDark
titleПриложение 2
{

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

    "dataLabels": {

         "enabled": true,

         "color": "red"

    }

}