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

Ext Js chart

阅读更多
对于一个ext菜鸟的学习者,首先想的是怎么入门。入门的基本模型要出来
创建chart表的步骤
Ext.define('aa',{
extend:'Ext.data.Model',
fields:['temp','date']
});
var store = Ext.create('Ext.data.Store',{
model:'aa',
data:[
{temp:12,date:1},
{temp:21,date:2},
{temp:33,date:3},
{temp:47,date:4}

]
});
Ext.create('Ext.chart.Chart',{
renderTo:Ext.getBody(),
width:300,
height:300,
store:store,
theme: 'Green',
axes:[
{
title:'temp',
type:'Numeric',
position:'left',
fields:['temp'],

},
{
title:'date',
type:'Category',
position:'bottom',
fields:['date'],
}
],
series:[{
type:'line',
xField:'date',
yField:'temp'
}
]

});

1.创建一个模型,表示将要显示在图标上的数据,如上aaModel
2.创建一个store
3.创建一个图标对象Ext.chart.Chart
4,配置轴,axes是定义图表数据点边界的线,例子中使用了常用的配置之一轴配置,x轴,y轴
5.配置序列。series是负责数据仓库中的数据点视觉呈现
分享到:
评论

相关推荐

    ext集成chart

    "ext集成chart"是指将ExtJS与图表库(如Sencha Ext JS的Charts模块或者第三方库如Highcharts)结合,以展示数据可视化功能。在Web应用中,图表是一种直观、有效的数据展示方式,有助于用户理解复杂的信息。 **集成...

    EXT piechart,grid,和chart的实例

    EXT是Sencha公司开发的一个强大的JavaScript库,主要用于构建富客户端应用程序。它提供了丰富的组件和功能,包括数据绑定、布局管理、图表以及网格等。在"EXT piechart,grid, and chart的实例"中,我们将深入探讨EXT...

    Ext js 资源大全

    Ext JS 是一种基于 JavaScript 的富客户端应用框架,用于构建功能丰富的、交互性强的Web应用程序。这个资源大全包含了一些关键的学习资料,将有助于深入理解和掌握Ext JS的精髓。 首先,我们来看"EXT学习文档 .doc...

    Ext js Xtype

    Ext JS是一个功能丰富的JavaScript框架,用于构建交互式的Web应用程序。它提供了大量的UI组件,这些组件都遵循一定的生命周期,包括创建、渲染和销毁。Xtype在Ext JS中扮演着至关重要的角色,它是组件类型的标识符,...

    Ext.ux.GoogleChart extjs插件

    在使用Ext.ux.GoogleChart插件时,开发者需要首先确保已经引入了Google Charts的JavaScript库,然后通过ExtJS的组件模型创建和配置实例。例如,你可以这样创建一个简单的柱状图: ```javascript var chart = Ext....

    Ext3.0 动态数据 Chart 初探

    Ext JS是一个强大的JavaScript库,专为构建富客户端应用程序设计,其图表组件(Chart)功能强大,支持丰富的图表类型和动态数据更新。本文将深入探讨Ext3.0版本中的动态数据Chart特性。 首先,我们需要了解Ext JS ...

    Ext 中文 API 和 ext js例子

    Ext JS 是一个强大的JavaScript库,主要用于构建富客户端的Web应用程序,尤其在数据网格、图表、表单和用户界面组件方面表现出色。它基于MVC(Model-View-Controller)架构,提供了一套完整的框架,帮助开发者创建...

    Practical Ext JS 4

    Ext JS 4提供了丰富的数据组件,如表格(Grid)、树形控件(Tree)和图表(Chart)等,这一部分将会教导读者如何使用这些组件来展示数据。 6. **数据控件**:本书可能深入讲解了Ext JS中的数据控件,如Store和Model...

    EXtjs 统计图 饼图 直方图 和折线图

    在ExtJS中,饼图可以通过`Ext.chart.Chart`类和`Ext.chart.series.Pie`系列配置来创建。你可以设置各个扇区的颜色、标签和值,还可以添加交互性,如点击扇区时显示详细信息。例如,你可以通过以下代码创建一个简单的...

    ext3.*画图的例子

    `ext3.*` 指的是Ext JS库的第三大版本,这是一个流行的JavaScript框架,用于构建富客户端应用程序,包括各种图表组件。本例子将关注如何使用Ext JS 3.x版本创建柱状图,包括设置固定值和动态从后台获取数据来绘制...

    ext整理 ext整理 ext整理

    EXT的核心是EXT JS,一个用于创建交互式Web应用的JavaScript框架。下面将详细讨论EXT的相关知识点。 一、EXT JS框架 EXT JS是一个基于JavaScript的开源框架,由Sencha公司开发。它的设计目标是为Web开发者提供一套...

    Ext用户扩展控件---------googlechart 利用google画图

    Ext用户扩展控件——Google Chart,是一种将Google的图表服务与EXTJS框架相结合的技术,用于在Web应用中创建丰富的、动态的数据可视化效果。EXTJS是一个强大的JavaScript库,它提供了丰富的用户界面组件,而Google ...

    ext4.0生成图形报表(柱形、折线、饼状)

    `deposit.js`很可能是EXT4.0应用中的主要JavaScript文件,负责定义组件、处理数据和创建图表。JS文件通常包含了对EXT4.0 API的调用,用于定义图表的各种配置,如系列、轴、颜色等,并将数据绑定到图表上。另一方面,...

    Ext JS 6 By Example

    ### Ext JS 6 By Example #### 一、书籍概述 《Ext JS 6 By Example》是一本详尽介绍如何利用Ext JS 6框架构建高效、功能丰富的Web应用程序的专业书籍。本书由作者Anand Dayalan撰写,由Packt Publishing出版。 #...

    Extjs4.2 Chart柱状图

    在ExtJS 4.2中创建柱状图,首先你需要引入相关的类库,包括`Ext.chart.*`,这通常通过在页面中加载相应的CSS和JavaScript文件来实现。接下来,定义一个包含数据的Store,这个Store将提供图表的数据源。数据可以是...

    在ext中使用fusionChart时文件

    - **uxchart.js, uxflash.js, uxfusion.js, uxmedia.js**:这些都是EXT的扩展(UX)组件,它们为EXT提供了对FusionCharts的支持。uxchart.js是主扩展文件,可能包含了FusionCharts与EXT集成的核心逻辑,其他文件如...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    ext 学习资料

    为了解决这些问题,各种JavaScript框架应运而生,其中Ext JS因其强大的功能和易用性成为了众多开发者的选择之一。 **学习资料来源:** 本篇内容基于一位经验丰富的开发者分享的学习资料——《Ext JS 6 By Example》...

    ext可视化编辑工具

    例如,它可能包含对EXT Grid、EXT Form、EXT Chart等组件的深度定制支持,以及对EXT数据存储和远程通信API的直观配置选项。 在提供的文件“appengine-java-sdk-1.2.0”中,我们可以推测这可能是Google App Engine的...

Global site tag (gtag.js) - Google Analytics