Question

我在浏览器中使用ext do draw chart，我遇到了一个问题：

我想在一个图表中绘制两行，所以我使用ColumnChart，这是我的数据：

var store = new Ext.data.JsonStore({
    fields:['name', 'visits', 'views'],
    data: [
        {name:'Jul 07', visits: 245, views: 3000000},
        {name:'Aug 07', visits: 240, views: 3500000},
        {name:'Sep 07', visits: 355, views: 4000000},
        {name:'Oct 07', visits: 375, views: 4200000},
        {name:'Nov 07', visits: 490, views: 4500000},
        {name:'Dec 07', visits: 495, views: 5800000},
        {name:'Jan 08', visits: 520, views: 6000000},
        {name:'Feb 08', visits: 620, views: 7500000}
    ]
});

由于访问数据远远少于观看次数。

所以回复访问的行太靠近xaxis了，有什么想法吗？

alt text

感谢您的回复，我决定让它们达到相同的比例。顺便说一句，我有另一个问题，希望你能提出一些建议：

alt text

Answer 1

要在ExtJs4中创建具有不同比例的yAxis，您可以使用左右轴。

xtype: 'chart',
width: 400,
height: 300,
store: myStore,
axes: [
    {
        //title: 'Size',
        type: 'Numeric',
        position: 'left',
        fields: ['sizeInBytes'],
        minimum: 0
    },{ /// NEW yAxis Scale ///
        //title: 'Run Time',
        type: 'Numeric',
        position: 'right',
        fields: ['runTimeMin'],
        minimum: 0
    },{
        //title: 'Date',
        type: 'Time',
        position: 'bottom',
        fields: ['startTime'],
        dateFormat: 'm/d/y h:i A'
    }
],
series: [
    {
        type: 'column',
        axis: 'left',
        xField: 'startTime',
        yField: 'sizeInBytes'
    },{ /// Specify the Axis and data field to use ///
        type: 'line',
        axis: 'right',// <----
        xField: 'startTime',
        yField: 'runTimeMin' // <----
    }
]

Answer 2

据我所知，有两种选择： 1.添加第二个Y轴，具有不同的比例 2.向下缩放较大的值

ExtJS图表 - 据我所知 - 不提供添加第二轴的功能，但有解决方法（参见http://www.sencha.com/forum/showthread.php?72557-Ext-JS-Charts-Second-Y-Axis-Scale）

因此，最简单的方法是简单地将较大的值除以10,000，以使两个刻度内联，然后记下它们是数千个。

extjs图表问题

2 个答案: