Данные о группах и стеках в Kendo UI Chart - PullRequest
Новая
       17

Данные о группах и стеках в Kendo UI Chart

0 голосов
/ 05 июля 2018

У меня есть данные JSON, такие как: 

arr = [{ Name: 'PAVI', value: 3}, {Name: 'Crystal', value: 2}, {Name: 'PAVI', value: 6}, {Name: 'Crystal', value: 11}]

Как складывать данные с похожим именем в Kendo UI Chart? Вот мой код на данный момент 

$("#chart").kendoChart({
    dataSource: {
        data: data,
        group: {
            field: 'Name'
        }
    },
series: [{
        name: "Total Sales",
        field: "value",
        stack: true
    }],
    categoryAxis: {
        field: 'Name'
    },

На самом деле вот структура реальных данных, которые я использую 

{
 Account:"Piscopo Cash and Carry"
 AccountName:"Piscopo Cash and Carry"
 Category:""
 MainCategory:"Other"
 TotalQty:146
 TotalSales:9747.616
}

UPDATE

Я нашел решение, установив группу в MainCategory (даже не думаю, что решение такое простое XD)

1 Ответ

0 голосов
/ 05 июля 2018

Я не уверен, что вы имели в виду под "стеком", потому что с этой структурой данных я никак не вижу, как вы могли бы ее сложить. Однако, если вы хотите суммировать значения с одинаковыми именами и отображать итоговые значения, вы можете использовать опцию агрегирования на диаграмме.

Вот как это сделать: Суммирует значения PAVI & Crystal и покажет на диаграмме только два столбца. 

var dataSource = new kendo.data.DataSource({
    data: data,
    group: {
        field: "Name", aggregates: [{
            field: "value", aggregate: "sum"
        }]
    }
});

Обратите внимание на опции group и aggregate.

Вот полный код: 

var data = [
    { Name: 'PAVI', value: 3 },
    { Name: 'Crystal', value: 2 },
    { Name: 'PAVI', value: 3 },
    { Name: 'Crystal', value: 10 }
];

var dataSource = new kendo.data.DataSource({
    data: data,
    group: {
        field: "Name", aggregates: [{
            field: "value", aggregate: "sum"
        }]
    }
});

dataSource.read();

$("#chart").kendoChart({
    dataSource: getChartData(dataSource),
    series: [{
        type: "column",
        field: "value",
        categoryField: "Name"
    }]
});


function getChartData(dataSource) {    
    var chartData = [];
    var view = dataSource.view();
    for (var idx = 0; idx < view.length; idx++) {
        chartData.push({
            Name: view[idx].value,
            value: view[idx].aggregates.value.sum
        });
    }
    return chartData;
}

Вот вам Скрипка

Надеюсь, это поможет :) Не стесняйтесь спрашивать, если у вас есть какие-либо сомнения.

...