毛重 重量 件数 皮重
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)
参考一下,应该不难
[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]
EXT 3还没down下来呢，你去看看官方的示例不就知道了嘛，呵呵