[Ext JS 4] 实战之Chart 坐标控制（单坐标，双坐标）

前言

在Extjs 中， 单一的 Column Chart 的展示效果如上。

定义的步骤如下：

1. 创建一个 Ext.chart.Chart

2. 创建两个坐标轴， axes

一个 Category 类型的横坐标用来显示日期

一个Numeric 类型的纵坐标用来显示数据

3. 配置显示的图 series

配置 column 类型的柱状图。

具体代码如下：

Insert title here

<script type="text/javascript" src="../lib/extjs/ext-all.js"></script>

<script>
Ext.onReady(function(){
    window.generateData = function(n, floor){
        var data = [],
            p = (Math.random() *  11) + 1,
            i;
            
        floor = (!floor && floor !== 0)? 20 : floor;
        
        for (i = 0; i 

如何设置坐标轴的长度

针对上面的例子， 坐标轴的长度是Extjs根据数据大小自动运算并设置的。

如果需要手动定义这个长度的话，改如何设置呢？

对于Numeric这样的坐标轴来说， 有maximum 和 minimun 这样的参数可以配置。

而且配置也很简单了， 就不多介绍了。

这里只是对红色的部分做一个伏笔（这种设置对于配置 堆叠的图形不使用）

多个图形， 两个纵坐标轴

有的状况下， 可能会使用多个图形，

因为图形的范围不同，可能需要使用两个纵坐标轴。

类似的情景可以是这样：

有三个图， 两个柱状图， 一个折线图

折线图和柱状图的数据范围或是单位可能不同。