剑道 UI 图表颜色 [英] Kendo UI Chart Colors
本文介绍了剑道 UI 图表颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在为 Kendo UI 柱状图配置条形颜色时遇到问题.代码如下:
I'm having trouble configuring the bar colors for a Kendo UI column chart. Here's 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>
我试图将C1"设为红色，将C2"设为蓝色，但图表呈现如下屏幕截图所示:
I'm trying to get "C1" to be red and "C2" to be blue but the chart renders like in the following screen shot:
任何指向正确方向的指针将不胜感激.
Any pointers in the right direction would be appreciated.
推荐答案
在进一步研究之后，我发现 colorField 用于将颜色设置为系列中的一个点(而不是整个系列).我发现 seriesColors 正是我想要的:
After looking into this further, I found that colorField is for setting color to a single point in the series (not to the entire series). I found seriesColors was what I was looking for:
http://docs.kendoui.com/api/dataviz/chart#configuration-seriesColors
这是我重构的示例:
<!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>
这篇关于剑道 UI 图表颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
