在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 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" />


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

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

    Form2 f2 = new Form2(); //实例化窗体FORM2 f2.TopLevel = false; //设置为非顶级窗体 f2.FormBorderStyle = FormBorder ...

  2. c# 遍历子控件,比如Form下的group,或者panel

    方法很好用.目的是遍历所有容器的子控件... 方法1private void GetControl(Control.ControlCollection ctc, ref int checkNull) ...

  3. extjs表格下的分页条——Ext.grid.Panel 的 pagingtoolbar

    两种分页条:每页固定条数的分页条 和 自定义选择每页内容条数的分页条 一.每页固定条数的分页条 这种样式的-- dockedItems: [{ xtype: 'pagingtoolbar', stor ...

  4. Extjs 疑难杂症 (LoadMark 遮罩、Panel Update无效、chrome浏览器date控件全屏)

    一.在extjs gridPanel中使用LoadMark无效,三步搞定. 原代码: grid = new Ext.grid.GridPanel({ store: store, title:'资料列表 ...

  5. ExtJs尝下鲜

    感觉进入了一个新天地. WIN时代的API + 浏览器的窗口. 复古风了? 真的是好多年前还有点印象的DELPHI及MFC啊. <!DOCTYPE html> <html> & ...

  6. Highcharts使用教程(1):制作简单图表

    今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧. 步骤一 在网页中添加一个div.设置id,设置图表长.高.代码如 ...

  7. Extjs GridPanel 中放入 Combox显示问题

    http://weijun8611-126-com.iteye.com/blog/566201 在项目中使用了extjs的editorgridpanel,但是其中的combobox在选择了相应的选项后 ...

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

    新入职的员工,开始的时候都是让配环境,本地写代码用的wamp,在lnmp或lamp测试,除非有些土豪公司 用的是(果机). 另外安装时,把整个流程在脑子里先过一篇(记不全也没关系,一回生二回熟),重在 ...

  9. 【DOS】取某目录下某类型文件信息放入文本

    C:\Users\horn1\Desktop\新建文件夹>dir *.jar >1.txt 这样,所有扩展名为jar的文件信息就送到新建的文本文件1.txt中了.虽然简单,但也是个常用功能 ...

随机推荐

  1. myeclipse 字体设置为UTF-8

    将myeclipse设置成utf-8格式的方式如下: 1.windows->Preferences打开"首选项"对话框,如图: 2.点击左侧导航树,导航到general-&g ...

  2. google浏览器安装接口测试工具postman方法

    Google安装postman: 未配好的文件下载(点击选择下面配好的直接用):下载 配置方法: 一:需要修改postman安装包中js/requester.js 和runner.js ,将其中的ai ...

  3. mysql存储小数

    线下不知道什么版本的古董了,经本人亲测,varchar类型的数据,可以直接执行mysql的sum函数. ________________________________________________ ...

  4. IE6浏览器不支持固定定位(position:fixed)解决方案(转)

    IE6浏览器不支持固定定位(position:fixed)解决方案   来源:互联网 作者:佚名 时间:12-04 10:54:05 [大 中 小] 点评:有些朋友在进行网页布局时,会遇到IE6浏览器 ...

  5. 通过Nginx訪问FastDFS文件系统并进行图片文件裁剪的性能測试和分析

    前段时间公司的分布式图片文件系统(FastDFS)做了图片裁剪和缩放功能,并把缩放计算和FastDFS做了解耦分离,前端用虚拟机作为图片文件缩放的訪问代理层(Nginx Proxy),后端使用ngin ...

  6. 一个ibatis映射文件的例子(包含增删改单查,多查)

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-/ ...

  7. leveldb学习:sstable(2)

    block写入:block_builder block.h和.cc里定义了block的entry存储格式和restart,提供了entry的查找接口以及迭代器.那么怎样往写block里写entry呢? ...

  8. 根据数据库表结构生成java类

    import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.io.PrintWrit ...

  9. 一个人的旅行 HDU杭电2066【dijkstra算法 || SPFA】

    pid=2066">http://acm.hdu.edu.cn/showproblem.php? pid=2066 Problem Description 尽管草儿是个路痴(就是在杭电 ...

  10. hdoj--1260--Tickets(简单dp)

    Tickets Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...