Перейти к концу метаданных
Переход к началу метаданных

Вы просматриваете старую версию данной страницы. Смотрите текущую версию.

Сравнить с текущим просмотр истории страницы

« Предыдущий Версия 2 Следующий »

  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"
    }
}
  • Нет меток