文档章节

美观又实用,10 款强大的开源 Javascript 图表库

编辑部的故事
 编辑部的故事
发布于 2017/02/23 16:35
字数 1256
阅读 7029
收藏 458

随着发展,现代 Web 设计在改善体验和功能的同时,对于美观的追求也越来越高,可视化、交互式、动态等元素和效果似乎已成为标配。

以下是为开发者推荐的 10 款开源 Javascript 图表库,可以帮助实现各种漂亮的功能。话不多说,直接开始吧!

1、ECharts

ECharts 由百度前端技术部开发的,是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

ECharts 有良好的自适应效果,ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。

2、Chart.js

Chart.js 是一个简单、面向对象、为设计者和开发者准备的 Javascript 图表绘制工具库,基于 HTML5 canvas 技术,支持所有现代浏览器,并且针对 IE7/8 提供了降级替代方案。

Chart.js 不依赖任何外部工具库,轻量级(压缩之后仅有4.5k),并且提供了加载外部参数的方法。能用多种不同的方式让数据变得可视化。

3、jqPlot

jqPlot 是一个非常强大的基于 jquery 类库的 Javascript 图表工具,可在网页中绘制线状、柱状、饼状等多种样式图表。

jqPlot 强大之处在于将内容呈现为动态嵌入的静态图像,这意味着图表数据可以通过 Ajax 更新,甚至不需要刷新页面。 某些图表类型甚至具有悬停选项,可在悬停时显示相关数据。

4、Chartist.js

Chartist.js 是一个使用 SVG 构建的简单的响应式图表库,可以作为前端图表生成器。同样兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari等)。

Chartist.js 每个图表从大小到配色方案都是完全响应和高度可定制的,依靠 SVG 将图形作为图像动态地呈现到页面上。完全使用 SASS 构建,并且支持自定义。

5、xCharts

xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript 图表库,使用 HTML、CSS、SVG 实现图表,适用于熟悉数据可视化的用户。

通过 xCharts 渲染的所有内容都有很强的适应性,在与数据交互时添加自己的动画或缓动函数也较为容易。

6、C3.js

C3.js 也是一个基于 D3.js 的可重用的开源 JavaScript 图表库。这意味着将数据图表绘制到 HTML 页面上的过程得到简化,不需要大量的自定义 D3 图表代码,也相对容易上手。

C3.js 所有的数据是完全动态的,从工具到图形颜色。它使用非常舒服,有充分的可定制性和控制性,支持多种图表类型。

7、Pizza Pie Charts

Pizza Pie Charts 是由 ZURB 开发的一个知名的 JavaScript 库,用于渲染基于 SVG 的饼图。

Pizza Pie Charts 所有的显示设置和选项都可以直接在 CSS 或 JavaScript中 修改。它专注于以最好的方式将数据呈现到饼图。如果是其他图表样式,还是建议使用其它的几个库。

8、Protovis

Protovis 使用简单的标记(例如条形和点)组成数据的自定义视图。 与一些低级图形库不同,Protovis 通过对数据进行编码的动态属性来定义标记,允许继承、缩放和布局来简化构建。

Protovis 有能力渲染非常独特的图表样式,它使用 JavaScript 和 SVG 进行 Web 本地可视化,无需插件(除了需要一个浏览器)。

9、Flot

Flot 是 jQuery 的纯 JavaScript 图表库,专注于使用简单,外观漂亮和强互动功能。它是特定的 jQuery 库,这意味着你需要使用它需要熟悉基础的 jQuery。但是从另一方面来说,这意味着你可以全面控制呈现,动作和用户交互。

使用 Flot 的主要好处是能够创建动画绘制图,可以以此展现大量的结果数据。它兼容大多数现代浏览器,向下兼容到 IE6 和 Firefox2。

10、Dygraphs

Dygraphs 也是一个基于 HTML5 canvas 的 JavaScript 图表库,可以生成一个可交互式的,可缩放的的曲线表,可以用来显示大密度的数据集(比如股票、气温等等),并且可以让用户来浏览和解释这个曲线图。

Dygraphs 在移动设备上还可以通过缩放显示效果来支持交互。如果你想用 JavaScript 绘制数据,那么 Dygraphs 是一个不错的选择。

© 著作权归作者所有

编辑部的故事

编辑部的故事

粉丝 1434
博文 263
码字总数 507562
作品 0
深圳
运营/编辑
私信 提问
加载中

评论(18)

