大家好，欢迎来到IT知识分享网。
文章目录
一 · echarts
1.简介：
纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表，基于BSD开原协议，是一款非常优秀的可视化前端框架
由于 Echarts 是用普通的 JavaScript 编写的，所以 Echarts 不存在其它图表库存在的无法无缝迁移的问题。
同时，Echarts 也提供了很多官方文档供用户查看。
使用 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
