图例和条形图颜色不匹配

Question

我有以下实现，我使用 colorField 分配颜色。然而，即使我正确地为条形堆栈对象着色，但这种颜色与图例颜色不匹配。我认为它应该以某种方式绑定，我应该如何修复它？

我使用了colorField，因为我想为条形堆栈列中的成对对象分配相同的颜色。

数据样本：

data[0] = {
    "value": 29,
    "series": 1,
    "category": "Men",
    "fname": "NY",
    "valueColor": "black"
},

http://jsfiddle.net/fm79hsms/13/

Answer 1

这是一个解决方案，虽然感觉有点老套。

js fiddle

我使用 legend.item.visual 重新绘制了图例并从数据中提取了 valueColor，它很好地传递给了 legened.item.visual 函数。

legend: {
        item: {
            visual: function (e) {

                var color = ""

                for (var i=0;i<e.series.data.length;i++){
                    if (e.series.data[i].valueColor != "" && e.series.data[i].fname != "") {
                    color = e.series.data[i].valueColor
                    }
                }

              var rect = new kendo.geometry.Rect([0, 0], [100, 50]);
              var layout = new kendo.drawing.Layout(rect, {
                spacing: 5,
                alignItems: "center"
              });

              var marker = new kendo.drawing.Path({
                fill: {
                  color: color
                }
              }).moveTo(10, 0).lineTo(10, 10).lineTo(0, 10).lineTo(0,0).close();

              var label = new kendo.drawing.Text(e.series.name, [0, 0], {
                fill: {
                  color: "black"
                }
              });

              layout.append(marker, label);
              layout.reflow()

              return layout;
            }
         }
     },

Answer 2

添加 this -> seriesColors: ["red", "green"]，并在 kendo 图表中配置您自己的颜色 javascript。

图例和条形图颜色不匹配

Legend and Bar Chart Colors do not match

javascript

kendo-ui

kendo-chart