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

着色单独的剑道棒

1 个答案: