爲Kendo UI定義顏色堆積和分組條形圖

Question

我期待在Kendo的圖表中獲得this，但他們沒有任何使用數據源的示例。

我目前正在使用hack來獲得這個沒有一個數據源，但能夠使用數據源可以爲我提供許多好處。

這裏是我到目前爲止的代碼：

var graph_data = [ 
    {'date': '2013-02-22T00:00:00', 'color': 'white', 'y_value': 1, 'name': 'name01'}, 
    {'date': '2013-02-23T00:00:00', 'color': 'orange','y_value': 1, 'name': 'name01'}, 
    {'date': '2013-02-22T00:00:00', 'color': 'red', 'y_value': 1, 'name': 'name02'}, 
    {'date': '2013-02-23T00:00:00', 'color': 'grey', 'y_value': 1, 'name': 'name02'}, 
    {'date': '2013-02-22T00:00:00', 'color': 'black', 'y_value': 1, 'name': 'name03'}, 
    {'date': '2013-02-23T00:00:00', 'color': 'blue', 'y_value': 1, 'name': 'name03'} 
] 
var unique_names = 3; 
var series = []; 
for(var i = 0; i < unique_names; i++){ 
    series.push({'field':'y_value', 'type':'bar'}); 
} 
$('#chart').kendoChart({ 
    'dataSource':{ 
     'data':graph_data, 
     'group': { 
      'field':'name', 
      'dir':'asc' 
     }, 
     'schema':{ 
      'model':{ 
       'fields':{ 
        'name':{'type':"string"}, 
        'date':{'type':'date'}, 
        'y_value':{'type':'number'}, 
        'color':{'type':'string'} 
       } 
      } 
     } 
    }, 
    'seriesDefaults' : { 
     'colorField':'color', 
     'stack':true, 
     'gap':0.1 
    }, 
    'series': series, 
    'categoryAxis': { 
     'field': 'name' 
    } 
}); 

Answer 1

我改變了我的配置組通過的日期，並奇蹟般地工作。

$('#chart').kendoChart({ 
'dataSource':{ 
    'data':graph_data, 
    'group': { 
     'field':'date', 
     'dir':'asc' 
    }, 
    'schema':{ 
     'model':{ 
      'fields':{ 
       'name':{'type':"string"}, 
       'date':{'type':'date'}, 
       'y_value':{'type':'number'}, 
       'color':{'type':'string'} 
      } 
     } 
    } 
}, 
'seriesDefaults' : { 
    'colorField':'color', 
    'stack':true, 
    'gap':0.1 
}, 
'series': [{'type':'bar', 'field':'stack_value', 'stack':true}], 
'categoryAxis': { 
    'field': 'name' 
} 
});