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

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