extjs 雷达图 坐标文字排列方式,旋转角度求大神解答
extjs吧
全部回复
仅看楼主
level 1
爱上鸟儿 楼主
雷达图,显示占比,目前左侧坐标文字描述被挡住,分析原因为宽度和高度自适应,宽度不够宽只显示部分文字,希望左侧和右侧坐标文字可以旋转90度,代码如下:
Ext.define('cs.view.ReportChart',{
extend : 'Ext.chart.Chart',
alias: 'widget.ReportChart',
requires : ['cs.store.ReportChartStore'],
store : Ext.create('cs.store.ReportChartStore'),
initComponent : function(){
Ext.apply(this, {
id : 'reportLossFormChart',
margin: '0 0 0 0',
insetPadding: 20,
flex: 1.2,
animate: true,
store: Ext.create('cs.store.ReportChartStore') ,
theme: 'Blue',
axes: [{
steps: 5,
type: 'Radial',
position: 'radial',
maximum: 100,
fields: ['Name'],
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'radar',
xField: 'Name',
yField: 'Data',
showInLegend: false,
showMarkers: true,
title: '',
markerConfig: {
radius: 4,
size: 4,
fill: 'rgb(69,109,159)'
},
style: {
fill: 'rgb(194,214,240)',
opacity: 0.5,
'stroke-width': 0.5
},
// label: {
// display: 'outside',
// field : 'Name',
// font: '12px Helvetica, sans-serif',
// rotate: {
// degrees: 45
// }
// },
tips:{
trackMouse: true,
height: 24,
width: 60,
renderer: function(storeItem, item){
this.setTitle((0==storeItem.get('Data')?"0":storeItem.get('Data')));
}
}
}]
});
this.callParent(arguments);
}
})
2013年12月02日 08点12分 1
level 1
爱上鸟儿 楼主
json数据如下:
var name, series, i, l, items, json = [
{
'Name': 'icontran',
'Data': cronLossPercent
}, {
'Name': 'rcontranrcontran',
'Data': ironLossPercent
}, {
'Name': 'linelosspercent',
'Data': lineLossPercent
}, {
'Name': 'otherlosspercent',
'Data': otherLossPercent
}];
Ext.getCmp("reportLossFormChart").store.loadData(json)
2013年12月02日 08点12分 2
level 1
可以试试要转的文字加个属性,orientation:* vertical*
2014年07月30日 02点07分 3
1