更改相应的栏堆栈颜色

Question

目前我有以下实现，假设所有项目都不同；换句话说，数据集中没有 common/grouped 个对象。它工作正常。

但是，我想知道如果数据集中有两个common/grouped对象，有没有办法改变相应的条形颜色？

例如，通过查看以下 data[0] 和 data[1] 的 last objects，这些项目名称相同，我想给与相应的条形堆栈颜色相同。

data[0]=[{"value":29, "series":"item1", "category":"Men", "name":"HY"},{"value":44, "series":"item2", "category":"Men","name":"NY"}]

data[1]=[{"value":16, "series":"item3", "category":"Women", "name":"RY"},{"value":23, "series":"item5", "category":"Women", "name":"NY"}]

JSfiddle

Answer 1

你需要添加color: function(data){....}然后你可以使用两种方式，

通过添加一些条件或者像这样的颜色函数并参考jsfiddle :

series: [{
            type: "column",
            field: "value",
            stack: true,
            name: "#= group.value #",
            highlight: {
                visible: false,
            },
            color: function (data) {

                //check if the item fname is NY
                if (data.dataItem && data.dataItem.fname == "NY") {
                    //give the color you wanted
                    return "#CC6699";
                }

            }
        }],

或者，如果需要，可以像这样将颜色添加到数据中：

data[0] = [{
    "value": 29,
    "series": "item1",
    "category": "Men",
    "fname": "NY",
    "color" : "#CC6699"
}, {
    "value": 44,
    "series": "item2",
    "category": "Men",
    "fname": "GY",
    "color" : "#99FF99"
}]

和颜色函数return data.dataItem.color

更改相应的栏堆栈颜色

Change Corresponding Bar Stack Color

javascript

kendo-ui

kendo-chart