2013-12-09 5 views
7

Proszę odnieść się do tego przykładu: http://jsfiddle.net/mcLEb/W Kendo UI DataViz, w jaki sposób umieszczać etykiety wewnątrz wykresu kołowego

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

więcej wyjaśnień: Teraz, etykiety znajdują się na zewnątrz wykresu kołowego z strzałka wskazująca na odpowiadającą jej sekcję kołowy. Chcę, aby same etykiety znajdowały się w odpowiedniej sekcji z ciastami.

Zdaję sobie sprawę, że część pie może dostać mniejszy niż rzeczywisty tekst wewnątrz niego, ale ja sobie z tym poradzić.

Z góry dziękuję!

Odpowiedz

8

użyciu kodu poniżej (pozycja określonego jako "centrum")

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

Najlepszym sposobem, jaki udało mi się to zrobić, jest użycie pozycji insideEnd na etykietach.

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

Innym sposobem, który był mniej niezawodny, było użycie negatywnej właściwości odległości na etykietach.

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

[Dokumenty link] (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ ui/chart # configuration-series.labels.position) dla pozycji etykiety – reergymerej

Powiązane problemy