Kendo UI 将圆环图的系列标签颜色更改为系列颜色
Posted
技术标签:
【中文标题】Kendo UI 将圆环图的系列标签颜色更改为系列颜色【英文标题】：KendoUI change series label color of Donut chart to series color 【发布时间】：2017-02-17 04:19:34 【问题描述】：我正在使用 kendoUI 和 angular。我有一个剑道甜甜圈图表如下。
<div class="center-pad" kendo-chart k-theme="['material']" k-chart-area="height: 325, width: 480"
k-series="[ type: 'donut',
field: 'percentage',
labels: visible: true, template: '$value $category $dataItem.color', position: 'outsideEnd', font: '15px Lato-Regular',
categoryField: 'source',
explodeField: 'explode']"
k-series-click="actionChartClick" k-data-source="actionChartData">
我想将系列标签颜色作为系列颜色。在模板中，我可以通过$dataItem.color访问模板颜色
我试过设置，
k-series="[ ...
labels: visible: true, template: '$value $category', position: 'outsideEnd', font: '15px Lato-Regular', color: '$dataItem.color'"
但这没有用。 谁能指导我应该在哪里改变？
【问题讨论】：
【参考方案1】：使用seriesDefaults.labels.color 或series.labels.color 并从函数返回所需的颜色值。您将可以访问函数参数中的series 和dataItem。
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.labels.color
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/donut-charts/donut-labels">
<style>html font-size: 14px; font-family: Arial, Helvetica, sans-serif; </style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
$(function()
$("#chart").kendoChart(
title:
text: "What is you favourite sport?"
,
legend:
position: "top"
,
seriesDefaults:
labels:
template: "#= category # - #= kendo.format('0:P', percentage)#",
position: "outsideEnd",
visible: true,
background: "transparent",
color: function(e)
// e.series
// e.dataItem
if (e.category == "Football")
return "#000";
else
return e.series.color;
,
series: [
type: "donut",
labels:
/*color: function(e)
// e.series
// e.dataItem
if (e.category == "Football")
return "#f00";
else
return e.series.color;
*/
,
data: [
category: "Football",
value: 35
,
category: "Basketball",
value: 25
,
category: "Volleyball",
value: 20
,
category: "Rugby",
value: 10
,
category: "Tennis",
value: 10
]
],
tooltip:
visible: true,
template: "#= category # - #= kendo.format('0:P', percentage) #"
);
);
</script>
</body>
</html>【讨论】：
【参考方案2】：我找到了解决方案。这可以通过使用 k-options 来实现。
<div class="center-pad" kendo-chart k-theme="['material']" k-chart-area="height: 325, width: 480"
k-series="[ type: 'donut',
field: 'percentage',
labels: visible: true, template: '$value $category $dataItem.color', position: 'outsideEnd', font: '15px Lato-Regular',
categoryField: 'source',
explodeField: 'explode']"
k-series-click="actionChartClick" k-data-source="actionChartData"
k-options="chartOptions">
在控制器中有以下内容：
$scope.chartOptions =
dataBound: function(e)
e.sender.options.series[0].labels.color = function(element)
return element.dataItem.color;
;
【讨论】：
以上是关于Kendo UI 将圆环图的系列标签颜色更改为系列颜色的主要内容，如果未能解决你的问题，请参考以下文章