精华频道 → Web前端
阅读更多

Web前端
名家访谈 HTML5图表组件库ichartjs作者王鹤专访  

2013-03-17  编辑 wangguo 评论(77条) 有76257人浏览
ichartjs HTML5 图表 canvas

声明：ITeye精华文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

ichartjs是一款基于HTML5的图形图表库，使用纯JavaScript语言, 利用HTML5的canvas标签绘制各式图形，致力于为应用提供简单、直观、可交互的体验级图表组件。ichartjs基于Apache License 2.0协议开源，目前支持饼图、环形图、折线图、面积图、柱形图、条形图。



为了使大家对ichartjs有进一步的了解，本期我们采访了ichartjs的作者王鹤。

ITeye期待并致力于为国内优秀的开源项目提供一个免费的推广平台，如果你和你的团队希望将自己的开源项目介绍给更多的开发者，或者你希望我们对哪些开源项目进行专访，请告诉我们，发站内短信给ITeye管理员或者发邮件到webmaster@iteye.com即可。

先来个自我介绍吧！ Top

王鹤，英文名taylor，毕业于南昌大学软件工程专业。一直从事JavaEE的企业应用的研发和架构工作，有多年的项目实战经验，目前专注于能源行业的MDM产品设计与实施，一直关注HTML5技术的发展。

我秉承的理念是：“技术这条路上虽然崎岖，但值得坚持”。

ichartjs是什么？ Top

ichartjs 是一款基于HTML5的开源图表库。使用纯javascript语言, 利用HTML5的Canvas标签绘制各式图表。 目前ichartjs支持的图表类型有饼图、圆环图、柱形图、条形图、堆积图、折线图、面积图以及组合图。ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是基于HTML5 WEB/Mobile APP图表展示方面的解决方案。目前官方的最新版本为ichartjs 1.1。

项目主页：http://www.ichartjs.com
图表示例：http://www.ichartjs.com/samples/
新浪微博：http://weibo.com/ichartjs/
Google code：http://code.google.com/p/ichartjs/
Github：https://github.com/wanghetommy/ichartjs

目前HTML5图表库有很多，为什么还要开发ichartjs？ Top

开发ichartjs项目主要有以下几点原因：

  • ichartjs是在2011年4月份开始的，当时，HTML5不像2012年那么”火”，国内市场上基于HTML5流行的图表库也不像现在这么多，基于HTML5的项目也很少。但是市场已经对HTML5产生了浓厚的兴趣。
  • 没有一款产品是适合所有行业的，特别是一些不常见的图表类型或者个性化需求。比如：材料力学性能状况分析(非线性图表)、石化炼油综合分析(油罐图)等。展望未来，在专业领域，这样的需求会越来越多。市场上这些常见的图表在绘制这类图表的显然能力不足。ichartjs也是基于此应运而生的，它适用于这类需求的个性化开发。
  • 国内开源软件的氛围与国外存在一定的差距，我辈有义务、有责任贡献个人一点薄弱的力量，传播知识，传递理想。在国内，一般开源框架都首选国外的。如：struts，spring，Ruby on Rails等等。大家认为这些开源框架”安全”。而ichartjs定位是图表组件，这样的”组件”形式更能容易让大家所接受。在技术上更可控一些。

与其他图表库相比，ichartjs的优势是什么？ Top

目前，从市场上来说，主要有Canvas、Svg、Flash。PC机上Flash表现强劲，Svg是目前解决跨平台比较好的方案，而真正用纯Canvas绘制图表的框架比较少。主要原因之一是IE6,7,8系列不支持Canvas标签。而ichartjs采用Canvas作为绘制图表的方案的原因是ichartjs致力于为基于HTML5的WEB/Mobile APP提供图表展示方面的解决方案。有关于Canvas、Svg、Flash等技术的对比大家可以在网络上获取，下面我们就几个方面将ichartjs与其他常见的几款图表库进行对比：

  实现方式商业收费3D效果依赖性导出图片图表种类
AwesomeChartJSCanvas免费无独立能少
RGraphCanvas收费*有独立能丰富
HighchartsSvg收费无jQuery不能丰富
Fusion ChartFlash/Svg收费有Flash/jQuery能丰富
FlotCanvas免费无jQuery不能丰富
ichartjsCanvas免费有独立能丰富
*RGraph免费的条件是要在使用的网站上链接RGraph网站

其实对于国内的部分开发者来说，ichartjs有一个不可小觑的优势是：便捷、实时、无障碍的交流。

浏览器兼容性如何？你是如何解决兼容问题的？ Top

ichartjs利用HTML5的Canvas标签进行图表绘制，天生的跨平台属性着实解决了软件产品跨平台的问题。目前上，还有一部分浏览器不支持HTML5 Canvas(Text Api)特性。所以我们建议在移动项目或者HTML5的项目上使用ichartjs。

ichartjs在移动平台上表现如何？ Top

ichartjs可以利用UIWebView与WebView组件在iOS 3+、Android 2.3+平台上运行，从目前大家的使用情况反馈上看，从交互性与渲染速度都可以达到理想状态。

移动平台的使用，大家要针对各个机型进行测试。另外，大家可以通过http://www.ichartjs.com/test/进行渲染速度测试。

未来会加入哪些特性？ Top

ichartjs会在以下两大方面继续努力：

  • 图表交互性。ichartjs会不断完善/改善图表的交互性，让图表不仅仅能看，还要能操作。也许会说话也是有可能的。让图表成为一个传递信息的一个窗口。
  • 扩展接口的开放。一个软件的流行，必然需要满足大众的需求，所以我打算提供更多的扩展接口给开发者。让开发者根据自己的需求，打造个性化图表。类似开发jQuery插件的套路。

你怎么看待HTML5的发展？ Top

W3C 在其网站上向我们宣告”HTML5是开放Web平台的基石”。这充分的展示出了HTML5在未来开放平台中的重要地位。

但是从目前情况上看，一方面，HTML5本身的实现程度还有待统一与完善，如碎片化和安全是我们在选择HTML5时需要考虑的因素。另一方面，市场的成熟度与相关人员的经验都有待提高。

虽然目前完全的HTML5应用还不是很理想。但是这一些阻挡不了一个革命性的技术的诞生。目前大家比较接受的方案是Hybrid App。其实无论是移动互联网、桌面应用、甚至TV平台，都可以进行Hybrid模式的开发。哪怕从应用HTML5新标签开始，也是你迈向HTML5的一步。

你认为HTML5会给应用开发带来什么样的变革？ Top

目前大家关注的比较多的是HTML5与Native App之间的较量。而作为一直从事企业应用开发的我来说，则更关注HTML5在企业中发挥的作用和占有的地位。一些龙头企业已经开始着手HTML5企业平台的搭建，但是由于企业应用的特殊性，普及HTML5应用尚需要一段时间。但是HTML5一定会成为未来企业主流。这是因为随着企业对关键业务应用的依赖性，IT技术也随之变得日益复杂，使得实现性能、可用性和用户体验目标成为一项艰巨的挑战。

同时，时代的发展迫使企业越来越快地引入新特性以应对复杂多变的市场竞争。采用HTML5技术可以有效应对这一挑战。会给企业应用带来变革性的影响，从而衍生出更符合用户需求的创新性产品。

引入HTML5技术则将会在以下几个方面给企业应用带来影响：

  • 体验性：随着技术的发展，传统的技术已经不能满足用户的高标准的体验需求，从小小的表单到流行的触摸屏都将成为衡量一个合格产品的标准。
  • 功能性：HTML5引入的新特性canvas、定位、本地存储、WebSocket等等都将会催生一系列创新的功能出现。如：可视化分析，定位打卡等等。
  • 便捷性：采用HTML5技术构建移动互联网平台将会使工作变得便捷，多客户端无缝的操作给用户带来一致的体验。
  • 可视化：HTML5 canvas的出现可以很轻松的实现数据的图形可视化，从而有效地传达与沟通信息。

从开始到1.0发布用了多长时间？你是如何坚持的？ Top

我们用列表来展示一下ichartjs从立项到现在的时间轨迹：

  • 2011年04月：ichartjs立项
  • 2012年07月11日：ichartjs发布1.0Alpha版
  • 2012年08月15日：ichartjs发布1.0Beta版
  • 2012年12月15日：ichartjs发布1.0版
