html5图表组件库ichartjs作者王鹤专访 -买球官网平台
声明：iteye精华文章的买球官网平台的版权属于iteye网站所有，严禁任何网站转载本文，否则必将追究法律责任！
ichartjs是一款基于html5的图形图表库，使用纯javascript语言, 利用html5的canvas标签绘制各式图形，致力于为应用提供简单、直观、可交互的体验级图表组件。ichartjs基于apache license 2.0协议开源，目前支持饼图、环形图、折线图、面积图、柱形图、条形图。
为了使大家对ichartjs有进一步的了解，本期我们采访了ichartjs的作者。
iteye期待并致力于为国内优秀的开源项目提供一个免费的推广平台，如果你和你的团队希望将自己的开源项目介绍给更多的开发者，或者你希望我们对哪些开源项目进行专访，请告诉我们，发站内短信给或者发邮件到[email protected]即可。
先来个自我介绍吧！
王鹤，英文名taylor，毕业于南昌大学软件工程专业。一直从事javaee的企业应用的研发和架构工作，有多年的项目实战经验，目前专注于能源行业的mdm产品设计与实施，一直关注html5技术的发展。
我秉承的理念是：“技术这条路上虽然崎岖，但值得坚持”。
ichartjs是什么？
ichartjs 是一款基于html5的开源图表库。使用纯javascript语言, 利用html5的canvas标签绘制各式图表。 目前ichartjs支持的图表类型有饼图、圆环图、柱形图、条形图、堆积图、折线图、面积图以及组合图。ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是基于html5 web/mobile app图表展示方面的买球软件推荐的解决方案。目前官方的最新版本为。
项目买球官网平台主页：
图表示例：
新浪微博：
google code：
github：
目前html5图表库有很多，为什么还要开发ichartjs？
开发ichartjs项目主要有以下几点原因：
- ichartjs是在2011年4月份开始的，当时，html5不像2012年那么”火”，国内市场上基于html5流行的图表库也不像现在这么多，基于html5的项目也很少。但是市场已经对html5产生了浓厚的兴趣。
- 没有一款产品是适合所有行业的，特别是一些不常见的图表类型或者个性化需求。比如：材料力学性能状况分析(非线性图表)、石化炼油综合分析(油罐图)等。展望未来，在专业领域，这样的需求会越来越多。市场上这些常见的图表在绘制这类图表的显然能力不足。ichartjs也是基于此应运而生的，它适用于这类需求的个性化开发。
- 国内开源软件的氛围与国外存在一定的差距，我辈有义务、有责任贡献个人一点薄弱的力量，传播知识，传递理想。在国内，一般开源框架都首选国外的。如：struts，spring，ruby on rails等等。大家认为这些开源框架”安全”。而ichartjs定位是图表组件，这样的”组件”形式更能容易让大家所接受。在技术上更可控一些。
与其他图表库相比，ichartjs的优势是什么？
目前，从市场上来说，主要有canvas、svg、flash。pc机上flash表现强劲，svg是目前解决跨平台比较好的方案，而真正用纯canvas绘制图表的框架比较少。主要原因之一是ie6,7,8系列不支持canvas标签。而ichartjs采用canvas作为绘制图表的方案的原因是ichartjs致力于为基于html5的web/mobile app提供图表展示方面的买球软件推荐的解决方案。有关于canvas、svg、flash等技术的对比大家可以在网络上获取，下面我们就几个方面将ichartjs与其他常见的几款图表库进行对比：
| | 实现方式 | 商业收费 | 3d效果 | 依赖性 | 导出图片 | 图表种类 |
| awesomechartjs | canvas | 免费 | 无 | 独立 | 能 | 少 |
| rgraph | canvas | 收费* | 有 | 独立 | 能 | 丰富 |
| highcharts | svg | 收费 | 无 | jquery | 不能 | 丰富 |
| fusion chart | flash/svg | 收费 | 有 | flash/jquery | 能 | 丰富 |
| flot | canvas | 免费 | 无 | jquery | 不能 | 丰富 |
| ichartjs | canvas | 免费 | 有 | 独立 | 能 | 丰富 |
*rgraph免费的条件是要在使用的网站上链接rgraph网站
其实对于国内的部分开发者来说，ichartjs有一个不可小觑的优势是：便捷、实时、无障碍的交流。
浏览器兼容性如何？你是如何解决兼容问题的？
ichartjs利用html5的canvas标签进行图表绘制，天生的跨平台属性着实解决了软件产品跨平台的问题。目前上，还有一部分浏览器不支持html5 canvas(text api)特性。所以我们建议在移动项目或者html5的项目上使用ichartjs。
ichartjs在移动平台上表现如何？
ichartjs可以利用uiwebview与webview组件在ios 3 、android 2.3 平台上运行，从目前大家的使用情况反馈上看，从交互性与渲染速度都可以达到理想状态。
移动平台的使用，大家要针对各个机型进行测试。另外，大家可以通过进行渲染速度测试。
未来会加入哪些特性？
ichartjs会在以下两大方面继续努力：
- 图表交互性。ichartjs会不断完善/改善图表的交互性，让图表不仅仅能看，还要能操作。也许会说话也是有可能的。让图表成为一个传递信息的一个窗口。
- 扩展接口的开放。一个软件的流行，必然需要满足大众的需求，所以我打算提供更多的扩展接口给开发者。让开发者根据自己的需求，打造个性化图表。类似开发jquery插件的套路。
你怎么看待html5的发展？
w3c 在其网站上向我们宣告”html5是开放web平台的基石”。这充分的展示出了html5在未来开放平台中的重要地位。
但是从目前情况上看，一方面，html5本身的实现程度还有待统一与完善，如碎片化和安全是我们在选择html5时需要考虑的因素。另一方面，市场的成熟度与相关人员的经验都有待提高。
虽然目前完全的html5应用还不是很理想。但是这一些阻挡不了一个革命性的技术的诞生。目前大家比较接受的方案是hybrid app。其实无论是移动互联网、桌面应用、甚至tv平台，都可以进行hybrid模式的开发。哪怕从应用html5新标签开始，也是你迈向html5的一步。
你认为html5会给应用开发带来什么样的变革？
目前大家关注的比较多的是html5与native app之间的较量。而作为一直从事企业应用开发的我来说，则更关注html5在企业中发挥的作用和占有的地位。一些龙头企业已经开始着手html5企业平台的搭建，但是由于企业应用的特殊性，普及html5应用尚需要一段时间。但是html5一定会成为未来企业主流。这是因为随着企业对关键业务应用的依赖性，it技术也随之变得日益复杂，使得实现性能、可用性和用户体验目标成为一项艰巨的挑战。
同时，时代的发展迫使企业越来越快地引入新特性以应对复杂多变的市场竞争。采用html5技术可以有效应对这一挑战。会给企业应用带来变革性的影响，从而衍生出更符合用户需求的创新性产品。
引入html5技术则将会在以下几个方面给企业应用带来影响：
- 体验性：随着技术的发展，传统的技术已经不能满足用户的高标准的体验需求，从小小的表单到流行的触摸屏都将成为衡量一个合格产品的标准。
- 功能性：html5引入的新特性canvas、定位、本地存储、websocket等等都将会催生一系列创新的功能出现。如：可视化分析，定位打卡等等。
- 便捷性：采用html5技术构建移动互联网平台将会使工作变得便捷，多客户端无缝的操作给用户带来一致的体验。
- 可视化：html5 canvas的出现可以很轻松的实现数据的图形可视化，从而有效地传达与沟通信息。
从开始到1.0发布用了多长时间？你是如何坚持的？
我们用列表来展示一下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变得越来越好。
你怎样看待国内的开源环境？
我觉得近几年国内的开源环境正在逐步的改善，虽然与国外还存在巨大差距，但是我们已经开始有这样的氛围了。
首先，国内的知名企业如百度、淘宝等鼓励员工从事参加开源项目，同时也将一些项目开源出来，极大的推动了开源向前的脚步。
其次，各行业的技术达人们，经过这些年的积累，拥有了成熟的软件设计思想与实战经验，软件质量整体提升，一些在公司内部应用的框架或者平台已经达到了一定的高度。
同时，近些年国内开发者的数量呈现出良好的增长态势，大家对国内开源项目也产生了浓厚的兴趣，大家都很积极的参与进来。ichartjs就是在广大开发者的帮助下完成的。
最后，像iteye这样的权威技术网站为开源项目提供了一个推广平台，可以让更多的人了解开源项目。所以，我相信在大家的不断努力下，会有更多优秀的开源项目出现，会有更多的开发者投入到开源事业中来。
你最希望对其他打算从事开源的开发者说的话是？
我想说的是开源是一种精神，是一种态度，所以有以下几点需要大家认识到：
- 不是非得是牛人才做开源，只要你在某一领域有所见解，将自己的经验融汇到项目中来，都是值得与大家分享的。
- 一个人的能力是有限的，一定要找到更多志同道合的人一起交流，没有绝对优秀的个人，只有绝对优秀的团队。
- 开源是一个持久战，要坚持对项目进行阶段性的维护，与使用者进行交流，这是对使用者负责，也是对自己负责。
- 利益是每个人都会考虑的事情，但是互联网的精神在于分享，在于参与，只要你参与了，你分享了，你就会有收获，如果你的产品真的能影响未来，那么这将是你一辈子的荣耀。
- 最后，never never give up！
您还没有登录,请您登录后再发表评论
77 楼 一个橘子 2016-10-31 16:28
76 楼 2013-09-22 15:33
75 楼 2013-08-09 12:17
74 楼 2013-07-31 12:13
73 楼 2013-07-31 08:51
1.图表与图例的交互没有，我试着去自己实现，又感觉较复杂，希望能提供解决方法。
比如饼图，点击图例的某一项，饼图对应块bound()
2.个人感觉用户交互方面做的不够好
图表与图例的交互问题已经修复。
72 楼 2013-07-26 12:51
1.图表与图例的交互没有，我试着去自己实现，又感觉较复杂，希望能提供解决方法。
比如饼图，点击图例的某一项，饼图对应块bound()
2.个人感觉用户交互方面做的不够好
71 楼 2013-06-25 18:30
有几个好像是模仿highcharts
ichartjs样式可以很灵活的配置，所以模仿highcharts的样式做了几个示例。目前没有专注动画方面，所以动画效果比较单一。完善好产品的基本特性之后，我们会在动画方面做出改进。感谢对ichartjs的关注。
在一些项目里,甲会要求做一些效果
目前ichartjs还处于发展阶段，我们会不断的完善，为成为一流图表组件而努力奋斗。
可以把动画接口
动画接口已经预留了，只是目前忙于优化图表本身，忙完这段时间后，写一个关于自定义动画的文档，用于实现个性化动画效果
70 楼 2013-06-25 18:04
有几个好像是模仿highcharts
ichartjs样式可以很灵活的配置，所以模仿highcharts的样式做了几个示例。目前没有专注动画方面，所以动画效果比较单一。完善好产品的基本特性之后，我们会在动画方面做出改进。感谢对ichartjs的关注。
在一些项目里,甲会要求做一些效果
目前ichartjs还处于发展阶段，我们会不断的完善，为成为一流图表组件而努力奋斗。
可以把动画接口
69 楼 2013-06-24 19:58
有几个好像是模仿highcharts
ichartjs样式可以很灵活的配置，所以模仿highcharts的样式做了几个示例。目前没有专注动画方面，所以动画效果比较单一。完善好产品的基本特性之后，我们会在动画方面做出改进。感谢对ichartjs的关注。
在一些项目里,甲会要求做一些效果
目前ichartjs还处于发展阶段，我们会不断的完善，为成为一流图表组件而努力奋斗。
68 楼 2013-06-17 11:22
有几个好像是模仿highcharts
ichartjs样式可以很灵活的配置，所以模仿highcharts的样式做了几个示例。目前没有专注动画方面，所以动画效果比较单一。完善好产品的基本特性之后，我们会在动画方面做出改进。感谢对ichartjs的关注。
在一些项目里,甲会要求做一些效果
67 楼 2013-06-08 14:53
有你们的支持，我们会一如既往的向前冲的
66 楼 2013-06-08 14:53
有几个好像是模仿highcharts
ichartjs样式可以很灵活的配置，所以模仿highcharts的样式做了几个示例。目前没有专注动画方面，所以动画效果比较单一。完善好产品的基本特性之后，我们会在动画方面做出改进。感谢对ichartjs的关注。
65 楼 2013-06-08 14:51
我是公司负责报表图表开发的，目前用的是国外某图表产品，支持flash/html5，默认flash在ie浏览器下总会有一些问题，而html5对于低版本浏览器的不支持也让人很失望，希望中国浏览器发展脚步能快一些，让我们尽快感受到html5的气息。
最后我有几点功能的建议：
①考虑是否可以支持滚动条：x轴数据过多的时候显示肯定会变形的，所以考虑加入滚动条功能，能够解决大数据显示的问题
②饼状图点击了一个区域会突出显示，在点击另一块区域的时候建议将原来突出的块收回去，这个问题其实应该追溯到钻取事件：如果你点击了某一块进行钻取，那么你再点击另一块钻取的时候用户看到两块都是突出的，用户怎么知道哪一块是正在钻取的数据呢？
ps：我怎么感觉jira的图表跟这个很相似呢
感谢对我们的关注和提出的意见。
①对于滚动条、后期版本中，我们计划增加缩放和移动的api。尚处于计划阶段。
②在配置里增加 mutex:true 表示是否仅有一块扇形区处于弹出状态。可以满足原来突出的块收回去。
64 楼 2013-06-08 14:47
目前版本不支持每段线段的颜色分别设置
63 楼 2013-06-06 16:52
62 楼 2013-06-03 21:21
有几个好像是模仿highcharts
61 楼 2013-06-03 16:42
另外点状图（气泡图）、雷达图可以试试，这个估计也有用户用
60 楼 2013-06-03 16:35
我是公司负责报表图表开发的，目前用的是国外某图表产品，支持flash/html5，默认flash在ie浏览器下总会有一些问题，而html5对于低版本浏览器的不支持也让人很失望，希望中国浏览器发展脚步能快一些，让我们尽快感受到html5的气息。
最后我有几点功能的建议：
①考虑是否可以支持滚动条：x轴数据过多的时候显示肯定会变形的，所以考虑加入滚动条功能，能够解决大数据显示的问题
②饼状图点击了一个区域会突出显示，在点击另一块区域的时候建议将原来突出的块收回去，这个问题其实应该追溯到钻取事件：如果你点击了某一块进行钻取，那么你再点击另一块钻取的时候用户看到两块都是突出的，用户怎么知道哪一块是正在钻取的数据呢？
ps：我怎么感觉jira的图表跟这个很相似呢
59 楼 2013-06-01 20:56
58 楼 2013-05-08 11:38
只好用highcharts
不过移动项目上还是可以放心使用的
57 楼 2013-05-08 09:18
只好用highcharts
56 楼 2013-05-06 21:15
多谢关注与支持
55 楼 2013-05-06 13:32
54 楼 2013-04-25 09:32
53 楼 2013-04-17 23:06
52 楼 2013-03-22 20:59
多谢阿超帅哥的大力支持！
51 楼 2013-03-21 14:34
50 楼 2013-03-21 10:04
中文可以直接显示，注意页面编码问题，文字斜着可以实现，请参考：
http://www.ichartjs.com/samples/index.html?page=column2d_05.html&pageno=2
感谢关注ichartjs
加上链接：
49 楼 2013-03-21 10:03
中文可以直接显示，注意页面编码问题，文字斜着可以实现，请参考：
http://www.ichartjs.com/samples/index.html?page=column2d_05.html&pageno=2
感谢关注ichartjs
48 楼 2013-03-21 09:15