Ext JS Charts以错误/反向顺序显示Y轴标签

时间:2012-03-31 17:58:07

标签: extjs

以下是我添加的屏幕截图对应的代码。如果您参考代码开头的数据字段,您将看到Y轴上的标签显示错误。

并导入这些libs,这是我在此官方图表预览link中找到的样本字符中的相同导入(zip文件位于文章末尾,其中的条形图也是错!!!):

<link rel="stylesheet" type="text/css" href="../../resources/css/ext.css" />
<script type="text/javascript" src="../../ext-core.js"></script>
<script type="text/javascript" src="../../ext-chart.js"></script>
<script type="text/javascript" src="Bar3.js"></script>

然后我导入了以下库(它们在this sample中导入的库):

<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="Bar3.js"></script>

我得到了正确的结果。

Ext.onReady(function () {
var chart;

var store1 = new Ext.data.JsonStore({
fields:['name', 'data1'],
data: [
    {name:'Jan', data1: 2000},{name:'Feb', data1: 1800},
    {name:'Mar', data1: 1500},{name:'Apr', data1: 1000}
]});


chart = new Ext.chart.Chart({
    renderTo: Ext.get('graphDiv'),
    width: 600,
    height: 400,
    animate: true,
    shadow: true,
    store: store1,
    autoScroll: true,
    axes: [{
        type: 'Numeric',
        position: 'bottom',
        fields: ['data1'],
        label: {
           renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: 'Number of Hits'
    }, {
        type: 'Category',
        position: 'left',
        fields: ['name'],
        reverse: true,
        title: 'Month of the Year'
    }],
    series: [{
        type: 'bar',
        axis: 'bottom',
        highlight: true,
        label: {
            display: 'insideEnd',
            field: 'data1',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
           'text-anchor': 'middle',
           contrast: true
        },
        xField: 'name',
        yField: 'data1'
    }]
});
});

Ext JS Bar Chart

1 个答案:

答案 0 :(得分:2)

extjs 4.0.0的已知错误!只需升级到4.1.x即可解决问题。