通过以上的时间点，可以看出，从开始到1.0正式版的发布持续了1年半的时间。在这期间里，工作清闲的时候，每天利用业余时间进行编码和设计工作。工作忙的时候，也坚持每周都关注一下。同时以学习为目的，靠个人的兴趣，将ichartjs坚持下来的。另一个很重要的因素是，整个过程得到了广大程序员的支持与鼓励，是他们积极的反馈使ichartjs变得越来越好。

你怎样看待国内的开源环境？ Top

我觉得近几年国内的开源环境正在逐步的改善，虽然与国外还存在巨大差距，但是我们已经开始有这样的氛围了。

首先，国内的知名企业如百度、淘宝等鼓励员工从事参加开源项目，同时也将一些项目开源出来，极大的推动了开源向前的脚步。

其次，各行业的技术达人们，经过这些年的积累，拥有了成熟的软件设计思想与实战经验，软件质量整体提升，一些在公司内部应用的框架或者平台已经达到了一定的高度。

同时，近些年国内开发者的数量呈现出良好的增长态势，大家对国内开源项目也产生了浓厚的兴趣，大家都很积极的参与进来。ichartjs就是在广大开发者的帮助下完成的。

最后，像ITeye这样的权威技术网站为开源项目提供了一个推广平台，可以让更多的人了解开源项目。所以，我相信在大家的不断努力下，会有更多优秀的开源项目出现，会有更多的开发者投入到开源事业中来。

你最希望对其他打算从事开源的开发者说的话是？ Top

我想说的是开源是一种精神，是一种态度，所以有以下几点需要大家认识到：

  • 不是非得是牛人才做开源，只要你在某一领域有所见解，将自己的经验融汇到项目中来，都是值得与大家分享的。
  • 一个人的能力是有限的，一定要找到更多志同道合的人一起交流，没有绝对优秀的个人，只有绝对优秀的团队。
  • 开源是一个持久战，要坚持对项目进行阶段性的维护，与使用者进行交流，这是对使用者负责，也是对自己负责。
  • 利益是每个人都会考虑的事情，但是互联网的精神在于分享，在于参与，只要你参与了，你分享了，你就会有收获，如果你的产品真的能影响未来，那么这将是你一辈子的荣耀。
  • 最后，Never never give up！
  • 大小: 111.3 KB
  • 大小: 105.9 KB


评论 共 77 条
47 楼 ddwla4 2013-03-21 08:37
支持开源共享。对我很有帮助。
46 楼 wutao8818 2013-03-20 22:04
很不错的成果！
45 楼 theoffspring 2013-03-20 15:49
h5gallery 写道
theoffspring 写道
外国有个组件是专门画统计图表的，不过是收费，名字忘记了，既能用flash也能js实现，功能很强大。

有几个收费组件都是flash和js两用的，比如：FusionCharts


对，就是这个。在一个项目里用过。
44 楼 h5gallery 2013-03-20 14:37
bbstg123 写道
htmp5能实际应用了？

HTML5已经开始实际应用了，目前多数应用于移动应用和少数的网站上。
43 楼 bbstg123 2013-03-20 14:15
htmp5能实际应用了？
42 楼 ray_linn 2013-03-20 09:58
h5gallery 写道
theoffspring 写道
外国有个组件是专门画统计图表的，不过是收费，名字忘记了，既能用flash也能js实现，功能很强大。

有几个收费组件都是flash和js两用的，比如：FusionCharts



一般内网就使用 Microsoft Office Chart 组件就可以了。
41 楼 java_MagicWang 2013-03-20 09:56
浏览器卡死~
40 楼 h5gallery 2013-03-20 09:28
theoffspring 写道
外国有个组件是专门画统计图表的，不过是收费，名字忘记了，既能用flash也能js实现，功能很强大。

有几个收费组件都是flash和js两用的，比如：FusionCharts
39 楼 theoffspring 2013-03-19 20:50
外国有个组件是专门画统计图表的，不过是收费，名字忘记了，既能用flash也能js实现，功能很强大。
38 楼 mikkjl 2013-03-19 16:53
非常好的轮子，至少在图表控件的选择上，大家又多了一个。
37 楼 wanghetommy 2013-03-19 15:38
fyland 写道
o_o_0 写道
又一个轮子。

不断地造轮子，才会有越来越好的轮子！

