点晴MIS内部交流教程加入收藏
新手上路
教程搜索
 您的位置:点晴MIS系统问题答疑『 企业管理交流 』浏览当前帖子  
教程帮助  

  教程搜索
  搜索范围: 搜索方式: 关键词(可用空格分开)  

  作者及文章信息: 本文热度:2986 % 
admin

积分:81500
等级:网站管理员
文数:8928
注册:2004-7-20

  信 息   主 页       

楼 顶 

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


https://my.oschina.net/editorial-story"> https://www.oschina.net/home/login?goto_page=https%3A%2F%2Fmy.oschina.net%2Feditorial-story%2Fblog%2F844876">
开源中国
开源中国 找到你想要的开源项目,分享和交流
http://a.app.qq.com/o/simple.jsp?pkgname=net.oschina.app" class="button" data-applink="oscapp://www.oschina.net/launch/app?type=3&id=844876">打开
https://my.oschina.net/editorial-story/blog">
https://static.oschina.net/uploads/user/1459/2918182_100.jpeg?t=1484105851000" align="absmiddle" alt="编辑部的故事" title="编辑部的故事" class="LargePortrait ">
https://www.oschina.net/" target="_self">开源中国 / 编辑部的故事
发布于5天前(2017/02/23 16:35)
美观又实用,10款强大的开源 Javascript 图表库
4884

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

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

https://www.oschina.net/p/echarts" target="_blank" rel="nofollow">1、ECharts

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

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

https://static.oschina.net/uploads/space/2017/0223/114727_pR2V_2896879.png">

https://static.oschina.net/uploads/space/2017/0223/114910_3KzA_2896879.gif">

https://www.oschina.net/p/chartjs" target="_blank" rel="nofollow">2、Chart.js

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

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

https://static.oschina.net/uploads/space/2017/0223/140632_eYv6_2896879.png">

https://static.oschina.net/uploads/space/2017/0223/140808_tkIb_2896879.png" width="320">https://static.oschina.net/uploads/space/2017/0223/140835_0IfW_2896879.png" width="320">

https://www.oschina.net/p/jqplot" target="_blank" rel="nofollow">3、jqPlot

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

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

https://static.oschina.net/uploads/space/2017/0223/141931_z0gw_2896879.png">

https://static.oschina.net/uploads/space/2017/0223/142029_fQrq_2896879.png">

http://www.oschina.net/p/chartist-js" target="_blank" rel="nofollow">4、Chartist.js

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

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

https://static.oschina.net/uploads/space/2017/0223/145548_uv9j_2896879.gif">

https://static.oschina.net/uploads/space/2017/0223/145626_OTS0_2896879.png">

https://www.oschina.net/p/xcharts" target="_blank" rel="nofollow">5、xCharts

xCharts 是一个使用 http://www.oschina.net/p/d3" target="_blank" rel="nofollow">D3.js 来构建漂亮的可定制的数据驱动的 JavaScript 图表库,使用 HTML、CSS、SVG 实现图表,适用于熟悉数据可视化的用户。

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

https://static.oschina.net/uploads/space/2017/0223/151415_ZwrI_2896879.gif">

https://www.oschina.net/p/c3js" target="_blank" rel="nofollow">6、C3.js

C3.js 也是一个基于 http://www.oschina.net/p/d3" target="_blank" rel="nofollow">D3.js 的可重用的开源 JavaScript 图表库。这意味着将数据图表绘制到 HTML 页面上的过程得到简化,不需要大量的自定义 D3 图表代码,也相对容易上手。

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

https://static.oschina.net/uploads/space/2017/0223/152528_xb63_2896879.gif">

https://www.oschina.net/p/pizza" target="_blank" rel="nofollow">7、Pizza Pie Charts

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

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

https://static.oschina.net/uploads/space/2017/0223/153623_H1eb_2896879.png">

https://www.oschina.net/p/protovis" target="_blank" rel="nofollow">8、Protovis

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

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

https://static.oschina.net/uploads/space/2017/0223/154449_8gvl_2896879.png">

http://www.oschina.net/p/flot" target="_blank" rel="nofollow">9、Flot

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

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

