2013-12-09 14 views
7

Vui lòng tham khảo ví dụ sau: http://jsfiddle.net/mcLEb/Trong Kendo UI DataViz, làm thế nào để tôi đặt các nhãn bên trong biểu đồ pie

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

More làm rõ: Ngay bây giờ, các nhãn được đặt bên ngoài của biểu đồ pie với một mũi tên trỏ đến phần bánh tương ứng của họ. Tôi muốn các nhãn tự đứng bên trong phần bánh tương ứng của chúng.

Tôi biết rằng một phần bánh có thể nhỏ hơn văn bản thực tế bên trong nó, nhưng tôi sẽ xử lý điều đó.

Cảm ơn trước!

Trả lời

8

sử dụng mã dưới đây (thiết lập vị trí là "trung tâm")

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

Cách tốt nhất tôi đã tìm thấy để thực hiện việc này là sử dụng vị trí bên trongEnd trên nhãn.

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

Một cách khác kém tin cậy hơn là sử dụng thuộc tính khoảng cách phủ định trên nhãn.

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

[docs link] (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ ui/chart # configuration-series.labels.position) cho vị trí nhãn – reergymerej

Các vấn đề liên quan