Kendo ui Kendoui-动态设置图表中的颜色
当我们使用KendoUI时,我们需要指定图表的背景色。像这样:Kendo ui Kendoui-动态设置图表中的颜色,kendo-ui,dojo,telerik,kendo-chart,Kendo Ui,Dojo,Telerik,Kendo Chart,当我们使用KendoUI时,我们需要指定图表的背景色。像这样: { category: "Latin America", value: 16.3, color: "#068c35" } 请参阅下面的完整代码或示例。我想知道,不是为每个组件指定背景色,而是是否可以设置基础色,然后kendoui将使用基础色的变化并为其余组件设置背景色 <!DOCTYPE html> <html> <head> <base hre
{
category: "Latin America",
value: 16.3,
color: "#068c35"
}
请参阅下面的完整代码或示例。我想知道,不是为每个组件指定背景色,而是是否可以设置基础色,然后kendoui将使用基础色的变化并为其余组件设置背景色
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/donut-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "donut",
startAngle: 150
},
series: [{
name: "2011",
data: [{
category: "Asia",
value: 30.8,
color: "#9de219"
},{
category: "Europe",
value: 21.1,
color: "#90cc38"
},{
category: "Latin America",
value: 16.3,
color: "#068c35"
},{
category: "Africa",
value: 17.6,
color: "#006634"
},{
category: "Middle East",
value: 9.2,
color: "#004d38"
},{
category: "North America",
value: 4.6,
color: "#033939"
}]
}, {
name: "2012",
data: [{
category: "Asia",
value: 53.8,
color: "#9de219"
},{
category: "Europe",
value: 16.1,
color: "#90cc38"
},{
category: "Latin America",
value: 11.3,
color: "#068c35"
},{
category: "Africa",
value: 9.6,
color: "#006634"
},{
category: "Middle East",
value: 5.2,
color: "#004d38"
},{
category: "North America",
value: 3.6,
color: "#033939"
}],
labels: {
visible: true,
background: "transparent",
position: "outsideEnd",
template: "#= category #: \n #= value#%"
}
}],
tooltip: {
visible: true,
template: "#= category # (#= series.name #): #= value #%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
html{字体大小:14px;字体系列:Arial、Helvetica、sans serif;}
函数createChart(){
$(“#图表”)。肯多卡特({
标题:{
位置:“底部”,
正文:“互联网人口增长份额”
},
图例:{
可见:假
},
图表区:{
背景:“”
},
系列默认值:{
类型:“甜甜圈”,
startAngle:150
},
系列:[{
名称:“2011年”,
数据:[{
类别:“亚洲”,
数值:30.8,
颜色:“9de219”
},{
类别:“欧洲”,
价值:21.1,
颜色:“90cc38”
},{
类别:“拉丁美洲”,
价值:16.3,
颜色:“068c35”
},{
类别:“非洲”,
价值:17.6,
颜色:“006634”
},{
类别:“中东”,
价值:9.2,
颜色:“004d38”
},{
类别:“北美”,
价值:4.6,
颜色:“033939”
}]
}, {
名称:“2012年”,
数据:[{
类别:“亚洲”,
价值:53.8,
颜色:“9de219”
},{
类别:“欧洲”,
价值:16.1,
颜色:“90cc38”
},{
类别:“拉丁美洲”,
价值:11.3,
颜色:“068c35”
},{
类别:“非洲”,
价值:9.6,
颜色:“006634”
},{
类别:“中东”,
价值:5.2,
颜色:“004d38”
},{
类别:“北美”,
价值:3.6,
颜色:“033939”
}],
标签:{
可见:对,
背景:“透明”,
位置:“外侧端”,
模板:“#=类别:\n#=值#%”
}
}],
工具提示:{
可见:对,
模板:“#=类别#”(#=series.name#):#=值#%”
}
});
}
$(文档).ready(创建图表);
$(document).bind(“剑道:皮肤变化”,createChart);
您可以在那里使用js函数和逻辑
{
category: "Africa",
value: 17.6,
color: GetColor
}
这就是你想要的吗?根据@ademar的回答,我已经更新了 这就是
GetColor
函数的外观
var color = "#2b577011";
var percent = -20;
function GetColor(val)
{
var R = parseInt(color.substring(1,3),16);
var G = parseInt(color.substring(3,5),16);
var B = parseInt(color.substring(5,7),16);
R = parseInt(R * (100 + percent) / 100);
G = parseInt(G * (100 + percent) / 100);
B = parseInt(B * (100 + percent) / 100);
R = (R<255)?R:255;
G = (G<255)?G:255;
B = (B<255)?B:255;
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
color = "#"+RR+GG+BB;
return color;
}
var color=“#2b577011”;
风险值百分比=-20;
函数GetColor(val)
{
var R=parseInt(color.substring(1,3),16);
var G=parseInt(color.substring(3,5),16);
var B=parseInt(颜色子串(5,7),16);
R=parseInt(R*(100+)/100);
G=parseInt(G*(100+百分比)/100);
B=parseInt(B*(100+)/100);
R=(Rit接近我想要的颜色,但我希望只指定一种基本颜色。根据该颜色,系统应为其余组件选择颜色。目前您已指定多种颜色(红色、蓝色、绿色)。如果你能解释一下这是如何工作的,那就太好了。投票选出有用的答案!!好吧,看看它是如何工作的:有一个带颜色的数组(索引0、1和2)。每次调用它时,我都执行3的模运算(所以它总是返回数组边框中的数字)返回一个值和增量变量。剑道中的颜色属性可以在字符串中指定,正如您在有问题的帖子中所发布的那样。所以函数只返回剑道可以接受的字符串中的颜色…以及基色功能:我不明白您的确切意思。指定例如绿色,然后为每个“饼图的一部分”?基于值还是随机?此代码对我来说毫无意义-GetColor
方法使用了一个参数val
,但不知为什么从未使用过该参数
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/donut-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "donut",
startAngle: 150
},
series: [{
name: "2012",
data: [{
category: "Asia",
value: 53.8,
color: GetColor
},{
category: "Europe",
value: 16.1,
color: GetColor
},{
category: "Latin America",
value: 11.3,
color: GetColor
},{
category: "Africa",
value: 9.6,
color: GetColor
},{
category: "Middle East",
value: 5.2,
color:GetColor
},{
category: "North America",
value: 3.6,
color: GetColor
}],
labels: {
visible: true,
background: "transparent",
position: "outsideEnd",
template: "#= category #: \n #= value#%"
}
}],
tooltip: {
visible: true,
template: "#= category # (#= series.name #): #= value #%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
var color = "#63C6FF";
var percent = -20;
function GetColor(val)
{
var R = parseInt(color.substring(1,3),16);
var G = parseInt(color.substring(3,5),16);
var B = parseInt(color.substring(5,7),16);
R = parseInt(R * (100 + percent) / 100);
G = parseInt(G * (100 + percent) / 100);
B = parseInt(B * (100 + percent) / 100);
R = (R<255)?R:255;
G = (G<255)?G:255;
B = (B<255)?B:255;
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));
color = "#"+RR+GG+BB;
return color;
}
</script>
</div>
</body>
</html>