kendo-ui - 为单个剑道条着色

Question

我正在尝试创建一个水平条形图，其中每个条形都有不同的颜色。我尝试输入以下内容作为我的系列数据：

尝试 1. 这很好地显示了我的所有条形图，但每个图表的颜色始终相同（seriesColors 数组中的第一种颜色）：

series: [value1, value2, value3, ...],
seriesColors: [hex1, hex2, hex3, ...]
categoryAxis: [name1, name2, name3, ...],

尝试 2。这使所有颜色都正确，并且显示的数据很好，问题是每个条都非常瘦，以容纳其他条所需的空间，值为“0”：

series: [{
    type: "bar",
    data: [value1, 0, 0, 0, 0, 0],
    color: "#hex1"
},{
    type: "bar",
    data: [0, value2, 0, 0, 0, 0],
    color: "#hex2"
}...etc...],
categoryAxis: [name1, name2, name3, ...];

尝试 3。这一次完全坏了。

    series: [{
    type: "bar",
    data: value1,
    color: "#hex1"
},{
    type: "bar",
    data: value1,
    color: "#hex2"
}...etc...],
categoryAxis: [name1, name2, name3, ...];

尝试 4：这个显示条具有正确的大小和正确的颜色，但在类别轴上没有类别名称（如预期的那样）：

series: [{
    name: name1,
    data: value1,
    color: hex1
},
{
    name: name2,
    data: value2,
    color: hex2
}...etc...];

Answer 1

考虑为每个数据项的colorField属性指定一个值。例如：

$("#chart").kendoChart({
  series: [{
    colorField: "valueColor",
    data: [
      { value: 1, valueColor: "blue" },
      { value: 2, valueColor: "green" },
      { value: 3, valueColor: "#BADA55" },
      { value: 3, valueColor: "rgba(125, 125, 125, 0.2)" }
    ]
  }],
  seriesDefaults: {
    type: "bar"
  }
});