Kendo UI 将圆环图的系列标签颜色更改为系列颜色答案

【问题标题】：KendoUI change series label color of Donut chart to series colorKendo UI 将圆环图的系列标签颜色更改为系列颜色
【发布时间】：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}'}"

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

【问题讨论】：

标签： javascript angularjs kendo-ui kendo-chart

【解决方案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;
                    }
                }
            };

【讨论】：