All geek questions in one place

Kendo UI Chart Values

I'm having trouble adjusting the color of the strokes for the Kendo UI column chart. Here is the code:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="chart"></div> <script src="js/thirdParty/jquery.js"></script> <script src="js/thirdParty/kendo.all.min.js"></script> <script> $(function () { var data, dataSource; data = [{ type: "C1", amount: 100, year: 2008, color: "red" }, { type: "C2", amount: 120, year: 2008, color: "blue" }, { type: "C2", amount: 50, year: 2009, color: "blue" }, { type: "C1", amount: 10, year: 2010, color: "red" }, { type: "C1", amount: 120, year: 2011, color: "red" }, { type: "C2", amount: 50, year: 2011, color: "blue" }]; dataSource = new kendo.data.DataSource({ data: data, group: { field: "type" }, sort: { field: "year" } }); $("#chart").kendoChart({ dataSource: dataSource, series: [{ type: "column", field: "amount", categoryField: "year", name: "#= group.value #", colorField: "color" }], }) }); </script> </body> </html>

I am trying to make “C1” red and “C2” blue , but the chart is displayed as in the following screenshot:

enter image description here

It would be helpful to evaluate any pointers in the right direction.

+4
source share
2 answers

Having studied this, I found that colorField is designed to set the color at one point in the series (not for the entire series). I found seriesColors what I was looking for:

http://docs.kendoui.com/api/dataviz/chart#configuration-seriesColors

Here is my refactored example:

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="chart"></div> <script src="js/thirdParty/jquery.js"></script> <script src="js/thirdParty/kendo.all.min.js"></script> <script> $(function () { var data, dataSource; data = [{ type: "C1", amount: 100, year: 2008 }, { type: "C2", amount: 120, year: 2008 }, { type: "C2", amount: 50, year: 2009 }, { type: "C1", amount: 10, year: 2010 }, { type: "C1", amount: 120, year: 2011 }, { type: "C2", amount: 50, year: 2011 }]; dataSource = new kendo.data.DataSource({ data: data, group: { field: "type" }, sort: { field: "year" } }); $("#chart").kendoChart({ dataSource: dataSource, seriesColors: ["red", "blue"], series: [{ type: "column", field: "amount", categoryField: "year", name: "#= group.value #" }], }) }); </script> </body> </html>
+15
source

check js script

http://jsfiddle.net/9VZdS/45/

 $(function() { var dataset = new Array(1,2,3,null,5,6); var highlighted = new Array(null,null,null,4,null,null); $('#chart').kendoChart({ theme: 'metro', seriesDefaults: { type: 'column', stack: true }, series: [ { name: 'Not Highlighted', data: dataset, color: 'red' }, { name: 'Highlighted', data: highlighted, color: 'blue' } ] }) });
+3
source

Source: https://habr.com/ru/post/1499064/

More articles:


All Articles