请教ext 3.0 chart的生成图表

Question

毛重 重量 件数 皮重
12 15 26 33
22 33 44 55
22 33 44 55
32 35 56 78
32 35 56 78
32 35 56 78
32 35 56 78

用extjs chart 如何把上面的饿数据生成下面这张图表,各位帮忙解答一下

[b]问题补充：[/b]
官方的example不详细,做个简单的可以,复杂的就不知道咋弄,尤其是不知道怎么设置系列(series)

Answer 1

参考一下,应该不难

[code="js"]
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}
]
});

new Ext.Panel({
iconCls: 'chart',
title: 'test',
frame: true,
renderTo: document.body,
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
        }
    }]
}

});
[/code]