4

Sencha Touch 2.1 と Charts 1.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 に答える