Extjs中Chart利用series的tips属性设置鼠标划过时显示数据
2014-03-17 00:37
495 查看
效果如下:
从官网找到的例子,大家参考下吧。源码:
源码可以到网上下载,地址:http://try.sencha.com/extjs/4.0.7/examples/charts/tipschart/
从官网找到的例子,大家参考下吧。源码:
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/
相关文章推荐
- Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子
- Gridview利用DataFormatString属性设置数据格式
- Flex中如何利用seriesFilters属性,添加/删除LineChart图表曲线阴影
- ExtJS中表格控件的使用,属性设置和数据的获取
- ExtJS中表格控件的使用,属性设置和数据的获取加载
- Gridview利用DataFormatString属性设置数据格式
- 利用反射取得类中属性(引用及非引用数据类型)及设置该类实例化对象的属性值
- Flex中如何创建一个自定义数据显示Tips的slider控件。鼠标按住滑标察看效果
- 利用Hibernate Interceptor回调机制 统一设置数据表的共通属性
- ASP.NET 2.0中Gridview利用DataFormatString属性设置数据格式
- Gridview利用DataFormatString属性设置数据格式
- ExtJS中表格控件的使用,属性设置和数据的获取
- ExtJs3.3.1 ComboBox由于readOnly属性引发的数据不显示问题
- PowerDesigner中设置数据库类型,设置default value,Comment,自增属性,以及数据库设计中的需要考虑的示项,带有小数点的数据显示
- ASP.NET 2.0中Gridview利用DataFormatString属性设置数据格式
- Android studio常用设置-鼠标悬停时显示tips帮助
- Gridview利用DataFormatString属性设置数据格式
- chart鼠标悬停时显示数据
- Flex中如何利用firstVisibleItem属性设置或取得第一个显示节点的例子
- 利用Hibernate Interceptor回调机制 统一设置数据表的共通属性