2013-12-09 24 views
7

は、この例を参照してください円グラフの内側にラベルを配置します: http://jsfiddle.net/mcLEb/、どのように私は

jQuery("#grid").kendoChart(
    { 
     theme: jQuery(document).data("kendoSkin") || "default", 
     legend: 
     { 
      position: "bottom" 
     }, 
     chartArea: { 
      height: 200 
     }, 
     seriesDefaults: 
     { 
      labels: 
      { 
       visible: true, 
       format: "{0}%", 
       font: "12px Arial", 
       center: '5%' 
      } 
     }, 
     series: [{ 
      type: "pie", 
      data:[70,20,10] 
     }], 
     tooltip: 
     { 
      visible: false, 
      template: "${ category } - ${ value }%" 
     }, 
     title: { padding: 1, margin: 1 }, 
     seriesColors: ["#d15400", "#d2d2d2","#01619e"], 
     plotArea: { margin: { left: 50, right: 50 } }, 
    }); 

より明確化: 今、ラベルが円グラフでの外に位置しています対応するパイセクションを指す矢印。私は、ラベル自体を対応するパイセクションの内側に入れたいと思っています。

私は、パイセクションが実際のテキストよりも小さくなる可能性があることを認識していますが、それを処理します。

ありがとうございます!

答えて

8

以下のコード( "中心" として設定された位置)を使用

seriesDefaults: 
    { 
     labels: 
     {     
      position: "center", 
      visible: true, 
      format: "{0}%", 
      font: "12px Arial", 
     } 
    } 
4

私がこれを行うために見つけた最良の方法は、ラベルの位置insideEndを使用することです。

seriesDefaults: 
    { 
     labels: 
     {     
      position: "insideEnd", 
      visible: true, 
      format: "{0}%", 
      font: "12px Arial", 
      center: '5%' 
     } 
    } 

信頼性の低い別の方法は、ラベルに負の距離プロパティを使用することでした。

seriesDefaults: 
    { 
     labels: 
     {     
      distance: -10, 
      visible: true, 
      format: "{0}%", 
      font: "12px Arial", 
      center: '5%' 
     } 
    } 
+0

[ドキュメントリンク](http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ ui/chart#configuration-series.labels.position)ラベルの位置 – reergymerej