켄도 ui의 차트를 그릴때 색상을 지정하는 방법 입니다.
차트를 구현하다 보면 임의로 지정된 색상을 사용해야 하는 경우가 있습니다. 그럴 경우 간단하게
사용 할 수 있는 방법입니다.
코드는 아래와 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | $("#chart").kendoChart({ title: { text: "Gross domestic product growth \n /GDP annual %/" }, legend: { position: "bottom" }, chartArea: { background: "" }, seriesDefaults: { type: "line", style: "smooth" }, series: [{ name: "India", data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855] },{ name: "World", data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727] },{ name: "Russian Federation", data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3] },{ name: "Haiti", data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590] }], seriesColors: [" #108D25","#48CFAD", "#FC6E51", "#FC6E51", "#4FC0E8", "#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"], valueAxis: { labels: { format: "{0}%" }, line: { visible: false }, axisCrossingValue: -10 }, categoryAxis: { categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011], majorGridLines: { visible: false }, labels: { rotation: "auto" } }, tooltip: { visible: true, format: "{0}%", template: "#= series.name #: #= value #" } }); | cs |
켄도 ui의 라인차트를 그리는 데모페이지의 첫번째 소스에
seriesColors: [" #108D25","#48CFAD", "#FC6E51", "#FC6E51", "#4FC0E8",
"#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"],
이 코드를 추가 하였습니다. seriesColors 라는 속성이 색상을 지정해 주는 속성인데
저 배열 안에 색상코드를 넣으면 차트가 저 순서대로 색상을 넣어주게 됩니다.
두번째 방법은
시리즈에 들어갈 데이터에 직접 색상을 지정해 주는 방법 입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | data: [{ category: "변속A", value: data1Val, color: "#9de219" },{ category: "변속C", value: data2Val, color: "#90cc38" },{ category: "등속B1", value: data3Val, color: "#006634" },{ category: "등속B2", value: data4Val, color: "#004d38" }] | cs |
차트가 그려줄 데이터를 직접 만들어 넣어 줄떄 컬러속성을 함께 넣어 주면 지정된 색상으로 차트를 그려주게 됩니다.
'Yame Programmer > CSS & UI Plugin' 카테고리의 다른 글
[CSS] 선택자 브라우저별 지원여부 (0) | 2016.06.21 |
---|---|
[kendo ui] 켄도 ui 라인차트 bullet(원) 제거 하기 (0) | 2016.06.21 |
[kendo ui] 차트 valueAxes 라벨 위치 지정 하기 (0) | 2016.06.20 |
[Kendo ui] 켄도 그리드 값이 null 일때 대체문자 사용 하기[template 사용] (0) | 2016.06.20 |
[켄도ui] 차트 배경 없애는 방법, 배경 투명으로 만들기 (0) | 2015.07.13 |