Я столкнулся с проблемой при использовании ExtJS 4.0.7.
Я пытаюсь отобразить диаграмму с двумя сериями на числовой диаграмме / диаграмме категории. Диаграмма корректно отображается в Firefox, но при использовании Chrome (18.0.1025.142) все метки оси x либо накладываются друг на друга, либо (при использовании поворота) отображаются за диаграммой под указанным углом. Любые идеи будут оценены.
Снимок экрана в Firefox:
Снимок экрана в Chrome:
И код, который используется для генерации обоих:
Ext.require(['Ext.chart.*']);
Ext.onReady(function() {
var iChartWidth = 800; // Defines chart width
var iChartHeight = 550; // Defines chart height
Ext.define('RulesCreatedModel',{
extend:'Ext.data.Model',
fields:[
{name:'sHourName', type:'string'},
{name:'User_2', type:'number'},
{name:'User_1', type:'number'},
]
});
var RulesCreatedStore = Ext.create('Ext.data.Store',{
id:'RulesCreatedStore',
model:'RulesCreateModel',
fields: [ 'sHourName','dayNum','hour','User_2','User_1'],
data:[{
'sHourName':'3pm',
'User_1':82,
'User_2':56
},{
'sHourName':'4pm',
'User_1':39,
'User_2':44
},{
'sHourName':'5pm',
'User_1':80,
'User_2':14
},{
'sHourName':'6pm',
'User_1':55,
'User_2':0,
},{
'sHourName':'7pm',
'User_1':36,
'User_2':0,
},{
'sHourName':'8pm',
'User_1':66,
'User_2':0
},{
'sHourName':'9pm',
'User_1':39,
'User_2':0,
},{
'sHourName':'10pm',
'User_1':0,
'User_2':0
},{
'sHourName':'11pm',
'User_1':0,
'User_2':0
},{
'sHourName':'12am',
'User_1':0,
'User_2':0
},{
'sHourName':'1am',
'User_1':0,
'User_2':0
},{
'sHourName':'2am',
'User_1':0,
'User_2':0
},{
'sHourName':'3am',
'User_1':0,
'User_2':0
},{
'sHourName':'4am',
'User_1':0,
'User_2':0
},{
'sHourName':'5am',
'User_1':0,
'User_2':0
},{
'sHourName':'6am',
'User_1':0,
'User_2':0
},{
'sHourName':'7am',
'User_1':0,
'User_2':1
},{
'sHourName':'8am',
'User_1':0,
'User_2':99
},{
'sHourName':'9am',
'User_1':0,
'User_2':28
},{
'sHourName':'10am',
'User_1':0,
'User_2':28
},{
'sHourName':'11am',
'User_1':0,
'User_2':153
},{
'sHourName':'12pm',
'User_1':0,
'User_2':58
},{
'sHourName':'1pm',
'User_1':0,
'User_2':42
},{
'sHourName':'2pm',
'User_1':20,
'User_2':10
}]
});
Ext.create('Ext.chart.Chart',{
id: 'RulesWrittenChart',
renderTo: 'StatCharts_Display',
width: iChartWidth,
height: iChartHeight,
animate: true,
store: RulesCreatedStore,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['User_2','User_1'],
title: 'Rules Written',
grid: true
},{
type: 'Category',
position: 'bottom',
fields: ['sHourName'],
title: 'Hour',
grid: false,
label: {
rotate: {
degrees: 315
}
}
}],
series: [{
type: 'line',
axis: 'left',
xField: 'sHourName',
yField: 'User_2',
highlight: {
size: 3,
radius: 3
}
},{
type: 'line',
axis: 'left',
xField: 'sHourName',
yField: 'User_1',
highlight: {
size: 3,
radius: 3
}
}]
});
});