Сложенный граф с KendoUI

Question

Я пытаюсь отобразить данные в уложенном графике, используя kendo ui. Вот мой код:

var data = [ 
    // June 
    { Start: "2014-06-01T00:00:00", Name : "Series 1", Value: 1 }, 
    { Start: "2014-06-01T00:00:00", Name : "Series 2", Value: 2 }, 
    { Start: "2014-06-01T00:00:00", Name : "Series 3", Value: 10 }, 

    // July 
    { Start: "2014-07-01T00:00:00", Name : "Series 1", Value: 2 }, 
    { Start: "2014-07-01T00:00:00", Name : "Series 2", Value: 2 }, 
    { Start: "2014-07-01T00:00:00", Name : "Series 3", Value: 2 }, 

    // August 
    { Start: "2014-08-01T00:00:00", Name : "Series 1", Value: 3 }, 
    { Start: "2014-08-01T00:00:00", Name : "Series 2", Value: 2 }, 
    { Start: "2014-08-01T00:00:00", Name : "Series 3", Value: 1 }, 

    // September 
    { Start: "2014-09-01T00:00:00", Name : "Series 2", Value: 2 }, 
    { Start: "2014-09-01T00:00:00", Name : "Series 3", Value: 3 }, 

    // October 
    { Start: "2014-10-01T00:00:00", Name : "Series 1", Value: 1 }, 
    { Start: "2014-10-01T00:00:00", Name : "Series 3", Value: 3 } 

] 

var stocksDataSource = new kendo.data.DataSource({ 
    data: data, 
    group: { 
     field: "Name" 
    }, 
    sort: [{ field: "Start", dir: "asc"} ] 
}); 

function createChart() { 
    $("#chart").kendoChart({ 
     dataSource: stocksDataSource, 
     series: [{ 
      type: "column", 
      field: "Value", 
      name: "#= group.value #", 
      stack: true, 
      tooltip: { 
       template: "#=kendo.toString(new Date(category), 'd MMM yyyy')#<br/>" + 
       "#=dataItem.Name#<br/>"+ 
       "Value: #=dataItem.Value#", 
       visible: true     
      }, 
     }], 
     categoryAxis: { 
      field: "Start", 
      type: "date", 
      labels: { 
       format: "MMM" 
      } 
     } 
    }); 
} 

$(document).ready(createChart); 
$(document).bind("kendo:skinChange", createChart); 

Обратите внимание, что данные за сентябрь и октябрь не имеют значений для некоторых серий. Это полностью щурит дисплей графика в довольно необъяснимым образом:

Как вы можете видеть, как сентябрь и октябрь данные не совпадают с JSON. Это особенно странно с данными за октябрь, потому что отображаются три значения, тогда как задано только 2.

Вот JSFiddle: http://jsfiddle.net/12ob7qmx/6/

Существуют ли какие-либо настройки на графике, что я могу установить, так что работает, или мне придется перебрать набор данных и заполнить недостающие данные с нулевыми значениями?

Answer 1

Похоже, мне не повезло, и мне нужно исправить данные. В моем действительном решении я делаю это на стороне сервера, но и для потомков, если кто-то нуждается в кикстарта с чисто Js исправить, это отправная точка:

function fixData(data) { 
    var lookup =[], start = [], name = [], result =[]; 
    for (i = 0, len = data.length; i < len; ++i) { 
     start[data[i].Start] = true; 
     name[data[i].Name] = true; 
     lookup[data[i].Start + "," + data[i].Name] = data[i].Value; 
    } 
    for (var currentStart in start) { 
     for (var currentName in name) { 
      var entry = {Start: currentStart, Name: currentName}; 
      entry.Value = lookup[currentStart + "," + currentName] || 0; 
      result.push(entry); 
     }  
    }  
    return result; 
} 

JSFiddle: http://jsfiddle.net/12ob7qmx/8/

Answer 2

Способ, которым я решил эту проблему, - это перебрать мои данные и добавить отсутствующие значения с помощью 0.

Я не думаю, что есть лучший способ, чем то, что вы предложили себе. :(

Я нашел a question по поводу этого вопроса на форумах Telerik:

поведения вы наблюдали, как ожидаются, как категориальная диаграмма (бара, площадь и т.д.) требует соответствующего набора точек данных (значение может быть пустым, но он должен сохраняться в данных) Я не боюсь, что нет встроенных функций, которые будут автоматически устанавливаются значение 0 для недостающих значений -.. вы должны изменить свои данные

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

Я не нашел более свежую информацию, но насколько я знаю, это не было исправлено.