问题
I have the following implementation and I used colorField to assign colors. However, even though I color the bar stack objects properly, but this color does not match with legend color. I thought it should be bound somehow, how should I fix it?
I have used colorField
because I want to assign the same color for paired objects in the bar stack column.
dataSample:
data[0] = {
"value": 29,
"series": 1,
"category": "Men",
"fname": "NY",
"valueColor": "black"
},
http://jsfiddle.net/fm79hsms/13/
回答1:
Here is a solution, although it feels kind of hacky.
js fiddle
I used legend.item.visual to redraw the legend and pulled in the valueColor from the data, which was nicely passed along to the legened.item.visual function.
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;
}
}
},
回答2:
Add this -> seriesColors: ["red", "green"]
, and configure your own color in kendo chart javascript.
来源:https://stackoverflow.com/questions/30656016/legend-and-bar-chart-colors-do-not-match