extjs 双折线图实现

youshini

浏览: 219631 次
性别:
来自: 广州

最近访客更多访客>>

xiaguangme

chenglibang

jdzctais

horsehome

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Hibernate

EXT JavaScript CSS HTML

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
                  }
            }]        

        }
    });
});