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

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

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

Related content

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