В 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] } });
Ссылки: