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

Я использую 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',

extjs sencha-touch sencha-charts sencha-touch-2 sencha-touch-2.1
person SnK    schedule 14.01.2013    source источник
comment
Я не уверен, что вы можете... Label имеет параметр конфигурации rotationRads, но по умолчанию он равен нулю (он взят из sprite.Text) и, скорее всего, изменяется внутри круговой диаграммы при ее вращении. Вот почему он может повторно вращать метки при вращении диаграммы. Однако удачи.   -  person Jordan Kasper    schedule 07.02.2013
comment
Это довольно просто сделать для круговых диаграмм ExtJS с отображаемым свойством здесь. Я использовал его. В серии Sencha Touch pie такого конфига нет, в исходниках я его тоже не видел. Вам придется переопределить функцию генерации меток в серии сенсорных кругов sencha. Где-то здесь, У меня нет времени, чтобы решить это прямо сейчас, но обычно я бы прыгнул за наградой. Хотя это определенно выполнимо.   -  person egerardus    schedule 07.02.2013

Ответы (1)


arrow_upward
2
arrow_downward

Хорошо, я не уверен, лучший это способ или нет, но он работает для меня, поэтому, потратив некоторое время на изучение библиотеки диаграмм сенчи, решение оказалось проще, чем я ожидал.

Просто прокомментируйте эту строку в 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));

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

person Eli    schedule 08.02.2013
comment
@SnK Это, вероятно, лучше всего сработает как переопределение в приложении, а не изменение файлов фреймворка. Вам просто нужно написать объявление переопределения в своем приложении для функции placeLabel этот класс с предложением, написанным выше. - person egerardus; 09.02.2013