noriri
noriri
2009-09-03 13:58
浏览 134

ext 曲线图?

请教:由于数据比较多。所以想把曲线图也做成分页形式的。不过ext的曲线图貌似不支持分页数据么。。。不知道有什么好方法吗??
难道要把得到的分页数据转成不分页的吗???
[b]问题补充:[/b]
就是和分页grid一样的样子的啊。。
[b]问题补充:[/b]
var store=new Ext.data.JsonStore({
url:'../pro/HFChart.aspx?cmd=chart',
totalProperty:'totalProperty',(不分页就可以)
root:'result',
fields:['ids','mondate','value']
});

    new Ext.Panel({
    iconCls:'chart',
    title: '曲线图',
    frame:true,
    renderTo: 'chart',
    width:500,
    height:300,
     store:store,
    items: {
        xtype: 'linechart',
        store: store,
        width:499,
         autoScroll:true,
        url: '../resources/charts.swf',
        xField: 'ids',
        yField: 'value',
        tipRenderer : function(chart, record){
            return "数值:["+Ext.util.Format.number(record.data.value, '0,0') + ']\n时间:' + record.data.mondate;
        }
    } ,bbar:new Ext.PagingToolbar({
    pageSize:10,
    store:store,
    displayInfo:true,
    emptyMsg:"没有记录",
      plugins: new Ext.ux.ProgressBarPager()
        })
});

store.load({params:{start:0,limit:10}});
[b]问题补充:[/b]
OK了,原来fields: ['ids', {name:'mondate',type:'date',dateFormat:'Y-m-d H:i:s'}, {name:'value',type:'int'}]里面少了name属性。。十分感谢!!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • iteye_10013
    iteye_10013 2009-09-03 14:59
    已采纳
    点赞 评论
  • iteye_10013
    iteye_10013 2009-09-03 14:04

    如何个分页法?

    你自己在后面加2个按钮,然后改变store里面的数据不就OK了.

    chart里面的数据是跟着store变得

    点赞 评论
  • iteye_10013
    iteye_10013 2009-09-03 14:20

    你的grid和chart的store是同一个吧?
    那如果你的grid可以分页,chart也必然可以.

    上关键代码看看

    点赞 评论
  • iteye_15225
    iteye_15225 2009-09-03 14:50

    既然分页 LZ就应该把PagingBar添加上去啊,然后后台还要读取PagingBar的信息,在后台分页,把分页的数据传递给Chart就可以了

    点赞 评论
  • iteye_10013
    iteye_10013 2009-09-03 14:55

    本地写了个示例,是没问题的:

    js的代码:
    [code="javascript"]
    Ext.onReady(function(){
    //自己改路径
    Ext.BLANK_IMAGE_URL = '/images/s.gif';
    Ext.chart.Chart.CHART_URL = '/js/extjs/3.0/resources/charts.swf';
    Ext.QuickTips.init();
    testChartPage();
    });
    function testChartPage(){
    var store = new Ext.data.JsonStore({
    url: 'page.jsp',
    totalProperty: 'totalProperty',
    root: 'result',
    fields: ['ids', {name:'mondate',type:'date',dateFormat:'Y-m-d H:i:s'}, {name:'value',type:'int'}]
    });
    new Ext.Panel({
    title: '曲线图',
    frame: true,
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    store: store,
    items: {
    xtype: 'linechart',
    store: store,
    width: 499,
    autoScroll: true,
    xField: 'mondate',
    yField: 'value',
    xAxis: new Ext.chart.TimeAxis({
    labelRenderer:Ext.util.Format.dateRenderer('m-d H:i')
    })
    },
    bbar: new Ext.PagingToolbar({
    pageSize: 10,
    store: store,
    displayInfo: true,
    displayMsg: 'Displaying topics {0} - {1} of {2}',
    emptyMsg: "No topics to display"
    })
    });
    store.load({
    params: {
    start: 0,
    limit: 10
    }
    });
    }[/code]

    page.jsp的代码:
    [code="java"]<%
    int start = Integer.parseInt(request.getParameter("start"));
    int limit = Integer.parseInt(request.getParameter("limit"));
    if(start==0){
    %>

    {
    totalProperty:15,
    result:[
    {ids:1,mondate:'2008-09-03 10:00:00', value:'1'},
    {ids:2,mondate:'2008-09-03 11:00:00', value:'2'},
    {ids:3,mondate:'2008-09-03 12:00:00', value:'3'},
    {ids:4,mondate:'2008-09-03 13:00:00', value:'4'},
    {ids:5,mondate:'2008-09-03 14:00:00', value:'5'},
    {ids:6,mondate:'2008-09-03 15:00:00', value:'6'},
    {ids:7,mondate:'2008-09-03 16:00:00', value:'7'},
    {ids:8,mondate:'2008-09-03 17:00:00', value:'8'},
    {ids:9,mondate:'2008-09-03 18:00:00', value:'9'},
    {ids:10,mondate:'2008-09-03 19:00:00', value:'10'}
    ]
    }

    <%
    }else{
    %>

    {
    totalProperty:15,
    result:[
    {ids:11,mondate:'2008-09-03 20:00:00', value:'11'},
    {ids:12,mondate:'2008-09-03 21:00:00', value:'12'},
    {ids:13,mondate:'2008-09-03 22:00:00', value:'13'},
    {ids:14,mondate:'2008-09-03 23:00:00', value:'14'},
    {ids:15,mondate:'2008-09-03 23:50:00', value:'15'}
    ]
    }

    <%
    }
    %>[/code]

    点赞 评论

相关推荐