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

折線圖除了可以看資料的波動情況外，還可以分析資料的吻合情況。