https://static.oschina.net/uploads/space/2017/0223/160540_FCS6_2896879.png">

https://www.oschina.net/p/dygraphs" target="_blank" rel="nofollow">10、Dygraphs

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

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

https://static.oschina.net/uploads/space/2017/0223/161730_wDF8_2896879.png">

相关文章
评论(18)
https://my.oschina.net/guog" name="rpl_297574760" class="user">郭大侠写代码
1楼 2017/02/24 02:16
竟然没highcharts
https://my.oschina.net/u/1011130">https://static.oschina.net/uploads/user/505/1011130_50.jpg?t=1363226742000" align="absmiddle" alt="白豆腐徐长卿" title="白豆腐徐长卿" class="SmallPortrait " user="1011130">
https://my.oschina.net/u/1011130" name="rpl_297579505" class="user">白豆腐徐长卿
2楼 2017/02/24 08:52
竟然没有D3.js
https://my.oschina.net/u/589594" name="rpl_297579540" class="user">资本
3楼 2017/02/24 08:55
没有蚂蚁的g2啊
https://my.oschina.net/mylongjingc">https://static.oschina.net/uploads/user/1430/2860098_50.jpg?t=1469677045000" align="absmiddle" alt="木有龙井茶" title="木有龙井茶" class="SmallPortrait " user="2860098">
https://my.oschina.net/mylongjingc" name="rpl_297579880" class="user">木有龙井茶
4楼 2017/02/24 09:23
木有G2→_→
https://my.oschina.net/xxxooo">https://static.oschina.net/uploads/user/51/102525_50.png?t=1473821766000" align="absmiddle" alt="paul_bao" title="paul_bao" class="SmallPortrait " user="102525">
https://my.oschina.net/xxxooo" name="rpl_297580187" class="user">paul_bao
5楼 2017/02/24 09:48

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

竟然没highcharts
标题说的是开源的,highcharts是收费的吧
https://my.oschina.net/u/1040087">https://static.oschina.net/uploads/user/520/1040087_50.jpg?t=1377739095000" align="absmiddle" alt="sgq0085" title="sgq0085" class="SmallPortrait " user="1040087">
https://my.oschina.net/u/1040087" name="rpl_297580293" class="user">sgq0085
6楼 2017/02/24 09:57
竟然没highcharts和highstock
https://my.oschina.net/dongri">https://static.oschina.net/uploads/user/433/867364_50.jpg?t=1453702626000" align="absmiddle" alt="冬天之雪" title="冬天之雪" class="SmallPortrait " user="867364">
https://my.oschina.net/dongri" name="rpl_297580430" class="user">冬天之雪
7楼 2017/02/24 10:09
Echart百度唯一良心产品
https://my.oschina.net/zhangjinfu">https://static.oschina.net/uploads/user/54/108320_50.jpg" align="absmiddle" alt="张金富" title="张金富" class="SmallPortrait " user="108320">
https://my.oschina.net/zhangjinfu" name="rpl_297580474" class="user">张金富
8楼 2017/02/24 10:12

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

竟然没highcharts

引用来自“paul_bao”的评论

标题说的是开源的,highcharts是收费的吧
开源跟收费不冲突吧
https://my.oschina.net/kuyetinghai">https://static.oschina.net/uploads/user/1139/2279741_50.jpg?t=1485619411000" align="absmiddle" alt="枯叶_听海" title="枯叶_听海" class="SmallPortrait " user="2279741">
https://my.oschina.net/kuyetinghai" name="rpl_297580641" class="user">枯叶_听海
9楼 2017/02/24 10:26
如果做一些性能,引用js大小之类的对比就好了~
https://my.oschina.net/u/2519557">https://static.oschina.net/uploads/user/1259/2519557_50.jpg?t=1453426196000" align="absmiddle" alt="ranqian_Reese" title="ranqian_Reese" class="SmallPortrait " user="2519557">
https://my.oschina.net/u/2519557" name="rpl_297580648" class="user">ranqian_Reese
10楼 2017/02/24 10:27
有没有好的项目,我就是做这个的,无偿出图
https://my.oschina.net/u/577714" name="rpl_297581357" class="user">cokecc
11楼 2017/02/24 11:26
没有highcharts~肯定是软文~
https://my.oschina.net/skiycn">https://static.oschina.net/uploads/user/585/1170056_50.jpeg?t=1480467798000" align="absmiddle" alt="Skiychan" title="Skiychan" class="SmallPortrait " user="1170056">
https://my.oschina.net/skiycn" name="rpl_297581418" class="user">Skiychan
12楼 2017/02/24 11:31
人家说十大。你说要是把你们要的那两个加进来。得把哪几个挤出去啊?
https://my.oschina.net/TechQuery">https://static.oschina.net/uploads/user/585/1171658_50.png?t=1416796858000" align="absmiddle" alt="南漂一卒" title="南漂一卒" class="SmallPortrait " user="1171658">
https://my.oschina.net/TechQuery" name="rpl_297582860" class="user">南漂一卒
13楼 2017/02/24 13:31

