JavaScript chart--15款JavaScript制图表库

译文来源:http://www.sitepoint.com/15-best-javascript-charting-libraries/

我们无法想像一个没有图表的Dashboard会是什么样。图表可以对数据进行直观有效的展示。不仅如此,图表的巧妙应用还可以提升网站的整体视觉效果。

本文将介绍一些非常好用的制作图表的JavaScript库。这些库能够帮助你完成你未来项目中的漂亮的、可定制化的图和表。

文中介绍的库大多是免费的,当然也有一些库会提供功能更加强大的付费版。

  1. D3.js —— 数据驱动型

今天,当我们想到要制作图表时,D3将是脑海中出现的第一个名字。作为一个开源的库,D3还是提供很多其他现有库所没有的强大功能。“进入和离开”的功能,良好的渐变和语法与jQuery与Prototype相似,这些特性都是D3被推崇为最佳制作图表的库的原因。使用D3制作的图表会被转化为HTML、SVG或CSS的代码。

与其他库不同的是,D3不能与包含任何在box外预先生成的图表。当然,想要了解更多类似的属性,你可以浏览一下已使用D3的项目。

D3对较老浏览器的支持情况不容乐观,例如IE8。你可以使用aight plugin等插件来应对兼容性问题。

应用D3的网站包括NYTimes,Uber和Weather.com。

  2. Google Charts

Google Charts 是一款很容易使用的库。它提供了多种预先制作的图,包括面积图、条形图、日期图、饼状图和地理图等。

Google Charts也包含了很多的定制化选项来对图形进行修改。图表会被转化为HTML 5/SVG的代码来解决跨浏览器的跨平台的问题。例如IPhones,IPads和Andriod。它还能够将图表转化为VML来兼容老版本的IE浏览器。

  3. Chart.js

ChartJs提供了扁平化的图表,使用HTML 的canvas来进行代码转换,应用ployfill来对IE7/8进行支持。

ChartJS默认是响应式的,在移动和平板设备中运行良好。它有六种不同样式的图表(),这使得它成为了一段时间内最吸引人的开源库。

  4. Chartist.js

Chartist可以提供美观的响应式图表。同ChartJS一样,Chartist也是社区的人们无法忍受高费用的JavaScript库而制作的。它使用SVG来进行代码转化,可以通过CSS3 媒介查询和Sass来进行设置。值得注意的是,如果使用现代浏览器中的话,Chartist可以用于制作酷炫的动画。

  5. n3-charts

如是你是一名AngularJs开发者,那么你一定会感叹于n3的易用和有趣。n3是构建是基于D3和AngularJs的。它使用指令的形式来提供不同样式的图表。

  6. Ember Charts

Ember Charts是一个使用D3和Ember构建的开源库。它提供多种图形,使用简便。代码转化由SVG完成。

  7. Smoothie Charts

如果你正在处理流数据,那么Smoothie Charts正适合你。它使用canvas来转化代码,是一个纯JavaScript的代码库,并为实时图表提供了保持和颜色闪烁的功能。

  8. Chartkick

Chartkick适用于Ruby的项目,提供了多种图表图形,使用SVG进行代码转化。

  9. ZingChart

ZingChart用于快速构建灵活、可交互、响应迅速并可缩放的现代产品。它已被应用于许多项目中,例如Apple、Adobe、Boein个好Walmart。ZingChart使用Ajax、JSON和HTML 5来快速传输美观的图表。

ZingChart不仅提供免费的试用版,还提供了不同价位的商用版来满足您的业务需求。

  10. HighchartsJS

HighchartsJS是一款非常流行的库。它为图表提供了许多的动画功能,这些足以牢牢吸引那些顾客的目光。HighchartsJS也提供了很多种类的图形。

HighchartsJS最大的有点之一在于它可以兼容例如IE6这样的老版本浏览器。对于现代浏览器,它使用SVG,对于老板的浏览器,图表则被转化为VML。

HighchartsJS提供了免费的个人试用版和商用付费版。

  11. Fusioncharts

Fusioncharts是最悠久的制图表库之一,它发布于2002年。图表的代码会被转化HTML 5/SVG和VML来保证可移植性和兼容性。

与其他不同的是,Fusioncharts提供了直接处理JSON和XML的能力。你还可以使用PNG、JPG或PDF的格式来到处这些图表。

Fusioncharts对老版本浏览器的兼容性十分良好。只这一点就成为了它在众多公司中流行的原因。

你可以带着Fusioncharts的水印来免费使用它。如果想移除这个水印则需要购买付费版。

  12. Flot

Flot为jQuery而创造,也是诞生很早的流行库之一。

Flot支持线条图、点状图、面积图、条形图或他们的任意组合。它也兼容老版本的浏览器,例如IE6和Firefox2。

Flot是完全免费的,同时也会应顾客的要求提供付费的商业支持。

  13. amChart

amChart无疑是这些库中最漂亮的图标库。它将自己完美地分离为3个独立的库——JavaScript Charts、Maps Charts(amMaps)和Stock Charts。

amMap是上述三者中作者做喜欢的部分。它提供了很多功能,包括地图上的加载图标或图片,热力图,画线,并能够在地图上添加文字,缩放等。

amChart 使用SVG来转化代码,并只能在现代浏览器中运行。有它创建的图表或许不会在IE9以下的浏览器中运行。

免费版的amChart会在每张图上方留有一个指向其网站的链接。他的商用版的费用会比市场上其他产品略高一些。

  14. EJS Chart

EJS Chart宣城他们是准符合企业级的软件。有它生成的图表比一些历史悠久的库更加整洁和易读。它也兼容IE6+和其他版本的浏览器。

