极客视点
极客时间编辑部
极客时间编辑部
113241 人已学习
免费领取
课程目录
已完结/共 3766 讲
2020年09月 (90讲)
时长 05:33
2020年08月 (93讲)
2020年07月 (93讲)
时长 05:51
2020年06月 (90讲)
2020年05月 (93讲)
2020年04月 (90讲)
2020年03月 (92讲)
时长 04:14
2020年02月 (87讲)
2020年01月 (91讲)
时长 00:00
2019年12月 (93讲)
2019年11月 (89讲)
2019年10月 (92讲)
2019年09月 (90讲)
时长 00:00
2019年08月 (91讲)
2019年07月 (92讲)
时长 03:45
2019年06月 (90讲)
2019年05月 (99讲)
2019年04月 (114讲)
2019年03月 (122讲)
2019年02月 (102讲)
2019年01月 (104讲)
2018年12月 (98讲)
2018年11月 (105讲)
时长 01:23
2018年10月 (123讲)
时长 02:06
2018年09月 (119讲)
2018年08月 (123讲)
2018年07月 (124讲)
2018年06月 (119讲)
时长 02:11
2018年05月 (124讲)
时长 03:16
2018年04月 (120讲)
2018年03月 (124讲)
2018年02月 (112讲)
2018年01月 (124讲)
时长 02:30
时长 02:34
2017年12月 (124讲)
时长 03:09
2017年11月 (120讲)
2017年10月 (86讲)
时长 03:18
时长 03:31
时长 04:25
极客视点
15
15
1.0x
00:00/05:39
登录|注册

九款好用的JavaScript图表库

讲述:丁婵大小:2.59M时长:05:39
市面上有很多 JavaScript 图表库,Aglowid IT Solutions 的联合创始人索拉巴·罗特(Saurabh Barot)列出了其中他认为的几款佼佼者,可以用在你的新项目中。

1.D3.js

这是一个图形 JavaScript 库,功能众多,十分强大。你可以用它对文档做数据驱动的转换,然后将任意数据绑定到 DOM 上。
D3 有一些较小的技术模块,上手并不容易。即使用它创建简单的图表也可能需要复杂的步骤。你需要明确定义包含图表项和轴在内的所有元素。它提供了一些示例,教你如何使用 CSS 来设置图表元素的样式,开发者无法自动应用基于图表的功能。

2.Highcharts

这是市面流行的 JavaScript 图表库之一,并被许多大公司采用。为了提供对 IE6 到 IE8 的兼容性,它先使用 SVG 然后转向 VML 来生成图表。它的文档里有很多 API 文档教程和相关主题。它的 API 易于使用,开发者可以使用配置选项来开发图表。对于个人和非商业用途,Highcharts 可免费使用。

3.Chart.js

这是一个开源 JavaScript 库,支持 8 种类型的图表。它只有 60kb,是一个非常小的 JS 库。它支持的图表类型丰富,还支持时间序列。在呈现层面,它使用 canvas 元素并能响应窗口大小调整缩放比率。
在它的网站中没有展示示例源代码,但可以在 GitHub 仓库中找到。它的 API 简洁直观。用户使用配置选项来创建和修改图表。它的文档内容详实,附带代码片段和属性 API 的教程。这个库可免费用于商业和个人用途,是开源项目。

4.amCharts

它已经推出了第 4 版,历史也挺长了。此版本支持 SVG 动画引擎,可帮助开发人员创建电影级场景。
它的示例图表非常漂亮,大多数示例都提供了滑块 UI,还附带许多调节器可以实时调整图表的变量。它的文档包括完整的 API 属性描述和许多教程。它提供了一个声明性 API 来创建图表,与基于配置的方法略有不同。它有很好的代码自动完成功能,但在配置图表时需要的代码略多。

5.谷歌图表

它功能强大,易于使用。其示例图表简洁易读。可以在它的图表库和扩展库中找到许多图表类型。通过层叠菜单可以查看更多图表类型。每种图表类型都有附带动态实例和很容易看懂的专门教程。这些教程附带 API 列表,并包含相关功能的代码。它为新人提供了非常愉快的入门体验。
谷歌图表可以免费使用,但也有一些局限。它是一个 Web 服务,不能在本地托管。谷歌还退役了很多 API,所以它不适合用在关键项目中。

6.ZingChart

它有许多图表类型,它有一系列强大的功能和许多自定义选项。它的示例图表有许多样式主题,其中一些看着很不错。还有许多选项可以用来添加样式。示例图表没有覆盖它支持的所有图表类型。
它的文档附带了许多功能教程,覆盖了所有类型的图表和全部 API。ZingChart 使用配置选项自定义图表。示例中有很多属性设置,但这些带有属性设置的示例可能会让用户糊涂,不知道图表到底需要哪些设置。

7.FushionCharts

它最开始是基于 Flash 的图表插件,有着很长的历史。它是一个健壮的图表可视化库,提供对现代浏览器的支持,支持许多数据格式,还兼容 IE6。它还支持许多服务端编程语言和 JavaScript 框架。
它的图表库附带了许多看上去简洁大方的示例。它的文档带有许多良好的 API 描述,而且每种图表类型都有示例。用户可以通过任务和图表功能分组配置属性。

8.Flot

它用法简单、外观漂亮,交互功能丰富,是最优秀的纯 JavaScript 绘图库。它有效兼容所有新式浏览器,它是最流行、历史最长的图表库。Flot 支持线、点、填充区域、条形以及它们的各种组合。Flot 的工作机制是创建一个可以放入图表的占位符 div。

9.Sigmajs

这款产品可以用来创建一些漂亮的图形来在 Web 上显示网络,并在大型 Web 应用中展示简单的交互式网络;这种交互式网络具有动态探索功能。无论对初学者还是高级用户来说它都很好用。
Sigmajs 默认可配置,支持鼠标和触摸两种交互,并可以根据容器大小变化缩放显示。它还有自定义渲染,可以用一组工具和设置来定制网络的交互细节。
以上就是今天的内容,希望对你有所帮助。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结
该免费文章来自《极客视点》,如需阅读全部文章,
请先领取课程
免费领取
登录 后留言

全部留言(1)

  • 最新
  • 精选
  • Cryhard
    对于国内开发者来说,在echarts之外,可以尝鲜的还有这些?
    2
    2
收起评论
大纲
固定大纲
1.D3.js
2.Highcharts
3.Chart.js
4.amCharts
5.谷歌图表
6.ZingChart
7.FushionCharts
8.Flot
9.Sigmajs
显示
设置
留言
1
收藏
99+
沉浸
阅读
分享
手机端
快捷键
回顶部