javascript - 为 Kendo UI 堆叠和分组条形图定义颜色

Question

我希望在 Kendo 的图表中得到这个，但他们没有任何使用数据源的示例。

我目前正在使用 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'
}
});