轮子和轮子也是有区别的，都是进口的轮子，国产的少！
36 楼 wanghetommy 2013-03-19 15:37
cuixiping 写道
有点夸张了，并不是很强大，只能说一般一般吧，是个图表都要实现这些的。
目前仅支持饼图、环形图、折线图、面积图、柱形图、条形图，这也敢说丰富？

能得到一般般的评价，已经是对ichartjs的肯定了，我们会继续努力，不断完善图表的。
35 楼 fyland 2013-03-19 13:59
o_o_0 写道
又一个轮子。

不断地造轮子，才会有越来越好的轮子！
34 楼 o_o_0 2013-03-19 13:23
又一个轮子。
33 楼 cuixiping 2013-03-19 10:41
有点夸张了，并不是很强大，只能说一般一般吧，是个图表都要实现这些的。
目前仅支持饼图、环形图、折线图、面积图、柱形图、条形图，这也敢说丰富？
32 楼 cntjfaj 2013-03-19 09:10
看了一下,真的很不错,支持一下,项目不紧张了研究一下,谢谢作者,never give up!
31 楼 pangpang514 2013-03-18 22:48
30 楼 wanghetommy 2013-03-18 21:40
avidmouse 写道
请问怎么导出图片？

简易：浏览器右键另存为图片
复杂：
1、将canvas的数据（base64格式）传输到后台
2、在Convert.FromBase64String(data)，转换为 byte[] ,
3、将byte[]写到文件中
4、传输到前台，供下载
29 楼 avidmouse 2013-03-18 21:16
请问怎么导出图片？
28 楼 runfriends 2013-03-18 19:02
wanghetommy 写道
runfriends 写道
我看了下demo，为什么触摸屏能出tip和crosshair，但是鼠标不行？
如果我要在没有触摸屏的设备上使用，又想显示tip和crosshair该怎么做？
还是它只支持触摸屏？

原则上触屏和鼠标都是可以的，如果遇到问题，可以提交到google bug，或者直接到群里交流！感谢你的关注。


请问群号是啥啊？
我请同事测试了下，ie是没问题的。
但是在最新的chrome和最新的firefox上面不好使。
我用的操作系统是win8
27 楼 fykyx521 2013-03-18 18:11
没有对比jqchart 也是基于画布的chart
26 楼 duduheng 2013-03-18 18:02
经过阅读源码以及亲自试用，我觉得作者是存在于当今浮躁的只为完成编码的IT界程序猿中的认真人，这个开源项目非常不错！
25 楼 张洪财 2013-03-18 18:00
  very good
24 楼 shuhen2011 2013-03-18 16:24
这个图表组件库实在是太帅啦！支持作者！
23 楼 海盗大哥 2013-03-18 15:39
要是能基于标签就完美了...
22 楼 zenggang2008 2013-03-18 15:35
我们学院的,支持支持
21 楼 rich19851122 2013-03-18 15:19
封装得灰常好！
20 楼 aishu 2013-03-18 14:54
顶起.... 支持开源。   
19 楼 zx273064010 2013-03-18 14:51
     

支持作者
18 楼 wanghetommy 2013-03-18 14:47
runfriends 写道
我看了下demo，为什么触摸屏能出tip和crosshair，但是鼠标不行？
如果我要在没有触摸屏的设备上使用，又想显示tip和crosshair该怎么做？
还是它只支持触摸屏？

