1. IT分享知识网首页

前端主流图表框架[亲测有效]

老牧童 • • 未分类 • 阅读 284

前端主流图表框架[亲测有效]文章目录一·echarts1.简介：2.使用：1.代码：2.效果：3.代码2：4.效果2（鼠标移动有定位效果）：二·EmpriseJavaScriptCharts（英文版不好阅读，访问慢，不建议使用）简单记一下：1.代码+效果图三·FlotFlot官网github：[https://github.com/flot/flot](https://github.com/flot/flot)学习网址：[http://www.jqueryflottutorial.com/jquery-flot-ch

大家好，欢迎来到IT知识分享网。

文章目录

一 · 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

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/26063.html

赞 (0)
老牧童老牧童
0

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信