关于前端:前端开发者常用的JavaScript-图表库

31次阅读

共计 2646 个字符,预计需要花费 7 分钟才能阅读完成。

以后,数据可视化曾经成为数据迷信畛域十分重要的一部分。不同网络系统中产生的数据,都须要通过适当的可视化解决,以便更好的出现给用户读取和剖析。

对任何一个组织来说,如果可能充沛的获取数据、可视化数据和剖析数据,那么就能很大水平上帮忙理解数据产生的深层次起因,以便据此做出正确的决定。

对于前端开发人员来说,如果可能把握交互式网页中的数据可视化技术,则是一项很棒的技能。当然,通过一些 JavaScript 的图表库也会使前端的数据可视化变得更加容易。应用这些库,开发者能够在无需思考不同的语法所带来的编程难题的状况下,轻松实现将数据转化为易于了解的图表。

上面是挑选出的 9 个 JavaScript 图表库:

Chart.js

Chartist

FlexChart

Echarts

NVD3

C3.js

TauCharts

ReCharts

Flot

Chart.js


Chart.js 是一种简洁、用户敌对的图表库,同时也是基于 HTML5 的 JavaScript 库,用于创立动画、交互式和可自定义的图表和图形。

借助 Chart.js,用户能够轻松直观地查看混合图表类型。默认状况下,也能够应用 Chart.js 创立响应式网页。

Chart.js 库容许用户疾速创立可视化数据。Chart.js 易于设置,对初学者非常敌对。应用 Chart.js 则不用思考浏览器的兼容性问题,因为 Chart.js 反对旧浏览器。

应用 npm 装置 Chart.js:

npm install chart.js –save

Chartist

Chartist 库很适宜于创立好看、响应能力强、浏览敌对的图表。Chartist 应用 SVG 来出现图表。

Chartist 还提供了应用 CSS 媒体查问和创意动画来自定义图表的能力。用户应用 Chartist 在图表设计中实现本人的所有创意。

Chartist 易于配置,也易于应用 Sass 进行定制。然而,它不反对旧浏览器。

应用 Chartist,能够通过 CSS 的款式来丑化你的 SVG,用户齐全能够事实本人所想的所有图表款式。

应用 npm 装置 Chartist:

npm install chartist –save

FlexChart

FlexChart 是高性能的图表工具。应用 FlexChart,可轻松的将表格数据可视化为业务图表。FlexChart 岂但反对常见的图表类型,如折线图、饼状图、面积图等,还反对气泡图、K 线图、条形图、漏斗图等高级图表类型。

FlexChart 的应用也非常简略,FlexChart 图表将所有与数据无关的工作都委托给 CollectionView 类,只需操作 CollectionView 类,就能实现过滤、排序和分组数据等性能。

FlexChart 蕴含的图表元素也比拟全面,如图表图例、图表题目、图表页脚、数轴、图表 series 和标签等,用户也能够为图表增加自定义的元素,如平均线和趋势线等。

FlexChart 实质上是一种交互式的图表,不论是数据进行任何的更改,都会主动反馈在图表上,如图表曲线随数据放大放大、过滤、钻取、动画等。

查看 FlexChart 的中文学习指南和夕阳图 Demo。

Echarts

Echarts 是网页的数据可视化方面的一个十分有用的库。应用 Echarts,开发者能够创立直观的、可自定义的交互式图表,让数据的展现和剖析变得非常容易。

因为 Echarts 是用一般的 JavaScript 编写的,所以 Echarts 不存在其它图表库存在的无奈无缝迁徙的问题。

同时,Echarts 也提供了很多官网文档供用户查看。

应用 npm 能够很容易的实现 Echarts 的装置:

npm install echarts –save

NVD3

NVD3 是由 Mike Bostock 撰写的基于 D3 的 JavaScript 库。NVD3 容许用户在 Web 应用程序中创立好看的、可复用的图表。

NVD3 具备很弱小的图表性能,可能很不便的创立箱形图、夕阳形和烛台图等。如果用户想在 JavaScript 图表库中用到大量的能力,举荐试用 NVD3

NVD3 图表库的速度有时可能会成为一个问题,与 Fastdom 装置配合应用,速度会更快。

C3.js

与 TauCharts 雷同,C3.js 也是一个十分无效的基于 D3 的图表可视化库。另外,C3.js 容许用户创立可定制的具备个人风格的类。

C3.js 看起来是个比拟难的库,然而一旦把握了 C3.js 技巧,就能得心应手的应用了。

有了 C3.js 图表库,即便在第一次渲染之后,用户也能够通过创立回调来更新图表。C3.js 也容许用户为本人的 Web 应用程序创立可复用的图表,从而缩小工作量。

应用 npm 装置 C3.js 图表库:

npm install c3

TauCharts

TauCharts 是最灵便的 JavaScript 图表库之一。它是基于 D3 创立的,是一个以数据为核心的 JavaScript 图表库,能够改良数据可视化的成果。

TauCharts 非常灵便,拜访其 API 也非常轻松。TauCharts 为用户提供了无缝映射和可视化的数据,应用 TauCharts 可能设计出非常好看的数据界面。同时,TauCharts 也和易于学习。

通过 npm 装置 TauCharts:

npm install taucharts

Recharts

ReCharts 是一个应用 React 构建的,基于 D3 的图表库。

应用 ReCharts,用户能够在 React Web 应用程序中无缝地编写图表。

Recharts 十分笨重,并应用 SVG 元素来创立很奇异的图表。

应用 npm 装置 Recharts:

npm install recharts

Recharts 没有简短的文档,它很间接。当你遇到困难时,应用 Recharts 能够很容易找到解决方案。

Flot

目前,jQuery 曾经成为 Web 开发人员十分重要的工具。有了 Flot.js,前端设计也变得更加容易。

Flot.js 是 JavaScript 库中较为古老的图表库之一。前端培训尽管如此,Flot.js 也不会因为绘制折线图、饼图、条形图、面积图、甚至重叠图表而升高其性能。

Flot.js 有一个很欠缺的文档。当用户遇到困难时,能够很容易地找到解决办法。Flot.js 也反对旧版本的浏览器。

能够抉择不应用 npm 来装置 Flot.js,而是在 HTML5 中蕴含 jQuery 和 JavaScript 文件。

总结

以上介绍的 JavaScript 库都是高质量的图表库。然而在学习这些库的过程中,可能会因为学习曲线平缓或是不足学习材料而遇到困难,一种很好的计划是将这些库联合起来应用。最初也欢送大家补充更多的 JavaScript 图表库。

正文完
 0