1 建立一个chart的html文件,即chart.html
<html>
<head>
<title>chart</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="Js/return_board/chart.js"></script>
</head>
<body>
<div id='container'></div>
</body>
</html>
2 建立文件charts.js
Ext.chart.Chart.CHART_URL = 'Extjs/resources/charts.swf';
Ext.onReady(function(){
var data= [
{name:'Jul 07', visits: 245000, views: 300000},
{name:'Aug 07', visits: 240000, views: 350000},
{name:'Sep 07', visits: 355000, views: 400000},
{name:'Oct 07', visits: 375000, views: 420000},
{name:'Nov 07', visits: 490000, views: 450000},
{name:'Dec 07', visits: 495000, views: 580000},
{name:'Jan 08', visits: 520000, views: 600000},
{name:'Feb 08', visits: 620000, views: 750000}
]
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.JsonReader({}, [
{name: 'name'},
{name: 'visits',type:'int'},
{name: 'views',type:'int'}
])
});
store.load();
// extra extra simple
new Ext.Panel({
title: 'ExtJS.com Visits Trend',
applyTo: 'container',
width:500,
height:300,
layout:'fit',
items:{
xtype: 'linechart',
store: store,
xField: 'name',
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
}
},
series: [{//列
type: 'line', //类型可以改变(线)
displayName: 'Good',
yField: 'views',
style: {
color:0x00BB00
}
},{
type:'line',
displayName: 'Visits',
yField: 'visits',
style: {
color: 0xE1E100
}
}]
}
});
});
3 运行的时候启动自己已有的本地服务器,若没有启动,则运行效果如下:
启动后运行效果:
总结:
掌握series的基本用法。
折线图除了可以看数据的波动情况外,还可以分析数据的吻合情况。
分享到:
相关推荐
在这个特定的场景中,"ExtJs双折线图"是指使用Ext Js库来创建具有两组数据的折线图表。这种图表类型在数据分析和可视化中非常常见,可以用来比较两个变量随时间的变化趋势。 首先,创建一个双折线图需要对Ext Js的...
在给定的"ExtJS 制作折线图"主题中,我们将深入探讨如何使用ExtJS 的lineChart组件来创建动态、交互式的折线图。 首先,让我们了解什么是折线图。折线图是一种统计图表,通过连接一系列数据点来显示数值的变化趋势...
该demo适用于生成动态的折线图,而且是x,y两个维度的动态,如果想修改成一个维度更简单。本例子经过本人亲测通过,保证能使用! 或者查看帖子:http://www.itxiu.net/javascript/20161231/219.html
在描述中提到的博文中,作者可能分享了如何将这两者整合,以实现多条折线图的动态展示。通常,这会涉及到以下几个步骤: 1. **引入库**:首先,在HTML文件中引入FusionCharts和ExtJS的库文件,如`FusionCharts.js`...
在ExtJS中,可以创建多种类型的图表,如饼图、直方图和折线图,这些图表对于数据展示和分析至关重要。下面将详细探讨这些图表类型及其在ExtJS中的实现。 首先,让我们来了解饼图(Pie Chart)。饼图是一种常用于...
5. **JS代码实现**:在`dynamicLineChart.js`文件中,开发者可能编写了创建和更新动态折线图的代码。这可能包括初始化图表、设置配置、加载数据、监听数据变化以及更新图表等步骤。 6. **优化与性能**:在处理大量...
本实例主要讲解如何利用EXTJS4的图表功能来实现动态数据的折线图展示,包括从后端获取数据并展示在图表上,以及查询每年各个月份的人数。 首先,我们定义一个名为`ChartLineTest`的类,它继承自`Ext.panel.Panel`,...
在IT行业中,折线图是一种常见的数据可视化工具,...对于压缩包中的"zline"文件,很可能是包含了一个具体的ExtJS折线图示例代码或者资源,通过查看和研究这个文件,可以进一步提升我们对ExtJS折线图的理解和应用能力。
在EXTJS中,折线图(line chart)是一种常见的图表类型,常用于展示趋势或时间序列数据。本篇文章将深入探讨EXTJS折线chart与action交互的代码示例,以及如何通过远程和本地加载数据。 首先,让我们了解EXTJS折线...
主界面:extjs/jasper/pillars.jsp 最近研究了ireport画图形的功能,感觉中间走了很多歪路。想大家不要在重复走别人走过的歪路特此上传源码,供大家参考。还有我用的是oracle数据库 作者:castiel
EXTJS中的图形组件是其核心功能之一,这些组件使得开发者能够轻松地在Web页面上展示各种图表,如折线图、柱状图、饼图、散点图等。这些图形不仅美观,而且交互性强,支持动态更新数据,使得数据分析和展示变得更加...
- **图表集成**:利用ExtJS的Chart组件,可以将数据可视化,如柱状图、折线图和饼图。 - **自定义渲染器(Renderer)**:为列值设置自定义格式或逻辑,增强数据展示效果。 4. **排序与过滤** - **列排序**:允许...
ExtJS内置了强大的图表绘制功能,可以轻松地创建各种类型的图表,如折线图、饼图、柱状图等。这些图表不仅美观而且交互性强,非常适合用来展示数据和信息。 #### 三、柱形图(Bar Chart)概述 柱形图是ExtJS中一种...
首先,我们要明白Echarts是一个基于JavaScript的开源图表库,它提供了丰富的图表类型,如折线图、柱状图、饼图等,但不直接支持表格展示。而ExtJs则是一个用于构建桌面Web应用的UI框架,提供强大的组件模型和布局...
本文将深入探讨ExtJS中的ColumnChart(柱状图)、PieChart(饼图)和LineChar(折线图)这三种图表类型的使用方法。 首先,ColumnChart(柱状图)是数据可视化中常见的一种图表类型,它通过竖直的柱子来表示每个...
6. **图表和图形**:EXTJS提供了多种图表类型,如柱状图、折线图、饼图等,以及SVG和VML图形渲染引擎,用于数据可视化。 7. **Ajax和JSON**:EXTJS内置了与服务器进行异步通信的Ajax功能,支持JSON格式的数据交换,...
6. **图表和图形**:通过ExtJS的Charts模块,开发者可以创建各种数据可视化图表,如柱状图、折线图、饼图等,帮助用户更好地理解和解析数据。 7. **触摸友好**:随着移动设备的普及,ExtJS还提供了Ext JS Touch版本...
新增的图表组件支持多种图表类型,如折线图、柱状图、饼图等,并提供了丰富的自定义选项,允许开发者根据需求创建出各种复杂的可视化效果。这对于数据分析和展示来说是一大福音。 另外,ExtJS4在事件处理上更加高效...
8. **图表(Charts)**:EXTJS2包含一套完整的图表组件,可以创建各种类型的统计图表,如柱状图、折线图、饼图等,用于数据可视化。 9. **工具提示(Tooltips)**:EXTJS2提供了自定义的工具提示功能,可以显示丰富...