4

我正在使用带有 Charts 1.1 的 Sencha Touch 2.1 来显示一些数据。

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

饼图示例

我希望标签保持在现在的位置，但我希望它们是水平的（不旋转）。

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',
4

1 回答 1

2

好的，我不确定这是否是最好的方法，但它对我有用，所以在花一些时间研究 sencha 图表库之后，解决方案比我预期的要容易。

PieSlice.js只需在 touch/src/chart/series/sprite/PieSlice.js您的应用项目中注释此行：

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

这条线作为旋转饼图标签的关键角色。

于 2013-02-08T13:57:31.493 回答