BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

基于Canvas的图表类库Chart.js 0.1发布

| 作者 Tim Heckel 关注 0 他的粉丝 ,译者 孙镜涛 关注 2 他的粉丝 发布于 2013年3月27日. 估计阅读时间: 3 分钟 | Google、Facebook、Pinterest、阿里、腾讯 等顶尖技术团队的上百个可供参考的架构实例!

Nick Downie于3月17日发布了一款基于canvas的JavaScript图表类库Chart.js,该类库基于MIT开源许可发布,是SVG图表类库的一种替代方案。

“我想创建一个开箱即用的图表解决方案,该解决方案提供简单且易于理解的API,Web设计者能够通过这些API实现美观的图表,同时它也需要足够的轻量便利,以便开发人员能够在复杂的Web应用中引用它”Downie说。

Chart.js暴露了6种不同的图表类型,它们建立在数据和选项相结合的API之上。Downie花了一个月的时间为他这个大学期间最后的项目构建类库及支持文档。在17日开放源码之后,“我完全没有料到会有这么多的响应,真是惊呆了——我在Hacker News上发布了一个帖子,一天之后就有几万人访问了这个网站,同时Github上的问题和贡献收件箱都满了,”Downie说。

与SVG图表类库不同的是, 对于每一个图表元素而言,chart.js使用一个单独的canvas节点进行输出,而不是输出多个DOM节点。由于使用了单独的节点输出,所以chart.js只有一个事件监听器钩子,同时“保持对任何区域的跟踪都需要在内存中交互,在检查当前的鼠标位置时需要迭代这些内容。用户每次移动他们的鼠标时都需要加载整个循环。同时这也意味着如果我们直接在canvas上绘制工具提示那么需要对canvas进行清除和重画。”Downie说。“谈到这方面的定制化,我认为要实现一个简单的能够满足所有人需要的API几乎不可能——有些人可能想要工具提示,其他人可能想要在图表上画线,还有人想要高亮数据点,各种需要不一而足。如果都满足那么它很快就会变得非常复杂,”Downie说。与可能需要添加工具提示相比,Downie更愿意推动chart.js成为一个替代方案,“让那些想要在自己的网站和应用中包含简单、静态图形的开发者使用Chart.js,而不再使用过度复杂且超负载的解决方案(基于SVG的图表方案)”。

虽然简化API是canvas方式的一个优点,但是Chart.js失去了基于向量的SVG图表工具所具有的伸缩性,因为它依赖于canvas所产生的光栅图像。在这种情况下,“(为canvas)声明基于百分比的CSS宽度进行响应布局。对于高DPI显示设备而言,Chart.js会通过CSS自动地扩展到正确的设备像素比(devicePixelRatio)并缩放回正确的设备像素大小,”Downie说。

Canvas本身就具有通过toDataUrl导出base64图片的能力。“我希望在将来的发布版中能够向创建完成的图表中添加一些实用功能,这样用户便能够很容易地清除、更新或者导出图表了——本质上Chart.js会为这个功能提供一个封装,”Downie说。

Downie将在春天毕业,他希望向Chart.js中添加一些其他的功能,也希望能在毕业之后集中精力做好全职工作。“(Chart.js)给了我一个非常好的理由,让我能够同时设计并开发一些非常优雅的作品,并对Web设计社区中的人们有所帮助(希望如此)。”

查看英文原文Canvas-Based Chart.js Version 0.1 Released

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我
社区评论

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT