ExtJs3 双折线-蒲公英云

ExtJs3 双折线

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

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

<</span>html>
<</span>head>
<</span>title>chart</</span>title>
    <</span>meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <</span>link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css" /> <</span>script type="text/javascript" src="ExtJs/adapter/ext/ext-base.js"></</span>script> <</span>script type="text/javascript" src="ExtJs/ext-all.js"></</span>script> <</span>script type="text/javascript" src="Js/return_board/chart.js"></</span>script> </</span>head> <</span>body> <</span>div id='container'></</span>div> </</span>body> </</span>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
}
            }]        
        }
    });
});