C3.js -- 零学习曲线构建强大图表的开发库

目前市面上绘制图表的JavaScript库已经多如繁星，在这瀚海星云中C3.js可谓是一员新秀。C3.js是基于D3 visualization library开发的JavaScript库，它可以让开发者构建出可复用的图表，并且还提供了一系列图表上的交互行为。

通过C3，只需要往generate函数中传入数据对象就可以轻松的绘制出图表。

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        type: 'spline'
    }
});

虽然目前C3的文档比较少，也比较简单，但是C3提供了很多图表开发示例，从中我们可以了解到它的功能和强大之处。

使用C3构建的图表对象就给我们提供了不少有用的功能，比如加载和卸载数据集：

chart.load({
    columns: [
        ['data1', 230, 190, 300, 500, 300, 400]
    ]
});

目前市面上我们可选择的图表工具琳琅满目，有开源的也有商业化的，而且C3也不是第一个基于D3开发的库，像nvd3.js和rickshaw.js都是基于D3开发的，并且都声称可以利用D3的强大功能来创建可复用的图表。

D3在2010年被人们熟知，虽然它不是严格意义上的图表库，但是它秉承“用HTML，SVG和CSS给数据赋予生命”的理念使开发者们创造出了更绚丽的作品。然而D3虽然赢得了广大开发者的好评，但是其较高的学习曲线却成为了它进一步发展的绊脚石。

正如capkutay在Hacker News中所说：“用D3创建一个折线图需要开发者在自定义样式、图表元素提示、图表图例等等上面花费几天到几周的时间”。

InfoQ采访了C3的开发者Masayuki Tanaka，一起探讨了开发C3的缘由和其发展方向。

InfoQ：是什么原因让你开发了C3？

MT：“当我开发一个Web应用时，我希望在图表绘制出来后依然能控制图表的状态，并且开始有事件交互。然而我发现市面上的图表开发库都无法达到我的目的（它们基本上只是用来绘制图表）。”

InfoQ：C3与其他图表开发库有哪些不同的地方？

MT：“C3可以通过它的API控制图表的状态，比如将交互集中在数据方面，可以选择某个数据点、显示或隐藏数据以及更新数据。我想这可能就是C3最与众不同的特点。有了这个特点，Web应用或者说开发者就可以根据比如用户交互事件、服务端响应事件以及其他事件来改变图表。”

InfoQ：是什么让你决定基于D3开发C3呢？

MT：“在实现数据可视化方面D3无疑是做得最成功的一个。我认为数据驱动作为D3的基本架构，是最适合C3需求的，它能让我们更直观、更方便地编写代码（比如我们可以很容易的将数据绑定到某个元素上或者获取某个元素的数据）。同时我也希望当图表的数据发生变化、图表位置发生变化、添加或移除图表、展示或隐藏图表等等的时候，可以用流畅的动画效果向人们展现。”

InfoQ：对C3今后的发展有何规划呢？

MT：“首先，我想改进插件架构。在0.3版本中，C3引入了插件架构，但是由于实现得有点混乱，导致使用其内部函数并改变其行为还有点困难。这是我们必须要先解决的一个问题，以便让开发者能更好地使用。

其次，我们要完善C3的文档。目前C3几乎没有什么可以参考的文档，所以我们很难去理解C3能实现什么，不能实现什么。我们在近期就会做这件事，同时我们还想增加更多C3的开发示例，像D3那样。我觉得这样会让开发者更容易上手。”

不论是nvd3.js还是rickshaw.js，他们初期的运作模式还是以营利为目的，不过现在已经开源了。Highcharts是比较流行的商业化图表库，但是每个开发者需要花费390美元购买license。相比之下，C3遵循MIT开源协议的独立项目。

在Hacker News中有一篇讨论C3的帖子，一位视觉开发者muyueh担心有了C3，他的客户就不再需要他这样的D3开发人员了。

虽然D3的发展已经达到了较高成熟度，超过3200次的代码提交和173个发布版本足以说明这一点，但是目前已经超过一个月没有收到过开发者的更新了。D3的创始人Mike Bostock在他的博文中也表达了他在构建可复用图表方面的见解。

参考英文原文：C3.js Brings Charting Power Without the Learning Curve

感谢曹知渊对本文的审校。

给InfoQ中文站投稿或者参与内容翻译工作，请邮件至[email protected]。也欢迎大家通过新浪微博（@InfoQ）或者腾讯微博（@InfoQ）关注我们，并与我们的编辑和其他读者朋友交流。