javascript - 如何在extjs中增加饼图中的名称

Question

当我在我的名字中使用超过五个字母时，它会出现在图表中看到我上传的图片我正在使用 extjs 6 我只想在我的图表上有一个大名字

 {
   xtype: 'polar',
   split: true,
   flex: 0.3,
   colors: [
     '#347327',
     '#2897d2',
     '#de6110',

   ],
   bind: {
     store: '{pie}'
   },
   series: [{
     type: 'pie',
     showInLegend: true,
     donut: false,
     tips: {
       trackMouse: true,
       width: 140,
       height: 28,
       renderer: function(storeItem, item) {
         this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data'));
       }
     },
     highlight: {
       segment: {
         margin: 15
       }
     },
     label: {
       field: 'name',
       display: 'rotate',
       contrast: true,
       font: '12px Arial'
     },
     xField: 'data'
   }],
   interactions: [{
     type: 'rotate'
   }]
 }

here is My dynamically given names i want that names in side of my pie chart i mean above on the chart But when i use name that contain more then 5 letters it goes out side of the chart i will upload a image.

var pieStore = this.getViewModel().getStore('pie');
var rec = selected[0];


if (rec.get('new')) {
  pieStore.add({
    'name': 'NEW',
    data: rec.get('new'),
    total: rec.get('total')
  });
}
if (rec.get('openToQc')) {
  pieStore.add({
    'name': 'QC',
    data: rec.get('openToQc'),
    total: rec.get('total')
  });
}
if (rec.get('open')) {
  pieStore.add({
    'name': 'Open',
    data: rec.get('open'),
    total: rec.get('total')
  });
}
if (rec.get('rejected')) {
  pieStore.add({
    'name': 'Rejected',
    data: rec.get('rejected'),
    total: rec.get('total')
  });
}

Answer 1

问题出在你的系列标签上:

label: {
       field: 'name',
       display: 'rotate',
       contrast: true,
       font: '12px Arial'
     },

display: 'rotate', 在某些情况下在图表内部显示标签，在其他情况下在图表外部显示标签，您应该改用 display: 'inside',

You can see a working example here