Статьи

KendoUI DataViz Советы и хитрости

Декабрь 23, 2018

В Windows Phone АНАЛИТИКА служба Wensus использует KendoUI Dataviz компоненты для рисования отчетов. Документация по DataViz хороша, но я думаю, что примеров не может быть достаточно. Итак, вот еще несколько. Все примеры доступны через jsFiddle.

образ

Примеры были протестированы с KendoUI версии 2012.2.710.

Гистограмма с полями, удаленными между сериями

По умолчанию, если вы создаете столбчатую диаграмму с несколькими рядами, между столбцами, представляющими разные серии, есть поле.

образ

Чтобы сделать график более читабельным, лучше убрать поле. Вы можете сделать это, установив для свойства « spacing » значение 0.

образ

jsFiddle: http://jsfiddle.net/HdFsr/1/

Код:

$("#chart").kendoChart({
    title: {
        text: "Kendo Chart Example"
    },
    series: [{
        name: "Example Series",
        data: [200, 450, 300, 125],
        spacing: 0},
    {
        name: "Another Series",
        data: [200, 450, 300, 125],
        }],
    categoryAxis: {
        categories: [2000, 2001, 2002, 2003]
    }
});​

Автоматическая настройка шага, чтобы сделать диаграммы читаемыми для неизвестного количества точек данных

Свойство step-property можно использовать для настройки количества отображаемых меток для категории Axis. Без установки «шага» и если данных слишком много, диаграмма может запутаться:

Но это намного более читабельно, если для шага установлено значение 10:

Но что происходит, когда вы устанавливаете шаг на 10, и ваш бэкэнд отправляет вам только несколько точек данных? Диаграмма учитывает свойство step, и диаграмма снова может выглядеть неуклюжей:

Решением является динамическое изменение свойства шага в зависимости от объема данных. Для этого вы можете использовать dataBound -event диаграммы в сочетании с компонентом DataSource:

function dataBound(e) {
    var chart = $("#chart").data("kendoChart");
    if (dataSource.view().length > 4) {
        chart.options.categoryAxis.labels.step = 10;
    }
    else {
        chart.options.categoryAxis.labels.step = 1;
    }   
}

jsFiddle : http://jsfiddle.net/wkGud/1/

Код:

var dataSource = new kendo.data.DataSource({
    data: [{
        "ReportDate": "2012-01-02T00:00:00",
        "Value": 500.000000},
    {
        "ReportDate": "2012-06-01T00:00:00",
        "Value": 350.000000},
    {
        "ReportDate": "2012-07-01T00:00:00",
        "Value": 100.000000},
    {
        "ReportDate": "2012-08-16T00:00:00",
        "Value": 150.000000},
    {
        "ReportDate": "2012-08-17T00:00:00",
        "Value": 250.000000}]
});
 
function dataBound(e) {
    var chart = $("#chart").data("kendoChart");
    if (dataSource.view().length > 4) {
        chart.options.categoryAxis.labels.step = 10;
    }
    else {
        chart.options.categoryAxis.labels.step = 1;
    }   
}
 
$("#chart").kendoChart({
    title: {
        text: "Employee Sales"
    },
    dataSource: dataSource,
    series: [{
        type: "line",
        field: "Value"}],
    categoryAxis: {
        field: "ReportDate",
        type: "Date",
        baseUnit: "days"
    },
    dataBound: dataBound
 
});

Настройка цвета серии:

KendoUI предоставляет различные темы из коробки, но с помощью seriesColors -property легко настроить только цвета, используемые диаграммами .

Например, тема по умолчанию использует красный и зеленый:

образ

Если мы хотим отобразить один и тот же график с различными оттенками синего, мы можем установить seriesColors:

seriesColors: [«# b4dbeb», «# 8cc7e0», «# 174356», «# 0c242e»],

образ

jsFiddle : http://jsfiddle.net/BmQd9/1/

Код:

$("#chart").kendoChart({
    title: {
        text: "Kendo Chart Example"
    },
    seriesColors: ["#b4dbeb", "#8cc7e0", "#174356", "#0c242e"],
    series: [{
        name: "Example Series",
        data: [200, 450, 300, 125]},
    {
        name: "Another Series",
        data: [200, 450, 300, 125]
        }],
    categoryAxis: {
        categories: [2000, 2001, 2002, 2003]
    }
});​

Ссылки:

Документация KendoUI Dataviz

 

 

 

29
Share: