KendoUI将“甜甜圈”图表的系列标签颜色更改为系列颜色

Question

我正在使用kendoUI和angular。 我有一个Kendo Donut图表，如下所示。

<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}'}"

但这没有用。 谁能指导我应该去哪里改变？

Answer 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>

Answer 2

我找到了解决方案。 这可以通过使用k选项来实现。

<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;
                    }
                }
            };

KendoUI将“甜甜圈”图表的系列标签颜色更改为系列颜色

问题描述

2 个解决方案

解决方案1
2 2016-10-08 08:47:13

解决方案2
1 已采纳 2016-10-08 08:38:24

KendoUI将“甜甜圈”图表的系列标签颜色更改为系列颜色

问题描述

2 个解决方案

解决方案1 2 2016-10-08 08:47:13

解决方案2 1 已采纳 2016-10-08 08:38:24

解决方案1
2 2016-10-08 08:47:13

解决方案2
1 已采纳 2016-10-08 08:38:24