2013-12-09 20 views
7

bu örneğe bakın pasta grafik içindeki etiketleri yerleştirebilirim: http://jsfiddle.net/mcLEb/, nasıl

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

Daha açıklama: Şu anda, etiketler pasta grafik ile dışında bulunan karşılık gelen pasta bölümüne işaret eden bir ok. Etiketlerin kendilerine ait pasta bölümlerinin içinde olmasını istiyorum.

Bir pasta bölümünün içindeki gerçek metinden daha küçük olabileceğini biliyorum, ancak bunu halledeceğim.

Şimdiden teşekkürler!

cevap

8

aşağıdaki kodu ("merkez" olarak ayarlanan konum) kullanmak

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

Bunu yapmamın en iyi yolu, etiketlerin içinde, girişin içinde yer almaktır.

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

Daha az güvenilir olan başka bir yöntem de etiketlerde bir negatif uzaklık özelliği kullanmaktı.

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

[docs bağlantı] (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ etiket pozisyonu için ui/chart # configuration – reergymerej