引用来自“paul_bao”的评论

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

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

Highcharts 对商用收费
https://my.oschina.net/u/226551">https://static.oschina.net/uploads/user/113/226551_50.jpg?t=1473058652000" align="absmiddle" alt="我的CSharp时代" title="我的CSharp时代" class="SmallPortrait " user="226551">
https://my.oschina.net/u/226551" name="rpl_297582896" class="user">我的CSharp时代
14楼 2017/02/24 13:34
竟然没highcharts
https://my.oschina.net/u/228220">https://static.oschina.net/uploads/user/114/228220_50.jpg?t=1404867761000" align="absmiddle" alt="土豆哥哥好" title="土豆哥哥好" class="SmallPortrait " user="228220">
https://my.oschina.net/u/228220" name="rpl_297583432" class="user">土豆哥哥好
15楼 2017/02/24 14:19

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

竟然没highcharts
+1
https://my.oschina.net/u/274587" name="rpl_297584839" class="user">Kacofidoo
16楼 2017/02/24 16:16
竟然没highcharts + 1
https://my.oschina.net/u/2832100">https://static.oschina.net/uploads/user/1416/2832100_50.jpg?t=1466912608000" align="absmiddle" alt="喂~别哭啦!再哭、就亲你." title="喂~别哭啦!再哭、就亲你." class="SmallPortrait " user="2832100">
https://my.oschina.net/u/2832100" name="rpl_297587583" class="user">喂~别哭啦!再哭、就亲你.
17楼 2017/02/24 20:05
为啥没有阿里的G2
https://my.oschina.net/u/1257180" name="rpl_297606725" class="user">聆听幸福
18楼 2017/02/25 22:40
竟然没有highcharts
全部加载完毕
×
×
https://static.oschina.net/uploads/user/1459/2918182_100.jpeg?t=1484105851000" align="absmiddle" alt="编辑部的故事" title="编辑部的故事" class="LargePortrait ">
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
金额(元)
¥5 ¥10 其他金额
https://my.oschina.net/editorial-story/blog/844876"> https://my.oschina.net/action/blog/paySuccess">
开源中国手机客户端: https://www.oschina.net/app" class="android" title="Android客户端">Android https://www.oschina.net/app" class="iphone" title="iPhone 客户端">iPhone https://www.oschina.net/app" class="wp7" title="Windows Phone 客户端">WP7
?? 开源中国(OSChina.NET) | https://www.oschina.net/home/aboutosc">关于我们 | 广告联系 | http://weibo.com/oschina2010" target="_blank">@新浪微博 | https://m.oschina.net/">开源中国手机版 | http://www.miitbeian.gov.cn/" target="_blank" style="color:#737573;text-decoration:none;">粤ICP备12009483号-3
开源中国社区(OSChina.net)是工信部 http://www.copu.org.cn/" target="_blank">开源软件推进联盟 指定的官方社区
发自我的iPhone

该文章在 2017/2/28 23:18:05 编辑过

  离 线  2017-2-28 23:18:05 
  本文章共有 0 页, 0 张回文,每页有 10 张回文 >> [ ]
页码:
Copyright 2003-2018 ClickSun All Rights Reserved