KendoUI change series 도넛 형 차트의 색상을 시리즈 색상

로 꾸미고 있습니다. 나는 다음과 같이 검도 도넛 차트를 가지고있다.KendoUI change series 도넛 형 차트의 색상을 시리즈 색상

<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 change series 도넛 형 차트의 색상을 시리즈 색상

답변

관련 문제