前端主流图表框架

文章目录

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

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

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

四 · rickshaw

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

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

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

GitHub Demo： https://github/shutterstock/rickshaw/tree/master/examples

五 · sparkline

官网:

http://omnipotent/jquery.sparkline/

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

http://www.highcharts/

六 · easypiechart

easypiechart

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

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

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

七 · Chart.js

1.官网:http://chartjs/

2.文档: http://www.chartjs/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/knob/

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

Demo: http://anthonyterrien/demo/knob/

九 · morris.js

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

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

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

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

十 · Recharts

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

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

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

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

使用 npm 安装 Recharts：

npm install recharts

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

十一 ·TauCharts

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

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

通过 npm 安装 TauCharts：

npm install taucharts

十二 · C3.js

官网：https://c3js/

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

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

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

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

npm install c3

十三 · NVD3

官网：http://nvd3/

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

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

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

十四 · FlexChart

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

旭日图Demo：https://demo.grapecity/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

更多推荐

前端主流图表框架

前端主流图表框架

文章目录

一 · echarts

1.简介：

2.使用：

1.代码：

2.效果：

3.代码2：

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

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

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

三 · Flot

Flot官网

github： https://github/flot/flot

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

四 · rickshaw

五 · sparkline

六 · easypiechart

七 · Chart.js

1.官网:http://chartjs/

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

八 · Knob Charts

九 · morris.js

十 · Recharts

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

十一 ·TauCharts

十二 · C3.js

官网：https://c3js/

十三 · NVD3

官网：http://nvd3/

十四 · FlexChart

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

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

十五 · Chartist

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

发布评论取消回复

最近发表

热门文章

标签列表

前端主流图表框架

文章目录

一 · echarts

1.简介：

2.使用：

1.代码：

2.效果：

3.代码2：

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

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

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

三 · Flot

Flot官网

github： https://github/flot/flot

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

四 · rickshaw

五 · sparkline

六 · easypiechart

七 · Chart.js

1.官网:http://chartjs/

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

八 · Knob Charts

九 · morris.js

十 · Recharts

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

十一 ·TauCharts

十二 · C3.js

官网：https://c3js/

十三 · NVD3

官网：http://nvd3/

十四 · FlexChart

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

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

十五 · Chartist

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

相关文章

发布评论取消回复

最近发表

热门文章

标签列表