集成 extjs 和 highcharts
来源:互联网 发布:网络语根号是什么意思 编辑:程序博客网 时间:2024/05/23 11:01
highcharts 库的画图效果比 ExtJS 好,但 ExtJS 拥有强大的类管理。两者都很不错。
通常在商业项目上,尽量只选择一个库,以减少成本。但如果只是用于非盈利项目上,那么,可以把两者结合起来,既可以用到 extjs 强大的类管理,又可以用到 highcharts 强大的图像功能。各取两者的优势,也是一种不错的使用办法哦。
利用了 extjs panel 的标题,又使用了 highchart 的画图
1 导入库
如下代码所示:具体就是引用 extjs,jquery, highcharts 相关库<link rel="stylesheet" type="text/css" href="../ext-4.1.1a/resources/css/ext-all.css"><script type="text/javascript" src="../ext-4.1.1a/ext-debug.js"></script><script type="text/javascript" src="../jquery-1.11.1.min.js"></script><script type="text/javascript" src="../Highcharts-4.0.4/js/highcharts.js"></script><script type="text/javascript" src="app.js"></script>
2 全局配
如下代码所示:在 app.js 文件中,配置 extjs 中类路径,以及 highchart 的全局配置选项。
// extjs 的路径配置Ext.Loader.setConfig({ enabled: true, paths: { jack : 'app/jack' }});// highchart 的全局配置Highcharts.setOptions({ global: { useUTC: false }, // colors: { // }, // lang: { // }, chart: { animation: false }});
3 类定义
如下代码中,在文件 /jack/view/TemperatureHC.js 中 通过定义一个 highchart 变量来保存 highchart 句柄,同时设定 highchart 中 renderTo 为 extjs panel 中的 body 元素。Ext.define('jack.view.TemperatureHC', { extend: 'Ext.panel.Panel', config: { panelTitle: null, chartTitle: null }, requires: [ 'Ext.panel.Panel' ], highchart: null, constructor: function (config) { this.initConfig(config); this.callParent(arguments); }, initComponent: function() { var me = this; if (me.panelTitle) { me.title = me.panelTitle; } this.callParent(arguments); }, afterComponentLayout: function(width, height, oldWidth, oldHeight) { var me = this; var chartId = me.id + "-body"; me.highchart = new Highcharts.Chart({ chart: { renderTo: chartId, animation: false }, title: { text: me.chartTitle }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, yAxis: { title: { text: 'Temperature (°C)' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { valueSuffix: '°C' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: [{ name: 'Tokyo', data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: 'New York', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] }, { name: 'Berlin', data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }, { name: 'London', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); }});
4 包含及显示
Ext.require([ 'Ext.container.Container', 'jack.view.TemperatureHC']);var pageContainer = null;Ext.onReady(function () { pageContainer = Ext.create('jack.view.TemperatureHC', { id: 'htContainer', width: 800, height: 300, panelTitle: '今年温度', renderTo: Ext.getBody() });});
0 0
- 集成 extjs 和 highcharts
- extjs和highcharts整合显示数据曲线和打印图片
- extjs + jquery + highcharts
- extjs echarts highcharts 饼图
- 图表到项目的简单集成(Echarts 和 HighCharts)
- strus2和extjs集成实现登陆
- Vaadin 7 和 extjs mvc 集成示例
- Highcharts 基于ExtJs的报表
- antd mobile(四) highcharts集成---采用react-highcharts
- ExtJs 集成kindeditor
- Struts2与extjs集成
- extjs集成echart
- Extjs 集成kindeditor
- antd mobile (三) 集成highcharts--传统方式
- highcharts示例和使用
- ECharts和HighCharts对比
- echarts和highcharts区别
- Spring Extjs FCKEditor的集成
- 网易云课堂——教你做IOS 7图标 - Brief Introduction
- VMWare虚拟机下为Windows Server 2012配置静态IP(NAT方式)
- TDD-LTE与FDD-LTE异同点比较
- HDU5147 Sequence II(树状数组+前缀和+后缀和)
- MVC与三层,你能区分吗?
- 集成 extjs 和 highcharts
- Android学习笔记之AutoCompleteTextView自动填充功能的案例
- Class.getResource(String path)路径问题
- 常用的javascript实例
- C#面向对象基础(一)
- 重构地址
- 安装Ubuntu 14.04, 装系统跟装软件一样简答
- CentOS 7 的安装教程
- 程序员需要知道的13个技巧