Extjs中Chart利用series的tips属性设置鼠标划过时显示数据

效果如下：

从官网找到的例子，大家参考下吧。源码：

  1 Ext.require('Ext.chart.*');
  2 Ext.require('Ext.layout.container.Fit');
  3 
  4 Ext.onReady(function () {
  5     var pieModel = [{
  6         name: 'data1',
  7         data: 10
  8     }, {
  9         name: 'data2',
 10         data: 10
 11     }, {
 12         name: 'data3',
 13         data: 10
 14     }, {
 15         name: 'data4',
 16         data: 10
 17     }, {
 18         name: 'data5',
 19         data: 10
 20     }];
 21 
 22     var pieStore = Ext.create('Ext.data.JsonStore', {
 23         fields: ['name', 'data'],
 24         data: pieModel
 25     });
 26 
 27     var pieChart = Ext.create('Ext.chart.Chart', {
 28         width: 100,
 29         height: 100,
 30         animate: false,
 31         store: pieStore,
 32         shadow: false,
 33         insetPadding: 0,
 34         theme: 'Base:gradients',
 35         series: [{
 36             type: 'pie',
 37             field: 'data',
 38             showInLegend: false,
 39             label: {
 40                 field: 'name',
 41                 display: 'rotate',
 42                 contrast: true,
 43                 font: '9px Arial'
 44             }
 45         }]
 46     });
 47 
 48     var gridStore = Ext.create('Ext.data.JsonStore', {
 49         fields: ['name', 'data'],
 50         data: pieModel
 51     });
 52 
 53     var grid = Ext.create('Ext.grid.Panel', {
 54         store: gridStore,
 55         height: 130,
 56         width: 480,
 57         columns: [{
 58             text: 'name',
 59             dataIndex: 'name'
 60         }, {
 61             text: 'data',
 62             dataIndex: 'data'
 63         }]
 64     });
 65 
 66     var panel1 = Ext.create('widget.panel', {
 67         width: 800,
 68         height: 400,
 69         title: 'Line Chart',
 70         renderTo: Ext.getBody(),
 71         layout: 'fit',
 72         items: [{
 73             xtype: 'chart',
 74             animate: true,
 75             shadow: true,
 76             store: store1,
 77             axes: [{
 78                 type: 'Numeric',
 79                 position: 'left',
 80                 fields: ['data1'],
 81                 title: false,
 82                 grid: true
 83             }, {
 84                 type: 'Category',
 85                 position: 'bottom',
 86                 fields: ['name'],
 87                 title: false
 88             }],
 89             series: [{
 90                 type: 'line',
 91                 axis: 'left',
 92                 gutter: 80,
 93                 xField: 'name',
 94                 yField: ['data1'],
 95                 tips: {//对这个属性进行配置
 96                     trackMouse: true,
 97                     width: 580,
 98                     height: 170,
 99                     layout: 'fit',
100                     items: {
101                         xtype: 'container',
102                         layout: 'hbox',
103                         items: [pieChart, grid]
104                     },
105                     renderer: function (klass, item) {//这里是设置了显示数据时的样式
106                         var storeItem = item.storeItem,
107                             data = [{
108                                 name: 'data1',
109                                 data: storeItem.get('data1')
110                             }, {
111                                 name: 'data2',
112                                 data: storeItem.get('data2')
113                             }, {
114                                 name: 'data3',
115                                 data: storeItem.get('data3')
116                             }, {
117                                 name: 'data4',
118                                 data: storeItem.get('data4')
119                             }, {
120                                 name: 'data5',
121                                 data: storeItem.get('data5')
122                             }],
123                             i, l, html;
124 
125                         this.setTitle("Information for " + storeItem.get('name'));
126                         pieStore.loadData(data);
127                         gridStore.loadData(data);
128                         grid.setSize(480, 130);
129                     }
130                 }
131             }]
132         }]
133     });
134 });

源码可以到网上下载，地址：http://try.sencha.com/extjs/4.0.7/examples/charts/tipschart/

posted @ 2014-03-17 00:37  尐sんΙ頭  阅读(839)  评论(0)  编辑  收藏  举报