`
shishui527
  • 浏览: 11121 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

ExtJS报表设置Y轴的最小值和最大值

EXT 
阅读更多

用ExtJS生成报表的时候,如果y轴的值太小的话就看不到数据了,就会造成一种假象,给人一种错觉就是出错了,只看到x轴,看不到y轴和报表里面的内容,其实报表已经生成了,只是看不到而已,所以需要修改y轴的最小值和最大值。

function generateData() {
 var data = [];
 for (var i = 0; i < 12; ++i) {
  data.push([Date.monthNames[i],
    (Math.floor(Math.random() * 11) + 1) * 100]);
 }
 return data;
}

Ext.onReady(function() {
   var store = new Ext.data.ArrayStore({
      fields : ['month', 'hits'],
      data : generateData()
     });

   new Ext.Panel({
      width : 700,
      height : 400,
      renderTo : document.body,
      title : 'Column Chart with Reload - Hits per Month',
      tbar : [{
         text : 'Load new data set',
         handler : function() {
          store.loadData(generateData());
         }
        }],
      items : {
       xtype : 'columnchart',
       store : store,
       yField : 'hits',
       url : '../../resources/charts.swf',
       xField : 'month',
       xAxis : new Ext.chart.CategoryAxis({
          title : 'Month'
         }),
       yAxis : new Ext.chart.NumericAxis({
          title : 'Hits',
          minimum : 1,
          maximum : 1500
         }),
       extraStyle : {
        xAxis : {
         labelRotation : -90
        }
       }
      }
     });
  });

其中红色字体部分用于控制Y轴的最小值和最大值。

分享到:
评论

相关推荐

    extjs实现报表

    在"extjs实现报表"这个主题中,我们将深入探讨如何利用ExtJS来设计和实现各种类型的报表。 1. **ExtJS报表基础** - **数据绑定**:ExtJS支持双向数据绑定,可以轻松地将数据显示在UI上,并实时更新数据变化。 - *...

    使用extjs写的时间轴

    通过使用ExtJS,我们可以创建一个功能丰富、可定制化的时间轴组件,用于记录和展示时间序列上的关键事件。 以下是一些关于使用ExtJS创建时间轴的关键知识点: 1. **组件创建**:首先,我们需要创建一个自定义组件...

    ExtJs日期时间选择控件

    在ExtJs中,日期时间选择控件是开发人员常用的一个组件,它允许用户方便地选择日期和时间,极大地提升了用户体验。本篇文章将深入探讨ExtJs日期时间选择控件的使用、功能以及优化后的特性。 1. **ExtJs日期时间选择...

    Extjs4.2 设置tabpanel当前活动页签的样式

    Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序(RIA)。其中,tabpanel是Extjs中一个常用的控件,用于显示多个面板。设置tabpanel当前活动页签的样式是...

    extjs中设置grid默认行高及换行

    Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...

    extjs中的报表【ColumnChart、PieChar、LineChar的用法】

    例如,我们需要定义`series`来指定数据系列,每个系列包含`type`(类型,这里是'column'),`fields`(数据字段)以及`xField`和`yField`(分别对应X轴和Y轴的字段)。同时,`axes`配置项用于定义坐标轴,包括刻度、...

    EXTJS时间控件年月日时分秒

    2. `minValue`和`maxValue`: 分别设置时间选择的最小值和最大值,以确保用户不会选择超出范围的时间。 3. `increment`: 控制时间步进,例如设置为60表示每分钟递增,设置为5表示每5分钟递增。 4. `columns`: 可以...

    Extjs自动最大化panel

    总之,EXTJS的自动最大化Panel技术提供了一种灵活的方式来创建响应式和动态调整的用户界面,这在开发高质量的Web应用时是非常重要的。通过熟练掌握这一技巧,开发者可以构建出更加适应用户需求的交互式应用。

    extjs 简单表格

    总之,创建一个简单的ExtJS表格涉及定义数据源、设置列模型和创建Grid面板。通过扩展这些基础,你可以实现更多高级功能,如排序、过滤、分页和行编辑等。在实际开发中,数据通常从服务器异步获取,使用JSON格式,...

    EXTJS 多文件上传

    通过阅读和理解这个文件,开发者可以更深入地了解EXTJS如何处理多文件上传的细节,并根据自己的需求进行修改和扩展。 总的来说,EXTJS的`MultiFileUploadField` 是一个强大且灵活的多文件上传解决方案,它结合了...

    ExtJs表格点击超链接获取行的值

    除了基本的渲染和数据获取外,ExtJs还提供了丰富的配置选项来定制表格的行为和外观。 - `autoHeight`: 自动调整高度以适应内容。 - `autoWidth`: 自动调整宽度以适应内容。 - `autoShow`: 是否自动显示组件。 - `...

    EXTJS 选下拉框,并取得下拉框的值

    总结一下,EXTJS中的下拉框(ComboBox)是通过`Ext.form.field.ComboBox`实现的,可以通过设置`store`、`displayField`和`valueField`来定义选项和获取选定值。使用`getValue()`方法可以获取选定的值,而`select`...

    EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0

    在"EXTJS实例"标签下,我们可以找到关于EXTJS3.0树形组件的实践案例,这些示例通常包含了完整的代码结构和运行效果,可以帮助开发者快速理解和应用EXTJS3.0的树形组件及其编辑功能。 页面组件示例中心可能包含了一...

    extJs5.0红色皮肤

    extJs5.0红色皮肤

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容...ExtJS3 升级到 ExtJS4 需要修改大量代码,需要我们重新学习和适应 ExtJS4 的新特性和变化。

    Extjs配置文件和示例文件

    ExtJS是一款基于JavaScript的富客户端应用开发框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者能够构建出复杂的Web应用程序。本压缩包中的“Extjs配置文件和示例文件”是针对ExtJS进行深入学习和实践的...

    ExtJS_3.0_Class Diagram

    例如,`NumericAxis`可以设定最小值(minimum)、最大值(maximum)和刻度单位(majorUnit、minorUnit),还有是否始终显示零(alwaysShowZero)。`CategoryAxis`则允许设置分类名称数组(categoryNames),而`...

    extjs 自动为必填项增加提示后缀

    extjs 自动为必填项增加提示后缀,如题此js代码可以为必填时使用,样例功能为在必填项后增加红色星号,如: 编码*(当然此星色为红色),也可以修改成其它内容符号、文字等

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    基于ExtJS的工作流设计器,利用了ExtJS的强大组件模型和交互性,为用户提供了一个直观的方式来创建和编辑流程图。这样的设计器通常包括以下关键组成部分: 1. **组件库**:设计师需要一个包含各种工作流元素(如...

    extjs3.2、3.3 时间控件 日期控件扩展

    - 在ExtJS 3.2和3.3中,DateTimeField通常通过`Ext.form.DateTimeField`类创建,并且可以自定义显示格式、最小值、最大值等属性。 - 示例代码:`var dateTimeField = new Ext.form.DateTimeField({ ... });` - ...

Global site tag (gtag.js) - Google Analytics