KendoUI將甜甜圈圖的系列標籤顏色更改爲系列顏色

我正在使用kendoUI和角色。我有一個Kendo甜甜圈圖表如下。KendoUI將甜甜圈圖的系列標籤顏色更改爲系列顏色

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

但沒有奏效。任何人都可以指導我在哪裏應該改變？

來源

2016-10-08 Rumesh Eranga

我找到了解決方案。這可以通過使用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; 
        } 
       } 
      };

來源

2016-10-08 08:38:24

使用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>

來源

2016-10-08 08:47:13 dimodi

KendoUI將甜甜圈圖的系列標籤顏色更改爲系列顏色

回答

相關問題