ExtJs3 双折线

来源：互联网发布：网络威胁有哪些编辑：程序博客网时间：2024/05/22 16:05

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

                  }            }]                }    });});

启动后运行效果：

ExtJs双折线图

总结：

掌握series的基本用法。

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