2014-10-10 26 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爲較小的數字。