G4Studio+ext4j+highcharts 下在ext4j的panel中放入hightCharts图表

在G4Studio+ext4j 下,创建一个panel,然后将highCharts图表放入panel中,实现方法如下:

首先简单给出的部分代码:

 Ext.onReady(function() {

                        var panel = new Ext.Panel({
				title: '',
				region:'center',
				items: [{
					html: '<div id="container" style="width: auto;height: 487px; margin: 0 

auto">aaa</div>',
					afterRender: function () {
						 createReport();
					}
				}]
			})

			// 布局模型
			var viewport = new Ext.Viewport({
				layout : 'border',
				items : [ panel]
			});

			function createReport(){
				var chart;
				chart = new Highcharts.Chart({
					 chart: {
						 renderTo: 'container',
				         type: 'column'
				        },
				        title: {
				            text: 'Monthly Average Rainfall'
				        },
				        subtitle: {
				            text: 'Source: WorldClimate.com'
				        },
				        xAxis: {
				            categories: [
				                'Jan',
				                'Feb',
				                'Mar',
				                'Apr',
				                'May',
				                'Jun',
				                'Jul',
				                'Aug',
				                'Sep',
				                'Oct',
				                'Nov',
				                'Dec'
				            ]
				        },
				        yAxis: {
				            min: 0,
				            title: {
				                text: 'Rainfall (mm)'
				            }
				        },
				        tooltip: {
				            headerFormat: '<span style="font-size:10px">{point.key}</span>',
				            pointFormat: '' +
				                '',
				            footerFormat: '<table><tbody><tr><td style="color:{series.color};padding:0">

{series.name}: </td><td style="padding:0"><b>{point.y:.1f} mm</b></td></tr></tbody></table>',
				            shared: true,
				            useHTML: true
				        },
				        plotOptions: {
				            column: {
				                pointPadding: 0.2,
				                borderWidth: 0
				            }
				        },
				        series: [{
				            name: 'Tokyo',
				            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 

95.6, 54.4]

				        }, {
				            name: 'New York',
				            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 

92.3]

				        }, {
				            name: 'London',
				            data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

				        }, {
				            name: 'Berlin',
				            data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

				        }]
				});
			}
})

createReport方法里的内容是直接从highCharts官网上copy的,通过这种方法就可以将highCharts图表加入panel,但对引用上面js的页面,同样要引入需要的js,如:

<G4Studio:import src="/resource/commonjs/highcharts.js" />
<G4Studio:import src="/resource/commonjs/highcharts_exporting.js" />



时间: 2024-08-01 22:40:31

G4Studio+ext4j+highcharts 下在ext4j的panel中放入hightCharts图表的相关文章

G4Studio+extjs+highcharts 下在ext4j的panel中放入hightCharts图表

在G4Studio+extjs下.创建一个panel,然后将highCharts图表放入panel中.实现方法例如以下: 首先简单给出的部分代码: Ext.onReady(function() { var panel = new Ext.Panel({ title: '', region:'center', items: [{ html: '<div id="container" style="width: auto;height: 487px; margin: 0 a

c#中如何在一个panel中放入窗体

? 1 2 3 4 5 6 7 Form2 f2 = new Form2();       //实例化窗体FORM2              f2.TopLevel = false;    //设置为非顶级窗体              f2.FormBorderStyle = FormBorderStyle.None;            //设置窗体为非边框样式              f2.Dock = System.Windows.Forms.DockStyle.Fill;   /

windows下编写的bash脚本拖入linux环境下脚本出错之编码问题

windows下编写的bash脚本拖入linux环境下脚本出错之编码问题         脚本经常在windows下写好,拖入到linux环境中运行.但是在运行过程中,经常出现编码问题,这里记录一下.方便自己日后查看,或者给刚好遇到这样的问题的同学一个尝试的方法. 在linux环境下vim 进入拖入的bash脚本.执行命令 :set ff=unix

exchange共存状态下,需要输入版本号登入ECP

exchange 共存状态下(10.13),需要输入版本号登入ECP 例如: https://contoso/ecp/?ExchClientVer=15   登入到2013的ecp

linux下ssh客户端命令远程登入系统详解

1.远程登入系统有常用两个服务telnet和ssh,都属于C/S架构 telnet: 远程登录协议,端口为23/tcp 特点:明文传输,不加密 ssh: Secure SHell,端口为22/tcp有v1,v2两个版本 特点:主机加密认证 用户认证过程加密 数据传输过程加密 sshv1:由于受到中间人攻击等安全隐患,现在用的不多 sshv2:相对sshv1,很安全,其认证过程有两种:基于口令认证及基于密钥认证 2.Linux系统程序是openSSH 服务器端:sshd, 配置文件/etc/ssh

centos6.5下yum安装lnmp(适合刚入职的新手的方法)

新入职的员工,开始的时候都是让配环境,本地写代码用的wamp,在lnmp或lamp测试,除非有些土豪公司 用的是(果机). 另外安装时,把整个流程在脑子里先过一篇(记不全也没关系,一回生二回熟),重在实践,实践出真知! 一:首先要在自己电脑安装一个虚拟主机软件,我这有: vmware10 ---> 网盘地址:http://pan.baidu.com/s/1pJt5HVl centos6.5(32位):网盘地址:http://pan.baidu.com/s/1pJqNLxD xshell4:  网

flask 蓝图下 多个视图文件放入一个蓝图的写法

目录: blueprint.py book.py user.py app目录下的__init__.py fisher.py 第二种写法: 把Blueprint.py中代码,写到web目录 __init__.py文件中,然后 导入book 和 user 的py文件 from flask import Blueprintweb=Blueprint("web",__name__) from app.web import bookfrom app.web import user 在把 app目

(kate)win8-64位系统下opencv-2.4.3的安装以及在visual_studio2010中配置

环境: 操作系统:window8.1 64bit Opencv版本:OPencv-2.4.3 VS版本:vs 2010 一.安装Opencv 1.Opencv官网http://opencv.org/ 下载OPencv-2.4.3如图所示 2.  下载好后直接双击安装,选择安装文件,提取OpenCV函数库到指定路径,比如 D:\   ,选好安装路径后,点击“Extract” 安装完成后,文件路径D:\OpenCV2.4.3下就是开发所需的函数库. 二.设置环境变量 右键单击我的电脑→属性→高级→环

关于文件路径方面的小麻烦

写程序的时候经常引用外部资源,这个时候通过文件路径定位就相当重要了. 问题提出 在Eclipse工程中写一段代码,想要调用工程中的某一个资源文件. File file=new File("/EclipseProj/res.txt"); .... //读取文件 一运行,总是说res.txt找不到.只要将路径改成"EclipseProj/tes.txt"即可.不知为什么? 症结所在 没有搞清楚相对路径中' / '的作用,"/Director/File"