Kendo UI의 색상 정의 스택 및 그룹화 막대 차트

Question

this을 검도 차트에 넣으려고했지만 데이터 소스를 사용하는 예제가 없습니다.

없이는이 을 얻기 위해 현재 해킹을 사용하고 있지만 데이터 소스를 사용하면 많은 이점을 얻을 수 있습니다.

여기에 지금까지 내 코드입니다 :

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