Пользовательский виджет «Гистограмма»

Пользовательский виджет «Гистограмма»

  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"     } }