问Chrome中的ExtJS 4图表轴显示问题
EN

Stack Overflow用户

提问于 2012-04-03 16:14:57

回答 2查看 843关注 0票数 2

我在使用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
        }
    }]
});
    });