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

时间:2017-02-02 17:43:26

标签: javascript charts pie-chart extjs6

当我在我的名字中使用超过五个字母时,它出现在图表中,看到我上传的图像我正在使用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'
   }]
 }




  

这里是我动态给出的名字我希望我的饼图旁边的名字我的意思是在图表的上方但是当我使用包含超过5个字母的名字时,它会在图表的一侧出现我将上传图像。< / p>

&#13;
&#13;
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')
  });
}
&#13;
&#13;
&#13;

its clear that i have six letters in third part of the chart but when i give it five or less then five letters it will show it on the chart i just want to have a large name but on the chart

1 个答案:

答案 0 :(得分:3)

问题在于您的系列标签:

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

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

You can see a working example here