原则上触屏和鼠标都是可以的，如果遇到问题，可以提交到google bug，或者直接到群里交流！感谢你的关注。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 【iWeb峰会】王鹤：HTML5图表ichartjs的开源之路

    “iWeb峰会”，原“HTML5峰会”，前端开源工具专场演讲。

  • vue-router 路由 pushstate replacestate popstate 详解

    如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。使用虚拟路由的时候，angular 13的drawer 组件监听 popstate 的变化，会清空drawer内容，造成的问题。将当前URL和history.state加入到history中，并用新的state和URL替换当前。state：与要跳转到的URL对应的状态信息。

  • JS之replaceState与pushState的妙用

    场景 text前几天做web站的账单重构，原有的支付路径为www.xxx.com/a/b/c,进入我的账单之后，即www.xxx.com/a后台经过auth2.0认证后，会重定向到www.xxx.com/yy/a/，并且这个yy是一个变量值，微信支付只能设置5个支付路径，如果这样走到支付页面去支付的时候，会出现支付页面路径为注册，所以错误。 解决办法 非本场景解决办法：修改支付路径 ...

  • 移动中”的HTML5-开源图表库ichartjs-王鹤

    移动中”的HTML5-开源图表库ichartjs-王鹤 ichartjs是一款基于HTML5的图形图表库，使用纯JavaScript语言, 利用HTML5的canvas标签绘制各式图形，致力于为应用提供简单、直观、可交互的体验级图表组件。ichartjs...

  • html5论文参考文献合集

    html5被称为下一代html,是一种网络语言标准，HTML5的设计目的是为了在移动设备上支持多媒体。在移动设备开发HTML5要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎。下面我们一起看看近三年最新的"html5...

  • 动力节点王鹤Spring框架学习笔记

    动力节点王鹤老师的Spring框架教程配套笔记分享

  • 动力节点王鹤2021版SpringBoot教程-课件笔记

    动力节点王鹤老师最新版的Springboot视频教程，配套课件分享

  • Spring学习笔记（王鹤老师）

    --声明组件扫描器(component-scan),组件就是java对象 base-package：指定注解在你的项目中的包名。 component-scan工作方式： spring会扫描遍历base-package指定的包， 把包中和子包中的所有类，找到类中的注解，...

  • java 免费图表控件_转：几款免费的图表js插件

    1，ichartjs(国产)(http://www.ichartjs.com/) ===============强烈推荐ichartjs是一款优秀的国产开源插件，作者是王鹤，英文名taylor，毕业于南昌大学软件工程专业。ichartjs是一款基于HTML5的图形库。使用纯...

  • java 免费图表控件_推荐10款免费而优秀的图表插件

    随着Web技术的发展，从传统只能依靠于flash、IE的vml，各个浏览器尚不统一的svg，到如今规范统一的canvas、svg为代表的html5技术，表现点、线、面要素的技术已经越来越规范成熟。我在本篇文章中收集了10款免费开源且...

  • java 免费图表控件_给你一杯java润润喉 10款免费的图表JS插件

    随着Web技术的发展，从传统只能依 靠于flash、IE的vml，各个浏览器尚不统一的svg，到如今规范统一的canvas、svg为代表的html5技术，表现点、线、面要素的技术已 经越来越规范成熟。我在本篇文章中收集了10款免费开源...

  • 动力节点王鹤SpringBoot3教程资料代码分享

    本视频以实际项目需求入手，结合新特性@HttpExchange声明式客户端、RFC7807、ProblemDetail、预编译AOT等，详解了SpringBoot核心知识点，突出Web应用痛点解决方案。采用知识点配合项目案例的方式，让各位小伙伴轻松...

  • 动力节点王鹤老师Spring Boot3教程资料分享

    本视频以实际项目需求入手，结合新特性@HttpExchange声明式客户端、RFC7807、ProblemDetail、预编译AOT等，详解了SpringBoot核心知识点，突出Web应用痛点解决方案。采用知识点配合项目案例的方式，让各位小伙伴轻松...

  • 动力节点王鹤-SpringBoot教程学习笔记

    动力节点王鹤老师的SpringBoot教程学习笔记

  • Spring-王鹤

    需要在 Spring 配置文件中配置组件扫描器，用于在指定的基本包中扫描注解。 context:annotation-config 是用于激活那些已经在spring容器里注册过的bean（无论是通过xml的方式还是通过packagesanning的方式）上面的...

  • java 免费图表控件_JAVA制图软件中:10款免费而优秀的图表JS插件

    随着Web技术的发展，从传统只能依靠于flash、IE的vml，各个浏览器尚不统一的svg，到如今规范统一的canvas、svg为代表的html5技术，表现点、线、面要素的技术已经越来越规范成熟。我在本篇文章中收集了10款免费开源且...

  • 【HTML初学第三周】

    HTML初学第三周

  • 毕业设计&课设_CUMT 信息安全专业毕业设计：基于区块链的能源交易系统，含架构、部署等多方面详细介绍.zip

    毕业设计&课设_CUMT 信息安全专业毕业设计：基于区块链的能源交易系统，含架构、部署等多方面详细介绍.zip

Global site tag (gtag.js) - Google Analytics