Вращение круговой метки в диаграммах Sencha

Я использую Sencha Touch 2.1 с диаграммами 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',

1 ответ

Решение

Хорошо, я не уверен, что это лучший способ или нет, но он работает для меня, поэтому, потратив некоторое время на изучение библиотеки диаграмм 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));

Эта линия выполняет роль ключевой роли для поворота метки вашей круговой диаграммы.

Другие вопросы по тегам