2013-12-09 9 views
7

prega di fare riferimento a questo esempio: http://jsfiddle.net/mcLEb/Nel Kendo UI DataViz, come faccio a collocare le etichette all'interno del grafico a torta

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

Altro chiarimento: In questo momento, le etichette si trovano al di fuori del grafico a torta con una freccia che punta alla loro sezione di torta corrispondente. Voglio che le etichette stesse siano nella loro sezione di torta corrispondente.

Sono consapevole del fatto che una sezione di torta potrebbe diventare più piccola del testo effettivo al suo interno, ma lo gestirò.

Grazie in anticipo!

risposta

8

utilizzare il codice qui sotto (posizione impostata come "centro")

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

Il modo migliore che ho trovato per fare questo è utilizzare la posizione all'interno di End sulle etichette.

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

Un altro modo che è meno affidabile è stato quello di utilizzare una proprietà negativa distanza sulle etichette.

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

[link docs] (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ ui/chart # configuration-series.labels.position) per la posizione dell'etichetta – reergymerej

Problemi correlati