聆听幸福
竟然没有highcharts
喂~别哭啦!再哭、就亲你.
喂~别哭啦!再哭、就亲你.
为啥没有阿里的G2
Jeffsky
Jeffsky
竟然没highcharts + 1
Tian_Ya
Tian_Ya

引用来自“郭大侠写代码”的评论

竟然没highcharts
+1
我的CSharp时代
我的CSharp时代
竟然没highcharts
南漂一卒
南漂一卒

引用来自“paul_bao”的评论

引用来自“郭大侠写代码”的评论

竟然没highcharts
标题说的是开源的,highcharts是收费的吧

Highcharts 对商用收费
IGetOut
IGetOut
人家说十大。你说要是把你们要的那两个加进来。得把哪几个挤出去啊?
cokecc
cokecc
没有highcharts~肯定是软文~
rachel_ranqian
rachel_ranqian
有没有好的项目,我就是做这个的,无偿出图
枯叶_听海
枯叶_听海
如果做一些性能,引用js大小之类的对比就好了~
推荐 14 款基于 JavaScript 的数据可视化工具

俗话说,一图胜千言。图形化的信息可以让人们对数据有更加直观清晰的理解,让信息发布者更加高效地展示自己的核心内容。在前端开发中,如果缺少合适 工具,制作数据可视化图表会十分复杂。然...

勿忘初心321
2015/12/28
11.4K
12
完全免费开源!开发者用了都说好的5款JavaScript图表库

用过不少的商用图表工具&图表库,比如Fusioncharts、AmChart,技术服务好,厂家的支持给力,总是物有所值。随着一些产品的开源,除了商用图表,现在也开始关注开源图表工具了。虽然和Fusionc...

周宇YuZhou
2015/07/02
496
0
给开发者提供的 35 款 JavaScript 图形图表库

图表是数据图形化的表示,也就是“通过形象的图表来展示数据,比如条形图,折线图,饼图”。几乎每个开发或者项目管理团队都需要图表或者图形来简化 理解,可视化复杂的数据和 web 应用工作流...

oschina
2014/02/24
60.8K
13
35款免费的 Javascript Flash Web 图表

Flot - Flot 为 jQuery 提供的javascript代码库. 容易使用,有特色的图表,提供交互功能(能够放大缩小数据区域等)。 Open Flash Chart - Open Flash Chart 是一个 Flash 图表组件,很容易安装...

SeanCai
2011/10/11
934
0
玩转大数据可视化的几个必会工具

  俗话说的好,逆水行舟,不进则退,在快速发展的今天,紧跟时代的步伐,抓住时代的脉搏,才能助力企业激流勇进,抢占先机。作为助力企业经营决策的大数据可视化应用,对于的企业发展起着至...

中国机器人
2018/02/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

浅谈prototype原型模式

一、原型模式简介 原型(Prototype)模式是一种对象创建型模式,他采取复制原型对象的方法来创建对象的实例。使用原型模式创建的实例,具有与原型一样的数据。 原型模式的特点: 1、由原型对...

青衣霓裳
7分钟前
1
0
shell mysql 备份

#!/bin/bash time2=$(date "+%Y-%m-%d-%H:%M:%S") /usr/local/mysql/bin/mysqldump -uroot -p ad > /usr/local/mysql/backup/"$time2".sql 变量引用原来是这么用的。......

奋斗的小牛
14分钟前
2
0
Jmeter监控Linux服务器操作

系统:Win7 64位 工具:Jmeter 4.0 要准备好的插件:JMeterPlugins-Standard-1.4.0,ServerAgent-2.2.1 解压JMeterPlugins-Standard-1.4.0.zip,将其中\lib\ext\JMeterPlugins-Standard.jar......

魔鬼妹子
14分钟前
3
0
系列文章:云原生Kubernetes日志落地方案

在Logging这块做了几年,最近1年来越来越多的同学来咨询如何为Kubernetes构建一个日志系统或者是来求助在这过程中遇到一系列问题如何解决,授人以鱼不如授人以渔,于是想把我们这些年积累的经...

Mr_zebra
15分钟前
2
0
入门必备!快速学会用Aspose.Words在表格中插入和删除列!

Aspose.Words For .Net(点击下载)是一种高级Word文档处理API,用于执行各种文档管理和操作任务。API支持生成,修改,转换,呈现和打印文档,而无需在跨平台应用程序中直接使用Microsoft W...

mnrssj
20分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部