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

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