Question

我正在使用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}'}"

但那没用。任何人都可以指导我应该改变的地方吗？

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

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

2 个答案: