[Ext JS 4] 实战之Chart 坐标控制(单坐标,双坐标)
程序员文章站
2022-05-18 08:29:28
前言在Extjs 中, 单一的 Column Chart 的展示效果如上。定义的步骤如下:1. 创建一个 Ext.chart.Chart2. 创建两个坐标轴, axes一个 Ca...
前言
在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 这样的参数可以配置。
而且配置也很简单了, 就不多介绍了。
这里只是对红色的部分做一个伏笔(这种设置对于配置 堆叠的图形不使用)
有的状况下, 可能会使用多个图形,
因为图形的范围不同,可能需要使用两个纵坐标轴。
类似的情景可以是这样:
有三个图, 两个柱状图, 一个折线图
折线图和柱状图的数据范围或是单位可能不同。
上一篇: jQuery Validation让验证变得如此容易(二)
下一篇: laravel容器学习体会