前端主流图表框架

文章目录

- 一 · echarts
- - - 1.简介：
    - 2.使用：
    - - 1.代码：
        2.效果：
        3.代码2：
        4.效果2（鼠标移动有定位效果）：
- 二 · Emprise JavaScript Charts（英文版不好阅读，访问慢，不建议使用）
- - - 简单记一下：1.代码+效果图
- 三 · Flot
- - - Flot官网
    - github： [https://github.com/flot/flot](https://github.com/flot/flot)
    - 学习网址：[http://www.jqueryflottutorial.com/jquery-flot-chart-types.html](http://www.jqueryflottutorial.com/jquery-flot-chart-types.html)
- 四 · rickshaw
- 五 · sparkline
- 六 · easypiechart
- 七 · Chart.js
- - - 1.官网:[http://chartjs.org/](http://chartjs.org/)
    - 2.文档: [http://www.chartjs.org/docs/](http://www.chartjs.org/docs/)
- 八 · Knob Charts
- 九 · morris.js
- 十 · Recharts
- - - 官网：[http://recharts.org/#/en-US/](http://recharts.org/#/en-US/)
- 十一 ·TauCharts
- 十二 · C3.js
- - - 官网：[https://c3js.org/](https://c3js.org/)
- 十三 · NVD3
- - - 官网：[http://nvd3.org/](http://nvd3.org/)
- 十四 · FlexChart
- - - 官网：[https://demo.grapecity.com.cn/wijmo5/learningwijmo/#96YKp](https://demo.grapecity.com.cn/wijmo5/learningwijmo/#96YKp)
    - 旭日图Demo：[https://demo.grapecity.com.cn/wijmo5/Angular/Explorer/Explorer/#/chart/sunburst](https://demo.grapecity.com.cn/wijmo5/Angular/Explorer/Explorer/#/chart/sunburst)
- 十五 · Chartist
- - - 官网：[https://gionkunz.github.io/chartist-js/](https://gionkunz.github.io/chartist-js/)

一 · echarts

1.简介：

纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表，基于BSD开原协议，是一款非常优秀的可视化前端框架

由于 Echarts 是用普通的 JavaScript 编写的，所以 Echarts 不存在其它图表库存在的无法无缝迁移的问题。

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

官方API文档和教程

GitHub源文件网址（源码）

使用 npm 可以很容易的完成 Echarts 的安装:

npm install echarts --save

2.使用：

1.代码：

<!DOCTYPE html>
<html ><head><meta charset="utf-8" /><title></title><!-- 本地引用 --><!-- <script src="js/echarts.js"></script> --><!-- cdn引用 --><script src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js" type="text/javascript" charset="utf-8"></script></head><body><div id="container" style="height: 500%;"></div><script type="text/javascript">var dom =document.getElementById("container");var myChart=echarts.init(dom);var app={};option = null;option = {//标题title:{text:'折线图',subtext:'模拟数据',x:'center'},//横坐标xAxis:{name:'星期',type:'category',data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']},//纵坐标yAxis:{name:'数值',type:'value'},//数据信息series:[{data:[820,932,901,934,1290,1330,1320],type:'line'}]};//载入数据myChart.setOption(option,true);</script></body>
</html>

2.效果：

在这里插入图片描述

3.代码2：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- cdn引用 --><script src="https://echarts.apache.org/examples/vendors/echarts/echarts.min.js" type="text/javascript" charset="utf-8"></script></head><body><div id="container" style="height: 500%;"></div><script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};option = null;option = {title: {text: 'Large-scale scatterplot'},tooltip : {trigger: 'axis',showDelay : 0,axisPointer:{show: true,type : 'cross',lineStyle: {type : 'dashed',width : 1}},zlevel: 1},legend: {data:['sin','cos']},toolbox: {show : true,feature : {mark : {show: true},dataZoom : {show: true},dataView : {show: true, readOnly: false},restore : {show: true},saveAsImage : {show: true}}},xAxis : [{type : 'value',scale:true}],yAxis : [{type : 'value',scale:true}],series : [{name:'sin',type:'scatter',large: true,symbolSize: 3,data: (function () {var d = [];var len = 10000;var x = 0;while (len--) {x = (Math.random() * 10).toFixed(3) - 0;d.push([x,//Math.random() * 10(Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0]);}//console.log(d)return d;})()},{name:'cos',type:'scatter',large: true,symbolSize: 2,data: (function () {var d = [];var len = 20000;var x = 0;while (len--) {x = (Math.random() * 10).toFixed(3) - 0;d.push([x,//Math.random() * 10(Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0]);}//console.log(d)return d;})()}]};;if (option && typeof option === "object") {myChart.setOption(option, true);}</script></body>
</html>

4.效果2（鼠标移动有定位效果）：

在这里插入图片描述

二 · Emprise JavaScript Charts（英文版不好阅读，访问慢，不建议使用）

Emprise 是一个100% 纯 JavaScript 图表解决方案，并不需要任何 JavaScript 框架. Emprise JavaScript Charts 支持鼠标追踪，鼠标事件，按键追踪与事件，缩放，滚动，交互等功能，将用户体验上升到一个新高度。支持曲线图，面积图，离散图，圆饼图，柱状图等形式，拥有完备文档的属性和方法可以帮助实现很好的定制

简单记一下：1.代码+效果图

<head>
<title>demo</title>
<link rel="stylesheet" href="./EJSChart.css" type="text/css" media="screen" />
<script type="text/javascript" src="./EJSChart.min.js"></script>
<script type="text/javascript" src="./jquery-1.12.4.min.js"></script>
</head>

<div id="pes"  style="width:99%;height:540px" ></div>

<script type="text/javascript" id="script_pes">var chart = new EJSC.Chart("pes");chart.addSeries(new EJSC.LineSeries(
new EJSC.ArrayDataHandler([
[0,.7],[1,4],[2,5],[5,6],[5.2,2.33],[6,8],
[9,5],[9.2,4],[10,7.2]
])
));</script>

在这里插入图片描述

三 · Flot

Flot官网

Flot 为jQuery 提供的javascript代码库. 容易使用，有特色的图表，提供交互功能(能够放大缩小数据区域等)。是一个纯粹的 jQuery JavaScript 绘图库，可以在客户端即时生成图形，使用非常简单，支持放大缩小以及鼠标追踪等交互功能。该插件支持 IE6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas 对象，目前所有主流浏览器都支持该对象，除了 IE, 因此在 IE中使用 JavaScript 进行模拟

github： https://github.com/flot/flot

学习网址：http://www.jqueryflottutorial.com/jquery-flot-chart-types.html

jQuery 已经成为 Web 开发人员非常重要的工具。有了 Flot.js，前端设计也变得更加容易
Flot.js 是 JavaScript 库中较为古老的图表库之一。尽管如此，Flot.js 也不会因为绘制折线图、饼图、条形图、面积图、甚至堆叠图表而降低其性能
Flot.js 有一个很完善的文档。当用户遇到困难时，可以很容易地找到解决办法。Flot.js 也支持旧版本的浏览器

四 · rickshaw

GitHub地址：https://github.com/shutterstock/rickshaw

http://code.shutterstock.com/rickshaw/ 这个地址不翻墙，打不开

说明: Rickshaw 是一个用于绘制时序图的简单 jS 库，基于 Mike Bostock’s delightful D3 库构建

GitHub Demo： https://github.com/shutterstock/rickshaw/tree/master/examples
在这里插入图片描述

五 · sparkline

官网:

http://omnipotent.net/jquery.sparkline/

说明: sparkline是一类信息体积小和数据密度高的图表。目前它被用作一些测量，相关的变化的信息呈现的方式，如平均温度，股市交投活跃。sparkline常常以一组多条的形式出现在柱状图，折线图当中

http://www.highcharts.com/

六 · easypiechart

easypiechart

官网: https://github.com/rendro/easy-pie-chart/

说明:EASY PIE CHART是一个轻量级的jQuery插件，主要用来渲染和制作漂亮的饼图及动画效果，基于与HTML5的canvas元素。

Demo: https://github.com/rendro/easy-pie-chart/tree/master/demo

七 · Chart.js

1.官网:http://chartjs.org/

2.文档: http://www.chartjs.org/docs/

说明: Chart.js是一个基于HTML5 canvas技术的开源图表绘制工具库。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

八 · Knob Charts

官网: http://anthonyterrien.com/knob/

说明: 一款生成超酷的旋钮特效的工具库

Demo: http://anthonyterrien.com/demo/knob/

九 · morris.js

官网: http://morrisjs.github.io/morris.js/

说明: Morris.js 是一个轻量级的JS库，用来生成各种时序图和区域图

源码: https://github.com/morrisjs/morris.js/

Demo: https://github.com/morrisjs/morris.js/tree/master/examples

十 · Recharts

官网：http://recharts.org/#/en-US/

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

使用 ReCharts，用户可以在 React Web 应用程序中无缝地编写图表。

Recharts 非常轻巧，并使用 SVG 元素来创建很奇特的图表。

使用 npm 安装 Recharts：

npm install recharts

Recharts 没有冗长的文档，它很直接。当你遇到困难时，使用 Recharts 可以很容易找到解决方案。

十一 ·TauCharts

在这里插入图片描述
https://www.taucharts.com/
TauCharts 是最灵活的 JavaScript 图表库之一。它是基于 D3 创建的，是一个以数据为中心的 JavaScript 图表库，可以改进数据可视化的效果。

TauCharts 十分灵活，访问其 API 也十分轻松。TauCharts 为用户提供了无缝映射和可视化的数据，使用 TauCharts 能够设计出十分美观的数据界面。同时，TauCharts 也和易于学习。

通过 npm 安装 TauCharts：

npm install taucharts

十二 · C3.js

官网：https://c3js.org/

与 TauCharts 相同，C3.js 也是一个非常有效的基于 D3 的图表可视化库。另外，C3.js 允许用户创建可定制的具有个人风格的类。

C3.js 看起来是个比较难的库，但是一旦掌握了 C3.js 技巧，就能得心应手的使用了。

有了 C3.js 图表库，即使在第一次渲染之后，用户也可以通过创建回调来更新图表。C3.js 也允许用户为自己的 Web 应用程序创建可复用的图表，从而减少工作量。

使用 npm 安装 C3.js 图表库：

npm install c3

十三 · NVD3

官网：http://nvd3.org/

NVD3 是由 Mike Bostock 撰写的基于 D3 的 JavaScript 库。NVD3 允许用户在 Web 应用程序中创建美观的、可复用的图表。

NVD3 具有很强大的图表功能，能够很方便的创建箱形图、旭日形和烛台图等。如果用户想在 JavaScript 图表库中用到大量的能力，推荐试用 NVD3

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

十四 · FlexChart

官网：https://demo.grapecity.com.cn/wijmo5/learningwijmo/#96YKp

旭日图Demo：https://demo.grapecity.com.cn/wijmo5/Angular/Explorer/Explorer/#/chart/sunburst

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

FlexChart 的使用也十分简单，FlexChart 图表将所有与数据有关的任务都委托给 CollectionView 类，只需操作 CollectionView 类，就能实现过滤、排序和分组数据等功能。

FlexChart 包含的图表元素也比较全面，如图表图例、图表标题、图表页脚、数轴、图表 series 和标签等，用户也可以为图表添加自定义的元素，如平均线和趋势线等。

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

十五 · Chartist

官网：https://gionkunz.github.io/chartist-js/

Chartist 库很适合于创建美观、响应能力强、阅读友好的图表。Chartist 使用 SVG 来呈现图表。

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

Chartist 易于配置，也易于使用 Sass 进行定制。但是，它不支持旧浏览器。

使用 Chartist，可以通过 CSS 的样式来美化你的 SVG，用户完全可以现实自己所想的所有图表样式。

使用 npm 安装 Chartist：

npm install chartist --save