9个主流的前端图表框架

30 篇文章 0 订阅
  • Flot - Flot 为 jQuery 提供的javascript代码库. 容易使用,有特色的图表,提供交互功能(能够放大缩小数据区域等)。是一个纯粹的 jQuery JavaScript 绘图库,可以在客户端即时生成图形,使用非常简单,支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas 对象,目前所有主流浏览器都支持该对象,除了 IE, 因此在 IE中使用 JavaScript 进行模拟。
     
  • Open Flash Chart - Open Flash Chart 是一个 Flash 图表组件,很容易安装,提供以下语言的API: PHP, Perl, Python, Java, Ruby on Rails, and .Net 来控制图表。 
  • AmCharts - AmCharts 是一个动画交互Flash图表。支持: Pie Charts, Line Charts, Scatter/Bubble Charts, Bar/Column Charts, 甚至股票图表
     
     
  • Emprise JavaScript Charts - Emprise 是一个100% 纯 JavaScript 图表解决方案,并不需要任何 JavaScript 框架. Emprise JavaScript Charts 支持鼠标追踪,鼠标事件,按键追踪与事件,缩放,滚动,交互等功能,将用户体验上升到一个新高度。支持曲线图,面积图,离散图,圆饼图,柱状图等形式,拥有完备文档的属性和方法可以帮助实现很好的定制。
  • PlotKit - PlotKit 是一个 图表和图像的Javascript 库. PlotKit 和 MochiKit javascript 库一起工作,支持HTML Canvas 和  Adobe SVG 显示 以及本地浏览器支持。尤其文档非常全。
  • Flotr - Flotr 是Prototype 1.6.0.2框架的javascript插件库。 Flotr帮助你在浏览器中创建图表,支持鼠标事件响应,放大缩小,CSS类型支持等。
     
  • PHP/SWF Charts - PHP/SWF 是一个简单支持web图表的强大工具,你能使用 PHP 来收集数据,并发送给flash,支持很多图表类型: Line, Column, Stacked column, Floating column, 3D column, Stacked 3D column, Parallel 3D column, Pie, 3D Pie, Bar, Stacked bar, Floating bar, Area, Stacked area, Candlestick, Scatter, Polar, Mixed.
  • Visifire - Visifire 是用 Silverlight 做的,是一个开源可视化数据组件,使用Visifire你能创建动画 Silverlight 图表,支持  ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails 或者 简单 HTML调用.
    • FusionCharts - FusionCharts 是一个跨浏览器和跨平台的flash图表组件,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面 甚至PPT调用. 几乎所有你知道的语言它都支持。
    • JFreeChart - JFreeChart 是一个开源java图表库,让开发者能够很容易在程序里面显示高质量的图表。 JFreeChart 项目从7年前便开始了,起始于 2000 年1月, 已经有四五万开发者已经使用了JFreeChart。JFreeChart 支持很多种图形文件格式: JPEG, GIF, PDF, EPS and SVG. 这对于java开发者是一个很好的资源。
ALog 是前端统计框架。 1. 概述 我们会使用或开发各种不同的统计模块对产品的使用情况进行收集,以便衡量产品的健康状况和对产品发展方向进行决策 随着前端交互越来越丰富,统计要分析的维度也越来越多样 经常一个页面中就会并行着多个统计模块:有性能相关的、有点击相关的、有业务相关的 ALog使用一些少量简单的API将这些复杂的统计模块统一组织起来 2. ALog解决什么问题? 2-1. 减少统计模块加载对产品的影响 ALog使用异步方式加载统计模块,不堵塞页面正常资源加载; 另外值得一提的是,ALog的模块文件不依赖加载顺序、兼容同步和异步加载。 2-2. 并行多个统计模块 3. ALog适合什么应用场景? 3-1. 简单统计 直接这页面中调用 3-2. 复杂统计 通过define定义统计模块 3-3. 代理统计 接入第三方统计模块 4. ALog入门 4-1. 概念 4-2. 准备工作 页面加载的方式 [removed] void function(e,t,n,a,o,i,m){ e.alogObjectName=o,e[o]=e[o]||function(){(e[o].q=e[o].q||[]).push(arguments)},e[o].l=e[o].l|| new Date,i=t.createElement(n),i.async=!0,i.src=a,m=t.getElementsByTagName(n)[0],m[removed].insertBefore(i,m) }(window,document,"script","http://uxrp.github.io/alog/dist/alog.min.js","alog"); [removed] 5. API文档 5-1. ALog模块 5-1-1. alog() /**  * 执行  * @param{String} trackerMethod 追踪器的方法 "<trackerName>.<method>"  * @param{Object…} params 方法  */ function alog(trackerMethod, params) 5-1-2. define() alog('define', 'pv', function(){    var pvTracker = alog.tracker('pv');    pvTracker.set('ver', 1);    pvTracker.set('px', window.screen.width   'x'   window.screen.height);    return pvTracker;}); 5-1-3. require() alog('require', ['pv'], function(pvTracker){   pvTracker.create({     postUrl: 'http://localhost/u.gif'   });}); 5-1-4. on() 绑定事件 function record(e){}alog('speed.on', 'record', function(e){   var buffer = this.get('buffer');   buffer.push('e');}); 5-1-4. un() 注销事件 5-1-5. fire() 派发事件 5-2. ATracker模块 5-2-1. create() 创建追踪器实例 alog('pv.create', {   postUrl: 'http://localhost/u.gif'});alog('pv.send', 'pageview'); 5-2-1. set() 设置字段值 5-2-2. get() 获取字段值 5-2-3. send() 上报数据 5-2-4. on() 绑定事件 5-2-5. un() 注销事件 5-2-6. fire() 派发事件 5-3. 保留字段 5-3-1. postUrl 上报地址 5-3-2. protocolParameter 协议字段,用于简写 5-4. 标准事件 5-4-1. create 追踪器创建时触发 5-4-2. send 数据上报时派发 6. 参考文档 google analytics https://developers.google.com/analytics/devguides/platform/ 标签:ALog
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值