Sencha图表饼图标签旋转

我在图表1.1中使用Sencha Touch 2.1来显示一些数据。Sencha图表饼图标签旋转

我有一个饼图如下图所示：

Pie chart example

我想要的标签留他们现在在哪里，但我希望他们能水平（不旋转）。

extend: 'Ext.chart.PolarChart', 
    requires: [ 
    'Ext.chart.axis.Numeric', 
    'Ext.chart.axis.Category', 
    'Ext.chart.series.Pie', 
    'Charting.store.charts.perStore', 
    'Ext.chart.interactions.Rotate' 
], 
config: { 
    colors: ["#6295C7", "#CCCCC", "#FFFFF"], 
    store: 'chrtProduct', 
    // centered:true, 
    // innerPadding:20, 
    series: [{ 
     type: 'pie', 
     labelField: 'verdeling', 
     label:{ 
      /*display:'middle', 
      orientation:'horizontal',*/ 
      field:'patVerdeling', 
      font: '1em Trade Gothic LT Std Bold', 
      contrast:true, 
      disableCallout:true 
     }, 
     xField: 'patVerdeling' 
     //,rotation:90 
    }] 
    //,interactions: ['rotate']

以下代码在取消注释时似乎没有做任何事情。

display:'middle', 
orientation:'horizontal',

来源

2013-01-14 SnK

我不确定你可以... ['Label']（http://docs.sencha.com/touch/2-1/#!/api/Ext.chart.label.Label）有'rotationRads'配置选项，但默认为零（它来自['sprite.Text']（http://docs.sencha.com/touch/2-1/#!/api/Ext.draw .sprite.Text）对象），并且在旋转时最有可能由饼图在内部进行更改。这就是为什么当图表旋转时能够重新旋转标签的原因。祝你好运。 – jakerella

对于显示属性显示为[此处]的ExtJS饼图，这非常简单（http://docs.sencha.com/ext-js/4-1/#!/api/Ext.chart.series.Pie -cfg标签）。我用过它。 Sencha Touch pie系列没有这样的配置，我也没有在源代码中看到它。你必须重写sencha touch pie系列上的标签生成功能。 [在这里某处]（http://docs.sencha.com/touch/2-1/source/Pie.html#Ext-chart-series-Pie），我现在没有时间去解决它，但通常我会为赏金跳跃。这绝对是可以的。 – Geronimo

好吧，我不知道这是否是最好的方法或没有，但它为我工作，所以花了一些时间挖成煎茶图表库后，该解决方案更容易那么我的预期。

只是注释此行中位于您的应用程序项目touch/src/chart/series/sprite/PieSlice.jsPieSlice.js：

labelCfg.rotationRads = midAngle + Math.atan2(surfaceMatrix.y(1, 0) - surfaceMatrix.y(0, 0), surfaceMatrix.x(1, 0) - surfaceMatrix.x(0, 0));

此行来执行，以旋转的饼图标签的关键作用。

来源

2013-02-08 13:57:31 Eli

@SnK这可能最适合作为应用程序的重写 - 而不是修改框架文件。您只需在您的应用中为[this]的[placeLabel]函数编写覆盖声明（http://docs.sencha.com/touch/2-1/#!/api/Ext.chart.series。 sprite.PieSlice）类与上面写的建议。 – Geronimo

Sencha图表饼图标签旋转

回答

相关问题