Вращение круговой метки в диаграммах 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));
Эта линия выполняет роль ключевой роли для поворота метки вашей круговой диаграммы.