Legend and Bar Chart Colors do not match

五迷三道 提交于 2019-11-27 08:25:00

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!