根据周统计- 数据模型:日期    第几周    车牌号     报警类型   报警次数 
2013     1       AA        超速         100
2013     1       AA        疲劳         50
2013     1       AA        劫警         60
2013     1       BB        超速         66
2013     1       BB        疲劳         11
2013     1       BB        劫警          0请问 如何能 根据车牌号 和超速类型 分别显示曲线,  一个曲线图 显示多条曲线,根据车牌号和报警类型分组 分别显示曲线Ext JS图形报表行业数据

解决方案 »

  1.   

    用 fusionchart 实现起来更方便网上大把的资料 示例
      

  2.   


    /*!
     * Ext JS Library 3.2.1
     * Copyright(c) 2006-2010 Ext JS, Inc.
     * [email protected]
     * http://www.extjs.com/license
     */
    Ext.chart.Chart.CHART_URL = '../../resources/charts.swf';Ext.onReady(function(){    var store = new Ext.data.JsonStore({
            fields:['name', 'visits', 'views'],
            data: [
                {name:'Jul 07', visits: 245000, views: 3000000},
                {name:'Aug 07', visits: 240000, views: 3500000},
                {name:'Sep 07', visits: 355000, views: 4000000},
                {name:'Oct 07', visits: 375000, views: 4200000},
                {name:'Nov 07', visits: 490000, views: 4500000},
                {name:'Dec 07', visits: 495000, views: 5800000},
                {name:'Jan 08', visits: 520000, views: 6000000},
                {name:'Feb 08', visits: 620000, views: 7500000}
            ]
        });    // extra extra simple
        new Ext.Panel({
            title: 'ExtJS.com Visits Trend, 2007/2008 (No styling)',
            renderTo: 'container',
            width:500,
            height:300,
            layout:'fit',        items: {
                xtype: 'linechart',
                store: store,
                xField: 'name',
                yField: 'visits',
    listeners: {
    itemclick: function(o){
    var rec = store.getAt(o.index);
    Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
    }
    }
            }
        });    // extra simple
        new Ext.Panel({
            iconCls:'chart',
            title: 'ExtJS.com Visits Trend, 2007/2008 (Simple styling)',
            frame:true,
            renderTo: 'container',
            width:500,
            height:300,
            layout:'fit',        items: {
                xtype: 'linechart',
                store: store,
                url: '../../resources/charts.swf',
                xField: 'name',
                yField: 'visits',
                yAxis: new Ext.chart.NumericAxis({
                    displayName: 'Visits',
                    labelRenderer : Ext.util.Format.numberRenderer('0,0')
                }),
                tipRenderer : function(chart, record){
                    return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
                }
            }
        });    // more complex with a custom look
        new Ext.Panel({
            iconCls:'chart',
            title: 'ExtJS.com Visits and Pageviews, 2007/2008 (Full styling)',
            frame:true,
            renderTo: 'container',
            width:500,
            height:300,
            layout:'fit',        items: {
                xtype: 'columnchart',
                store: store,
                url:'../../resources/charts.swf',
                xField: 'name',
                yAxis: new Ext.chart.NumericAxis({
                    displayName: 'Visits',
                    labelRenderer : Ext.util.Format.numberRenderer('0,0')
                }),
                tipRenderer : function(chart, record, index, series){
                    if(series.yField == 'visits'){
                        return Ext.util.Format.number(record.data.visits, '0,0') + ' visits in ' + record.data.name;
                    }else{
                        return Ext.util.Format.number(record.data.views, '0,0') + ' page views in ' + record.data.name;
                    }
                },
                chartStyle: {
                    padding: 10,
                    animationEnabled: true,
                    font: {
                        name: 'Tahoma',
                        color: 0x444444,
                        size: 11
                    },
                    dataTip: {
                        padding: 5,
                        border: {
                            color: 0x99bbe8,
                            size:1
                        },
                        background: {
                            color: 0xDAE7F6,
                            alpha: .9
                        },
                        font: {
                            name: 'Tahoma',
                            color: 0x15428B,
                            size: 10,
                            bold: true
                        }
                    },
                    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}
                    }
                },
                series: [{
                    type: 'column',
                    displayName: 'Page Views',
                    yField: 'views',
                    style: {
                        image:'bar.gif',
                        mode: 'stretch',
                        color:0x99BBE8
                    }
                },{
                    type:'line',
                    displayName: 'Visits',
                    yField: 'visits',
                    style: {
                        color: 0x15428B
                    }
                }]
            }
        });
    });ext官方给的例子 3.4的也差不多吧
      

  3.   

    网上搜索:uxChartPack
    ext整合fusionchart整合资料