专栏首页我的前端路12个最好的 JavaScript 图形绘制库

12个最好的 JavaScript 图形绘制库

众多周知,图形和图表要比文本更具表现力和说服力。图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性。

在这篇文章中,我们收集了12款值得网站开发者收藏的 JavaScript 图形图表库,可以帮助你实现各种功能的图表。

D3.js

D3 是最流行的可视化库之一,它被很多其他的表格插件所使用。它允许绑定任意数据到 DOM,然后将数据驱动转换应用到文档中。你可以使用它用一个数组创建基本的 HMTL 表格,或是利用它的流体过度和交互,用相似的数据创建惊人的 SVG 条形图。

ChartJS

Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上。目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区)。而且,这是一个独立的包,不依赖第三方 JavaScript 库,小于 5KB。

Highcharts JS

Highcharts JS 是一个制作图表的纯 Javascript 类库,主要特性如下:兼容性:兼容当今所有的浏览器,包括 iPhone、IE 和火狐等等;对个人用户完全免 费;纯JS,无BS;支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;跨语言:不管是 PHP、Asp.net 还是 Java 都可以使用。

Fusioncharts

FusionCharts Suite XT 是个专业的 JavaScript 图表库,能创建任何类型的图表。它创建的图表都是可以进行完全自定义的,标签,字体,边界等等,都可以进行修改。它有很强的交互功能,有许多信息提示,可 点击的 legend 关键字,还有 dril-down,缩放/滚动 和单击打印图表功能。

Flot

Flot 是受 Plotr 和 PlotKit 的 启发,Ole Laursen 基于 jQuery 开发了一个图表绘制(WEB Chart)插件并命名为 flot。 flot 是个纯 JavaSript 库,专注于简单的使用方式,迷人的外观和交互式特性。支持的浏览器有: Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。

Chartist.js

Chartist.js 提供了优美的响应图表。就像 ChartJS。它使用 SVG 渲染图,可以被控制,并通过对 CSS3 媒体查询和 SASS 定制。另外 Chartist.js 提供很酷的动画。

n3-charts

如果你是一个 AngularJS 开发者,你一定喜欢款有趣的图表。它是建立在 D3.js 和 AngularJS 的基础上,提供了可定制的 AngularJS 指令的形式不同标准的图表。

Ember Charts

Ember Charts 是一个基于 Ember.js 和 D3.js 的图表库。它包括时间序列、柱状图、饼图、点图,很容易扩展和修改。这些图表组件代表图表交互性和演示的最佳实践,是高度可定制和可扩展的。

Chartkick

Chartkick 是专为 Ruby 应用程序的 JavaScript 图表库。它提供了所有主要的图表类型,如饼图,柱形图,条形图,面积,地理,时间,以及多个系列。

MeteorCharts

它有一个很酷的图表生成器,为您提供选项来选择图表,选择主题,然后生成一个图表。

amCharts

amCharts 无疑是最漂亮的图表库。amCharts 提供了JavaScript/HTML5 Charts、Javascript/HTML5 Stock Chart、JavaScript Maps 三种图表组件。

EJS Chart

EJS图表声称自己是企业准备的图表库。图表看起来很干净,可读性比大多数旧的图表库。这也是与IE6+等旧浏览器兼容。

uvCharts

uvCharts 是一个开源的 JavaScript 图表库,号称有100多个自定义选项。它拥有12种不同的标准图表类型,开箱即用。

ECharts

基于 Canvas,纯 JavaScript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

提供商业产品常用图表库,底层基于ZRender,创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、和弦图以及力导向布局图,同时支持任意维度的堆积和多图表混合展现

资料:

《MeteorCharts》:www.smpeizi.com

《Chartkick》:www.aiidol.com

《ECharts》:www.idiancai.com

《n3-charts》:www.3sjtw.com

原文链接:http://www.yyyweb.com/3347.html

我来说两句

0 条评论
登录 后参与评论

相关文章

  • BeautifulSoup库整理

    注意:如果是html的父标签就是他自己,soup本身也是种特殊的标签的他的父标签是空

    小小咸鱼YwY
  • 2019年Java架构师必读书籍

    动力节点Java培训最新上线Java实验班,等你来测试自己适不适合学习Java编程哦!

    动力节点Java学院
  • 迭代器,三元表达式,列表生成式,字典生成式,生成器,递归(没深入理解)

    yield的英文单词意思是生产,在函数中但凡出现yield关键字,再调用函数,就不会继续执行函数体代码,而是会返回一个值

    小小咸鱼YwY
  • android中webview控件和javascript交互实例

    当我们要实现丰富的图文混排效果的时候,我们一般会使用webview,这是一个功能十分强大的的控件,来看看官方的解释:

    战神伽罗
  • android--WebView使用addJavascriptInterface在sdk 17的问题

    当调用WebView 的addJavascriptInterface时,使用android:targetSdkVersion="10"时是没有问题的,能够触发事...

    战神伽罗
  • Java开发最常犯的10个错误,打死都不要犯!

    原文:http://www.programcreek.com/2014/05/top-10-mistakes-java-developers-make/

    zhisheng
  • 如何排查Java内存泄漏?看完我给跪了!

    没有经验的程序员经常认为Java的自动垃圾回收完全使他们免于担心内存管理。这是一个常见的误解:虽然垃圾收集器做得很好,但即使是最好的程序员也完全有可能成为严重...

    乱敲代码
  • 力扣题目汇总(位1的个数,有效的字母异位词,检测大写字母)

    否则,我们定义这个单词没有正确使用大写字母。 示例 1: 输入: "USA" 输出: True 示例 2: 输入: "FlaG" 输出: False ...

    小小咸鱼YwY
  • Delphi xe10对json的解析应用

    {"code":100,"state":"true","data":["hero","npc","pet"]}

    战神伽罗
  • Handler:Android 消息机制,我有必要再讲一次!

    我们在日常开发中,总是不可避免的会用到 Handler,虽说 Handler 机制并不等同于 Android 的消息机制,但 Handler 的消息机制在 An...

    Android架构

扫码关注云+社区

领取腾讯云代金券