KendoUI的堆積圖

我試圖在使用kendo ui的堆積圖中顯示數據。以下是我的代碼：KendoUI的堆積圖

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);

請注意，9月和10月的數據沒有某些系列的值。這完全搞砸了圖表顯示在相當無法解釋道：

Chart example

正如你可以同時看到九，十月份的數據不匹配的JSON。 10月份的數據尤其奇怪，因爲顯示了三個值，而只給出了兩個值。

這裏的jsfiddle：http://jsfiddle.net/12ob7qmx/6/

有沒有我可以設定它的工作原理，否則我將通過數據集必須循環和缺失數據與零個值填補圖表上的任何設置？

來源

2015-05-05 Andrew Savinykh

它看起來像我運氣不好，我需要修復數據。在我的實際解決方案我做了服務器端，但如果有人需要一個kickstart一個純粹的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/

來源

2015-05-05 20:34:13

我解決這個問題的方法是循環訪問我的數據，並用0添加缺失值。

我不認爲有比你自己建議的更好的方法。 :(

我發現a question關於對Telerik的論壇，這個問題：

你所觀察到的行爲是正常的分類圖表（酒吧，面積等）需要一個匹配組數據點（該值可以爲空，但它應該在數據保存）恐怕沒有內置的功能，它會自動失蹤值設爲0 - 你應該修改你的數據

恐怕這個功能的實現不在我們的近期計劃中，但我們可能會考慮將來的產品版本。

我還沒有找到更多的最新信息，但據我所知，這還沒有被修復。

來源

2015-05-05 06:16:12 Nicholas

KendoUI的堆積圖

回答

相關問題