效果如下：
从官网找到的例子，大家参考下吧。源码：
Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');
Ext.onReady(function () {
var pieModel = [{
name: 'data1',
data: 10
}, {
name: 'data2',
data: 10
}, {
name: 'data3',
data: 10
}, {
name: 'data4',
data: 10
}, {
name: 'data5',
data: 10
}];
var pieStore = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: pieModel
});
var pieChart = Ext.create('Ext.chart.Chart', {
width: 100,
height: 100,
animate: false,
store: pieStore,
shadow: false,
insetPadding: 0,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data',
showInLegend: false,
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '9px Arial'
}
}]
});
var gridStore = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: pieModel
});
var grid = Ext.create('Ext.grid.Panel', {
store: gridStore,
height: 130,
width: 480,
columns: [{
text: 'name',
dataIndex: 'name'
}, {
text: 'data',
dataIndex: 'data'
}]
});
var panel1 = Ext.create('widget.panel', {
width: 800,
height: 400,
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'chart',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
title: false,
grid: true
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: false
}],
series: [{
type: 'line',
axis: 'left',
gutter: 80,
xField: 'name',
yField: ['data1'],
tips: {//对这个属性进行配置
trackMouse: true,
width: 580,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'hbox',
items: [pieChart, grid]
},
renderer: function (klass, item) {//这里是设置了显示数据时的样式
var storeItem = item.storeItem,
data = [{
name: 'data1',
data: storeItem.get('data1')
}, {
name: 'data2',
data: storeItem.get('data2')
}, {
name: 'data3',
data: storeItem.get('data3')
}, {
name: 'data4',
data: storeItem.get('data4')
}, {
name: 'data5',
data: storeItem.get('data5')
}],
i, l, html;
this.setTitle("Information for " + storeItem.get('name'));
pieStore.loadData(data);
gridStore.loadData(data);
grid.setSize(480, 130);
}
}
}]
}]
});
});
源码可以到网上下载，地址：http://try.sencha.com/extjs/4.0.7/examples/charts/tipschart/