Kendo UI图表颜色

我无法为Kendo UI柱形图配置条形颜色。 这是代码：

      
    $(function () { var data, dataSource; data = [{ type: "C1", amount: 100, year: 2008, color: "red" }, { type: "C2", amount: 120, year: 2008, color: "blue" }, { type: "C2", amount: 50, year: 2009, color: "blue" }, { type: "C1", amount: 10, year: 2010, color: "red" }, { type: "C1", amount: 120, year: 2011, color: "red" }, { type: "C2", amount: 50, year: 2011, color: "blue" }]; dataSource = new kendo.data.DataSource({ data: data, group: { field: "type" }, sort: { field: "year" } }); $("#chart").kendoChart({ dataSource: dataSource, series: [{ type: "column", field: "amount", categoryField: "year", name: "#= group.value #", colorField: "color" }], }) });    

我试图让“C1”变为红色而“C2”变为蓝色，但图表呈现如下屏幕截图：

任何指向正确的方向将不胜感激。

Answer 1

在进一步研究之后，我发现colorField用于将颜色设置为系列中的单个点（而不是整个系列）。 我发现seriesColors是我想要的：

http://docs.kendoui.c​​om/api/dataviz/chart#configuration-seriesColors

这是我重构的例子：

Answer 2

检查JS小提琴

http://jsfiddle.net/9VZdS/45/

 $(function() { var dataset = new Array(1,2,3,null,5,6); var highlighted = new Array(null,null,null,4,null,null); $('#chart').kendoChart({ theme: 'metro', seriesDefaults: { type: 'column', stack: true }, series: [ { name: 'Not Highlighted', data: dataset, color: 'red' }, { name: 'Highlighted', data: highlighted, color: 'blue' } ] }) });