Extjs中Chart利用series的tips属性设置鼠标划过时显示数据
效果如下:
从官网找到的例子,大家参考下吧。源码:
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/
Extjs中Chart利用series的tips属性设置鼠标划过时显示数据的更多相关文章
- extjs中新建窗体时,给窗体添加背景图片不显示问题之一
1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了 layout: 'fit', Ext.create('Ext.Window', { title: ...
- extjs中第一次访问有效,第二次访问出现部分组件无法显示的,动态改变组件的label值的方法,ExtJs中组件最好少使用ID属性(推荐更多使用Name属性)
在公司做的一个OA项目中,曾经就遇到了这样的一个问题:(我是在jsp中的div中将js render到div中去的)第一次访问此界面的时候,formpanel上的组件能正常显示,不刷新整个页面的前提下 ...
- Android中TextView和EditView经常使用属性设置
Android开发中最经常使用的几乎相同就是TextView和EditView了,在使用它时.我们也会设置它的一些属性,为了让我们设计的更好看,设置的更合理.这里记下它的经常使用属性,方便后期查阅. ...
- 利用name或id属性设置页面跳转的锚点
理论准备 网页中的链接按照链接路径的不同,可以分为3种类型,分别是内部类型.锚点链接和外部链接: 按照使用对象的不同,网页中的链接又分为文本超链接,图像超链接,E-ma ...
- 在C#应用程序中,利用表值参数过滤重复,批量向数据库导入数据,并且返回重复数据
在很多情况下,应用程序都需要实现excel数据导入功能,数据如果只有几十条,或上百条,甚至上千条,速度还好. 但是不仅如此,如果客户提供给你的excel本身存在着重复数据,或是excel中的某些数据已 ...
- [ html canvas globalCompositeOperation ] canvas绘图属性 设置合成图像如何显示 属性演示
<!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
- Winform中Chart图表的简单使用
在常见的一些数据采集的系统中, 都少不了一个就是, 数据分析, 无论是报表的形式, 还是图形的形式. 他都是可以迅速的展现一个数据趋势的实现方法, 而今天, 就是简单介绍一下, 微软的工具库自带的 C ...
- C# Chart控件,chart、Series、ChartArea曲线图绘制的重要属性
http://blog.sina.com.cn/s/blog_621e24e20101cp64.html 为避免耽误不喜欢这种曲线图效果的亲们的时间,先看一下小DEMO效果图: 先简单说一下,从图中可 ...
- java 中利用反射机制获取和设置实体类的属性值
摘要: 在java编程中,我们经常不知道传入自己方法中的实体类中到底有哪些方法,或者,我们需要根据用户传入的不同的属性来给对象设置不同的属性值,那么,java自带的反射机制可以很方便的达到这种目的,同 ...
随机推荐
- HDU Collect More Jewels 1044
BFS + 状态压缩 险过 这个并不是最好的算法 但是写起来比较简单 , 可以AC,但是耗时比较多 下面是代码 就不多说了 #include <cstdio> #include <c ...
- 【模拟】NEERC15 A Adjustment Office (2015-2016 ACM-ICPC)(Codeforces GYM 100851)
题目链接: http://codeforces.com/gym/100851 题目大意: 一个N*N的矩阵A,Ai,j=i+j,Q次操作,每次分两种,R r取出第r行还未被取的所有数,并输出和.C c ...
- 【动态规划】Vijos P1218 数字游戏(NOIP2003普及组)
题目链接: https://vijos.org/p/1218 题目大意: 一个N个数的环,分成M块,块内的数求和%10,最后每块地值累乘,求最大和最小. n(1≤n≤50)和m(1≤m≤9)太小了可以 ...
- HDOJ(HDU) 2106 decimal system(进制相互转换问题)
Problem Description As we know , we always use the decimal system in our common life, even using the ...
- 对MMU段式转换的理解
本文将详细介绍MMU段式转换的过程,并在文末附上一篇讲MMU比较详细的文章.具体什么是MMU,什么时段是转换就不在本文讲了,直接戳文末的链接. 首先,进行段式转换的条件.我们要拥有一个虚拟地址,还有一 ...
- 一键安装lnmp脚本
前段时间一直在找一个快速部署lnmp环境的方法,也没找着,就自己写了一个,结合网上的大神们的.我的方法是脚本结合源码包,很多依赖裤都是yum安装的,这都在脚本里面,需要的源码包我都下载好了,打包成压缩 ...
- SAP-MM:收货转储时提示 M7053“只能在公司代码 **** 的期间 2014/04 和 2014/03 中记账”
错误信息 消息号M7053 解决方法 Step 1.使用MMPV进入"关闭账期"界面. Step 2.输入"公司代码"."期间".& ...
- 阿里云服务器[教程3]一键安装php+mysql+ftp+nginx环境
直接看地址 http://help.aliyun.com/manual?spm=0.0.0.0.F5PPZs&helpId=129
- Linux下得到显示屏参数的方法
先安装一个软件,然后使用权ddcprobe可以查看当前支持的分辨率和刷新频率#sudo apt-get install xresprobe运行 #sudo ddcprobe会得到下面的信息vbe: V ...
- JavaScript--execCommand指令集
execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用 如下格式:document.execCommand(sCmd,交互方式, 动态参数) .其中:sCm ...