ExtJs3 双折线

小咪咪 2024-02-19 16:15 28阅读 0赞

1建立一个chart的html文件，即chart.html

[![复制代码][copycode.gif]][copycode.gif 1]

<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-75(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'));
                    }
                },

//添加线条的说明   chartStyle: {
                       padding: 10,
                            animationEnabled: true,   
                            legend:{   //series显示在哪里  右边
                            display: "right"
                            },
                            //添加竖形线条
                            xAxis: {
                                    color: 0x69aBc8,
                                    majorTicks: {color: 0x69aBc8, length: 4},
                                    minorTicks: {color: 0x69aBc8, length: 2},
                                    majorGridLines: {size: 1, color: 0xeeeeee}
                                    },
                            yAxis: {
                                    color: 0x69aBc8,
                                    majorTicks: {color: 0x69aBc8, length: 4},
                                    minorTicks: {color: 0x69aBc8, length: 2},
                                    majorGridLines: {size: 1, color: 0xdfe8f6}
                                    }
                            },

extraStyle: {
    				    xAxis: {
    						//顺时针旋转-75度
    				                labelRotation: -75   
    				    },
    				    yAxis:{
    				           //y轴title顺时针旋转-90度

titleRotation: -90 
    				     }
    			},
                series: [{
          //列

type: 'line', //类型可以改变（线）
                      displayName: 'Good',
                      yField: 'views',
                      style: {

size: 7,//设定线条宽度
                          color:0x00BB00
                      }
                  },{
                      type:'line',
                      displayName: 'Visits',
                      yField: 'visits',
                      style: {

size: 7,//设定线条宽度
                          color: 0xE1E100

}
                }]        
            }
        });
    });

启动后运行效果：

![ExtJs双折线图][ExtJs]

总结：

掌握series的基本用法。

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

[copycode.gif]: http://common.cnblogs.com/images/copycode.gif
[copycode.gif 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/6b88b68ba51143f2bd348bc2d4102949.png
[ExtJs]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3930f61b05a5429b864ea833d9c7fd84.png