lengend가 비활성화되었을 때, legend inactiveItems속성을 사용하여 색상 수정을 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
inactiveItems: { // 레전드 비활성화 시 레전드 색상
markers: { // 레전드 도형 색상
color: "blue"
},
labels: { // 레전드 글자 색상
color: "red"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
]
});
</script>
</body>
</html>legendItemClick 함수를 통해 legend가 비활성화되었을 때 속성을 확인/수정 할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.621/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.621/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
$("#chart").kendoChart({
legend: {
inactiveItems: { // 레전드 비활성화 시 레전드 색상
markers: { // 레전드 도형 색상
color: "blue"
},
labels: { // 레전드 글자 색상
color: "red"
}
}
},
series: [
{ name: "Series 1", data: [1, 2, 3] },
{ name: "Series 2", data: [3, 4, 5] }
],
legendItemClick: function(e) {
console.log(e.sender.options.legend.inactiveItems);
// 속성이 아닌 아래와 같은 방식으로도 변경 가능하지만 추천하지 않음
// e.sender.options.legend.inactiveItems.markers.color = "red";
}
});
</script>
</body>
</html>
참고
'라이브러리 > Kendo' 카테고리의 다른 글
| Kendo Chart 각 차트에 border style 주는 방법 (0) | 2022.07.01 |
|---|
