剣道シリーズシリーズの色にドーナツチャートのラベルを変更する

私は剣道と角度を使って作業しています。私は剣道のドーナツチャートを次のように持っています。剣道シリーズシリーズの色にドーナツチャートのラベルを変更する

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

出典

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

剣道シリーズシリーズの色にドーナツチャートのラベルを変更する

答えて

関連する問題