代码改变世界

ExtJs双折线图

2010-07-08 22:41  夜雨瞳  阅读(3169)  评论(0)  编辑  收藏  举报

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的基本用法。

折线图除了可以看数据的波动情况外，还可以分析数据的吻合情况。