2014-10-10 54 views
0

下面是我的Sencha触摸应用程序中的饼图代码。我面临的问题是,每当显示图表的空间不够所有标签都有标注线条和标签时,但是我希望这些标注线条的长度更短,那么它们现在就是因为它们不适合我的屏幕,标签被切断。减少饼图中的标注线的长度Sencha touch

我无法找到正确的配置属性。

编辑 - 图像的两个图表有相同的代码,并放置在横向盒布局容器

enter image description here

{ 
     xtype: 'polar', 
     itemId: 'pieChart', 
     background: 'white', 
     store: 'GraphsStore', 
     shadow: true, 
     innerPadding: 25, 
     //bind the chart to a store with the following structure 
     //interactions: ['rotate'], 

     colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"], 

     //configure the legend. 
     legend: { 
      position: 'top', 
      //width: 100 
      hidden: true 
     }, 

     //describe the actual pie series. 
     series: [{ 
      type: 'pie', 
      xField: 'g1', 
      renderer: function(sprite, config, rendererData, index) { 
       var changes = {}, 
        store = rendererData.store, 
        curentRecord = store.getData().items[index]; 
       var text = curentRecord.data.g1; 
       changes.text = text; 
       return changes; 
      }, 

      label: { 
       field: 'name', 
       display: 'rotate', 
       font: '8px' 
      }, 

      donut: 25, 

      style: { 
       miterLimit: 5, 
       lineCap: 'miter', 
       lineWidth: 1 
      } 
     }] 
     } 

任何指针将会很有帮助! 谢谢。

回答

0

在图表/系列/精灵/ PieSlice.js,修改以下两行:

x = centerX + Math.cos(midAngle) * (endRho + 40); 
y = centerY + Math.sin(midAngle) * (endRho + 40); 

更改40为较小的数字。