EJS同时有免费版和付费版。免费版会限制你在一页中只能有一张图,每张图只能展示2组数据。

  15.uvCharts

uvChart是一个开源的JavaScript制图表库。他宣称有100种以上的定制化选择和12种不同样式的图表。

uvChart使用D3来构建库。它声称自己移除了D3所有晦涩的代码并提供了创建标准图表的简单方法。uvChart使用SVG,HTML和CSS来进行代码转换。

结论:

现在该由你来选择使用哪个库来构建你未来的应用了。

想要对图表进行更多控制的开发者必然会倾向于选择D3。

这些库都在Stackoverflow的论坛上提供了很好地技术支持。

时间: 2024-11-10 12:10:23

JavaScript chart--15款JavaScript制图表库的相关文章

android开源图表库MPAndroidChart文档翻译(上)

MPAndroidChart 是 Android 系统上一款开源的图表库.目前提供线图和饼图,支持选择.缩放和拖放. android开源图表库MPAndroidChar的githu地址: https://github.com/PhilJay/MPAndroidChart 文档地址:https://github.com/PhilJay/MPAndroidChart/wiki API地址:https://jitpack.io/com/github/PhilJay/MPAndroidChart/v2.

完全免费开源!开发者用了都说好的5款JavaScript图表库

用过不少的商用图表工具&图表库,比如Fusioncharts.AmChart,技术服务好,厂家的支持给力,总是物有所值.随着一些产品的开源,除了商用图表,现在也开始关注开源图表工具了.虽然和Fusioncharts.AmChart,这样的大品牌比起来,是小巫见大巫,不过这并不代表他们不行,相反,他们各有各的独特魅力,值得我们去发现他.使用它! Planetary.js 是一个JavaScript图表库,用于构建交互式地球仪.它使用D3 和TopoJSON 解析并显示地理数据. Planetary

给开发者提供的 35 款 JavaScript 图形图表库

给开发者提供的 35 款 JavaScript 图形图表库 图表是数据图形化的表示,也就是“通过形象的图表来展示数据,比如条形图,折线图,饼图”.几乎每个开发或者项目管理团队都需要图表或者图形来简化 理解,可视化复杂的数据和 web 应用工作流.可视化图表可以帮助开发者更容易理解复杂d数据,提高生产的效率和 web 应用和项目的可靠性. JavaScript 图表和图形库就是一个简单创建图表和图形的工具.现在互联网上有许多五花八门的 JavaScript 图表和图形库,帮助开发者们更好的创建 w

强悍的Javascript图表库:Highcharts

如果你正在寻找如何创建图表,那我们这篇文章就是为你准备的.我曾经在网上找了很多的资料,怎样去完美的解决创建图表的方案,让我惊喜的是发现了一个很好的很强悍的Javascript图表库:Highcharts.这是一个纯Javascript库,它主要包括两个部分:Highcharts和Highstock.Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表.目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型.Highstock可以为您方便地建立股票或一般

21 个最棒最有用的 JavaScript 图表库

每个企业在做重要决定时都倾向于做数据分析.实际上他们很多时候都是沉沦在数据里头,不知道如何跳出其中.随着大数据的到来,曾经好用的表格和图表只是不再削减它了. 企业一直寻求更好的方式来可视化数据,更好的互动和使图表多角度.毕竟,只有从数据中抽出的见解才是有用的. JavaScript 图表库出现了,作为漂亮的,容易理解的,交互式的可视化图表最有力的工具.它能更容易提取和传达关键的模式和见解,而静态图表往往不明显. 为了使事情更加简单,我努力挖掘了很多选项,找到了你需要的最好的 JavaScript

15款很棒的 JavaScript 开发工具

在开发中,借助得力的工具可以事半功倍.今天,我爱互联网向大家分享最新收集的15款非常有用的 javascript 开发工具. TestSwarm: Continious & Distributed JS Testing TestSwarm是Mozilla实验室推出的一个开源项目,它旨在为开发者提供在多个浏览器版本上快速轻松测试自己javascript代码的方法. Minimee在网络上,速度是很重要的,Minimee能帮助你将css和javascript文件进行自动压缩和打包. Doctor J

最新开源JavaScript 图表库 ECharts推荐

ECharts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表. ECharts 提供大量常用的数据可视化图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图).柱状图(条状图).散点图(气泡图).饼图(环形图).K线图.地图.力导向布局图以及和弦图,同时支持任意维度的堆积和多图表混合展现. ? 特色 推荐翻阅这份在线文档 < Why

15款不容错过的前端开发Javascript和css类库 - 2017版本~

前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, CoreUI是一套admin的管理模板,提供了高定制化的解决方案来创建控制模板和平台. 这有几种不同的版本帮助你快速的整合最流行的框架,比如, AngularJS, React.jS,Vue.jS等等 React Trend 来自Unsplash的一个react版本的组件,用来方便的创建线图,可以方便的展示

JavaScript图表库的新选择!LightningChart JS入门须知了解一下

对于LightningChart JS,可能很多用户并不是很了解这个产品,这是由Arction Ltd公司最新推出的JavaScript图表库工具.LightningChart JS是Web上性能最高的图表库具有出色的执行性能 - 使用高数据速率同时监控数十个数据源. GPU加速和WebGL渲染确保您的设备的图形处理器得到有效利用,从而实现高刷新率和流畅的动画.非常适合用于贸易,工程,航空航天,医药和其他领域的应用. 入门视频 LightningChart JS入门视频(一):使用JavaScr