企业如何选择合适的技术方案?点击看专家聊数字化转型落地过程中的困难和解决办法 了解详情
写点什么

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

  • 2014 年 9 月 23 日
  • 本文字数:1744 字

    阅读完需:约 6 分钟

目前市面上绘制图表的 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 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ )或者腾讯微博( @InfoQ )关注我们,并与我们的编辑和其他读者朋友交流。

2014 年 9 月 23 日 08:463341

评论

发布
暂无评论
发现更多内容

区块链难在落地,亟需补人才缺口迎爬升期

CECBC

区块链

GitHub上爆火的Java性能优化100+小技巧!(干货建议收藏)

Java架构师迁哥

Hive HMS Canary 时间较长异常分析

笨小康

大数据 hadoop hive

日记 2021年2月19日(周五)

Changing Lin

2月春节不断更

6.render阶段(厉害了,我有创建Fiber的技能)

全栈潇晨

React React Hooks react源码

让虞书欣、李诞拍到停不下来!AR+AI双引擎的互动小游戏,如何打开IP新玩法?

爱奇艺技术产品团队

最新Hadoop的面试题总结

大数据老哥

TCP 协议灵魂问题,巩固你的网路底层基础

Elasticsearch Search API 基础语法

escray

elastic 七日更 死磕Elasticsearch 60天通过Elastic认证考试 2月春节不断更

linux内核协议栈 邻居协议之ARP协议处理初始化

赖猫

Linux 协议栈 Linux内核

前端学习总结,经验分享,项目经验分享过程

我是哪吒

学习 程序员 Vue 大前端 2月春节不断更

诊所数字化:诊所医护人员绩效指标评估方式

boshi

绩效 数字化转型 医疗 七日更

【LeetCode】K 连续位的最小翻转次数Java题解

HQ数字卡

算法 LeetCode 2月春节不断更

技术需求文档,应当这么写!

穿甲兵

需求 文档

地表建筑物识别Dayo1

IT蜗壳-Tango

七日更 2月春节不断更

如何提升网页核心指标

Vincent

LeetCode题解:1143. 最长公共子序列,动态规划,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

【STM32】ST-LINK下载器下载后需复位,程序才运行的问题

AXYZdong

硬件 stm32 2月春节不断更

竞猜商城系统软件制作

v16629866266

百度Hydra工具在移动端UI兼容性测试上的高效应用

百度Geek说

测试 UI

使用 Tye 辅助开发 k8s 应用竟如此简单(三)

newbe36524

Docker 微服务 k8s dotnet

DPDK大页内存原理

赖猫

Linux DPDK

一、MongoDB简介

Kylin

数据库 mongodb 学习 七日更 二月春节不断更

5.state更新流程(setState里到底发生了什么)

全栈潇晨

React React Hooks react源码

电信的标准化组织

Geek_古藤模根

标准化 电信

元旦立下的Flag,春节后该如何实现?

脑极体

翻译:《实用的Python编程》01_06_Files

codists

人工智能 后端 python 爬虫 数据结构与算法 文件操作

如何读懂CNN、BBC、经济学人、卫报、纽约时报?看完这本经典即可事半功倍!

wbliu85

学习 英语

对DevOps的九大误解,是时候纠正了!

禅道项目管理

开源 DevOps 敏捷 自动化 持续交付

十四五期间我国区块链技术趋势特征分析

CECBC

区块链 大数据

15. Python 程序运行速度如何提高十倍?第一遍滚雪球学 Python 收工

梦想橡皮擦

Python 2月春节不断更

C3.js -- 零学习曲线构建强大图表的开发库_JavaScript_David Iffland_InfoQ精选文章