`

extjs 双折线图实现

阅读更多

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双折线图

    在这个特定的场景中,"ExtJs双折线图"是指使用Ext Js库来创建具有两组数据的折线图表。这种图表类型在数据分析和可视化中非常常见,可以用来比较两个变量随时间的变化趋势。 首先,创建一个双折线图需要对Ext Js的...

    ExtJS制作折线图

    在给定的"ExtJS 制作折线图"主题中,我们将深入探讨如何使用ExtJS 的lineChart组件来创建动态、交互式的折线图。 首先,让我们了解什么是折线图。折线图是一种统计图表,通过连接一系列数据点来显示数值的变化趋势...

    extjs动态折线图Demo

    该demo适用于生成动态的折线图,而且是x,y两个维度的动态,如果想修改成一个维度更简单。本例子经过本人亲测通过,保证能使用! 或者查看帖子:http://www.itxiu.net/javascript/20161231/219.html

    functioncharts与extjs结合,做多折线图

    在描述中提到的博文中,作者可能分享了如何将这两者整合,以实现多条折线图的动态展示。通常,这会涉及到以下几个步骤: 1. **引入库**:首先,在HTML文件中引入FusionCharts和ExtJS的库文件,如`FusionCharts.js`...

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

    在ExtJS中,可以创建多种类型的图表,如饼图、直方图和折线图,这些图表对于数据展示和分析至关重要。下面将详细探讨这些图表类型及其在ExtJS中的实现。 首先,让我们来了解饼图(Pie Chart)。饼图是一种常用于...

    EXT创建动态的折线图

    5. **JS代码实现**:在`dynamicLineChart.js`文件中,开发者可能编写了创建和更新动态折线图的代码。这可能包括初始化图表、设置配置、加载数据、监听数据变化以及更新图表等步骤。 6. **优化与性能**:在处理大量...

    extjs4图表绘制之折线图实现方法分析

    本实例主要讲解如何利用EXTJS4的图表功能来实现动态数据的折线图展示,包括从后端获取数据并展示在图表上,以及查询每年各个月份的人数。 首先,我们定义一个名为`ChartLineTest`的类,它继承自`Ext.panel.Panel`,...

    Ext 折线图

    在IT行业中,折线图是一种常见的数据可视化工具,...对于压缩包中的"zline"文件,很可能是包含了一个具体的ExtJS折线图示例代码或者资源,通过查看和研究这个文件,可以进一步提升我们对ExtJS折线图的理解和应用能力。

    EXTJS 折线 chart action 代码示例

    在EXTJS中,折线图(line chart)是一种常见的图表类型,常用于展示趋势或时间序列数据。本篇文章将深入探讨EXTJS折线chart与action交互的代码示例,以及如何通过远程和本地加载数据。 首先,让我们了解EXTJS折线...

    jasper+ireport 折线图、柱状图、网状图等

    主界面:extjs/jasper/pillars.jsp 最近研究了ireport画图形的功能,感觉中间走了很多歪路。想大家不要在重复走别人走过的歪路特此上传源码,供大家参考。还有我用的是oracle数据库 作者:castiel

    EXTjs图开编程EXTJS

    EXTJS中的图形组件是其核心功能之一,这些组件使得开发者能够轻松地在Web页面上展示各种图表,如折线图、柱状图、饼图、散点图等。这些图形不仅美观,而且交互性强,支持动态更新数据,使得数据分析和展示变得更加...

    extjs实现报表

    - **图表集成**:利用ExtJS的Chart组件,可以将数据可视化,如柱状图、折线图和饼图。 - **自定义渲染器(Renderer)**:为列值设置自定义格式或逻辑,增强数据展示效果。 4. **排序与过滤** - **列排序**:允许...

    extjs—chart柱形图 例子

    ExtJS内置了强大的图表绘制功能,可以轻松地创建各种类型的图表,如折线图、饼图、柱状图等。这些图表不仅美观而且交互性强,非常适合用来展示数据和信息。 #### 三、柱形图(Bar Chart)概述 柱形图是ExtJS中一种...

    ExtJs整合Echarts的示例代码

    首先,我们要明白Echarts是一个基于JavaScript的开源图表库,它提供了丰富的图表类型,如折线图、柱状图、饼图等,但不直接支持表格展示。而ExtJs则是一个用于构建桌面Web应用的UI框架,提供强大的组件模型和布局...

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

    本文将深入探讨ExtJS中的ColumnChart(柱状图)、PieChart(饼图)和LineChar(折线图)这三种图表类型的使用方法。 首先,ColumnChart(柱状图)是数据可视化中常见的一种图表类型,它通过竖直的柱子来表示每个...

    extjs.zip包

    6. **图表和图形**:EXTJS提供了多种图表类型,如柱状图、折线图、饼图等,以及SVG和VML图形渲染引擎,用于数据可视化。 7. **Ajax和JSON**:EXTJS内置了与服务器进行异步通信的Ajax功能,支持JSON格式的数据交换,...

    ExtJs实例,富客户端技术经典

    6. **图表和图形**:通过ExtJS的Charts模块,开发者可以创建各种数据可视化图表,如柱状图、折线图、饼图等,帮助用户更好地理解和解析数据。 7. **触摸友好**:随着移动设备的普及,ExtJS还提供了Ext JS Touch版本...

    ExtJs4.rar

    新增的图表组件支持多种图表类型,如折线图、柱状图、饼图等,并提供了丰富的自定义选项,允许开发者根据需求创建出各种复杂的可视化效果。这对于数据分析和展示来说是一大福音。 另外,ExtJS4在事件处理上更加高效...

    EXTJS2 API

    8. **图表(Charts)**:EXTJS2包含一套完整的图表组件,可以创建各种类型的统计图表,如柱状图、折线图、饼图等,用于数据可视化。 9. **工具提示(Tooltips)**:EXTJS2提供了自定义的工具提示功能,可以显示丰富...

Global site tag (gtag.js) - Google Analytics