Question

使用ExtJS 4.0.7时遇到了一个问题。

我正在尝试在数字/类别图表上显示包含两个系列的图表。该图表在Firefox中正确显示，但在使用Chrome（18.0.1025.142）时，x轴标签要么全部堆叠在每个上，要么（在使用旋转时）以指定角度在图表后面呈现。任何想法都将不胜感激。

Firefox中的屏幕截图： Firefox render of chart

Chrome中的屏幕截图： Chrome render of chart

用于生成两者的代码：

    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
        }
    }]
});
    });

Answer 1

Chrome 18似乎存在问题。请参阅此错误：http://code.google.com/p/chromium/issues/detail?id=112713

一位评论者表示，Chrome 19中已修复此问题。

Answer 2

在sencha forum上为4.0.7发布了一些解决方法。您可能也想看看它。

此外，Ext4.1RC1似乎对此问题免疫。

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

2 个答案: