用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来设计和实现各种类型的报表。 1. **ExtJS报表基础** - **数据绑定**:ExtJS支持双向数据绑定,可以轻松地将数据显示在UI上,并实时更新数据变化。 - *...
通过使用ExtJS,我们可以创建一个功能丰富、可定制化的时间轴组件,用于记录和展示时间序列上的关键事件。 以下是一些关于使用ExtJS创建时间轴的关键知识点: 1. **组件创建**:首先,我们需要创建一个自定义组件...
在ExtJs中,日期时间选择控件是开发人员常用的一个组件,它允许用户方便地选择日期和时间,极大地提升了用户体验。本篇文章将深入探讨ExtJs日期时间选择控件的使用、功能以及优化后的特性。 1. **ExtJs日期时间选择...
Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架,用于构建丰富互联网应用程序(RIA)。其中,tabpanel是Extjs中一个常用的控件,用于显示多个面板。设置tabpanel当前活动页签的样式是...
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
例如,我们需要定义`series`来指定数据系列,每个系列包含`type`(类型,这里是'column'),`fields`(数据字段)以及`xField`和`yField`(分别对应X轴和Y轴的字段)。同时,`axes`配置项用于定义坐标轴,包括刻度、...
2. `minValue`和`maxValue`: 分别设置时间选择的最小值和最大值,以确保用户不会选择超出范围的时间。 3. `increment`: 控制时间步进,例如设置为60表示每分钟递增,设置为5表示每5分钟递增。 4. `columns`: 可以...
总之,EXTJS的自动最大化Panel技术提供了一种灵活的方式来创建响应式和动态调整的用户界面,这在开发高质量的Web应用时是非常重要的。通过熟练掌握这一技巧,开发者可以构建出更加适应用户需求的交互式应用。
总之,创建一个简单的ExtJS表格涉及定义数据源、设置列模型和创建Grid面板。通过扩展这些基础,你可以实现更多高级功能,如排序、过滤、分页和行编辑等。在实际开发中,数据通常从服务器异步获取,使用JSON格式,...
通过阅读和理解这个文件,开发者可以更深入地了解EXTJS如何处理多文件上传的细节,并根据自己的需求进行修改和扩展。 总的来说,EXTJS的`MultiFileUploadField` 是一个强大且灵活的多文件上传解决方案,它结合了...
除了基本的渲染和数据获取外,ExtJs还提供了丰富的配置选项来定制表格的行为和外观。 - `autoHeight`: 自动调整高度以适应内容。 - `autoWidth`: 自动调整宽度以适应内容。 - `autoShow`: 是否自动显示组件。 - `...
总结一下,EXTJS中的下拉框(ComboBox)是通过`Ext.form.field.ComboBox`实现的,可以通过设置`store`、`displayField`和`valueField`来定义选项和获取选定值。使用`getValue()`方法可以获取选定的值,而`select`...
在"EXTJS实例"标签下,我们可以找到关于EXTJS3.0树形组件的实践案例,这些示例通常包含了完整的代码结构和运行效果,可以帮助开发者快速理解和应用EXTJS3.0的树形组件及其编辑功能。 页面组件示例中心可能包含了一...
extJs5.0红色皮肤
ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容...ExtJS3 升级到 ExtJS4 需要修改大量代码,需要我们重新学习和适应 ExtJS4 的新特性和变化。
ExtJS是一款基于JavaScript的富客户端应用开发框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者能够构建出复杂的Web应用程序。本压缩包中的“Extjs配置文件和示例文件”是针对ExtJS进行深入学习和实践的...
例如,`NumericAxis`可以设定最小值(minimum)、最大值(maximum)和刻度单位(majorUnit、minorUnit),还有是否始终显示零(alwaysShowZero)。`CategoryAxis`则允许设置分类名称数组(categoryNames),而`...
extjs 自动为必填项增加提示后缀,如题此js代码可以为必填时使用,样例功能为在必填项后增加红色星号,如: 编码*(当然此星色为红色),也可以修改成其它内容符号、文字等
基于ExtJS的工作流设计器,利用了ExtJS的强大组件模型和交互性,为用户提供了一个直观的方式来创建和编辑流程图。这样的设计器通常包括以下关键组成部分: 1. **组件库**:设计师需要一个包含各种工作流元素(如...
- 在ExtJS 3.2和3.3中,DateTimeField通常通过`Ext.form.DateTimeField`类创建,并且可以自定义显示格式、最小值、最大值等属性。 - 示例代码:`var dateTimeField = new Ext.form.DateTimeField({ ... });` - ...