4个顶级开源JavaScript图表库


Posted in Javascript onSeptember 29, 2018

图表对于可视化数据和使网站具有吸引力非常重要。可视化演示使分析大块数据和传达信息变得更加容易。JavaScript图表库使你能够以易于理解和交互的方式可视化数据,并改善网站的设计。有四个顶级开源JavaScript图表库,你一定要Get!

1.Chart.js

Chart.js是一个开源JavaScript库,允许你在应用程序上创建动画,美观和交互式图表。它可以在MIT许可下获得。

使用Chart.js,你可以创建各种令人印象深刻的图表和图形,包括条形图,折线图,面积图,线性比例和散点图。它完全响应各种设备,并利用HTML5 Canvas元素进行渲染。

以下是使用库绘制条形图的示例代码。我们将使用Chart.js内容交付网络(CDN)将其包含在此示例中。请注意,使用的数据仅用于说明目的。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<body>
<canvas id="bar-chart" width=300" height="150"></canvas>
<script>
new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: ["North America", "Latin America", "Europe", "Asia", "Africa"],
datasets: [
{
label: "Number of developers (millions)",
backgroundColor: ["red", "blue","yellow","green","pink"],
data: [7,4,6,9,3]
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Number of Developers in Every Continent'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
</body>
</html>

从这段代码中可以看出,通过将类型设置为bar来构造条形图。你可以将条形的方向更改为其他类型,例如将type设置为horizontalBar。

通过在backgroundColor数组参数中提供颜色类型来设置条形图的颜色。

颜色分配给在相应数组中共享相同索引的标签和数据。例如,第二个标签“拉丁美洲”将设置为“蓝色”(第二种颜色)和4(数据中的第二个数字)。

这是此代码的输出

4个顶级开源JavaScript图表库

2.Chartist.js

Chartist.js是一个简单的JavaScript动画库,允许你创建可自定义和美观的响应图表和其他设计。开源库可在WTFPL或MIT许可下获得。

该库是由一群对现有图表工具不满意的开发人员开发的,因此它为设计人员和开发人员提供了出色的功能。

在项目中包含Chartist.js库及其CSS文件后,你可以使用它们创建各种类型的图表,包括动画,条形图和折线图。它利用SVG动态渲染图表。

以下是使用库绘制饼图的代码示例

<link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<style>
.ct-series-a .ct-slice-pie {
fill: hsl(100, 20%, 50%); /* filling pie slices */
stroke: white; /*giving pie slices outline */
stroke-width: 5px; /* outline width */
}
.ct-series-b .ct-slice-pie {
fill: hsl(10, 40%, 60%);
stroke: white;
stroke-width: 5px;
}
.ct-series-c .ct-slice-pie {
fill: hsl(120, 30%, 80%);
}
.ct-series-d .ct-slice-pie {
fill: hsl(90, 70%, 30%);
}
.ct-series-e .ct-slice-pie {
fill: hsl(60, 140%, 20%);
}
</style>
<div ct-golden-section"></div>
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
var data = {
series: [45, 35, 20]
};
var sum = function(a, b) { return a + b };
new Chartist.Pie('.ct-chart', data, {
labelInterpolationFnc: function(value) {
return Math.round(value / data.series.reduce(sum) * 100) + '%';
}
});
</script>

Chartist JavaScript库允许你使用各种预构建的CSS样式,而不是指定项目的各种与样式相关的组件。你可以使用它们来控制创建的图表的外观。

例如,预先创建的CSS类.ct-chart用于构建饼图的容器。而且,.ct-golden-section类用于获取宽高比,可以使用响应式设计进行缩放,并为你节省计算固定尺寸的麻烦。Chartist还提供了你可以在项目中使用的其他类别的容器比率。

要设置各种饼图样式,可以使用默认的.ct-series-a类。字母a与每个系列计数(a,b,c等)一起迭代,使得它与要设置样式的切片相对应。

Chartist.Pie方法用于创建饼图。要创建另一种类型的图表,例如折线图,请使用Chartist.Line。

这是代码的输出

4个顶级开源JavaScript图表库

3.D3.js

D3.js是另一个很棒的开源JavaScript图表库。它可以在BSD许可下使用。D3主要用于根据提供的数据操纵和添加文档的交互性。

你可以使用这个神奇的3D动画库,使用HTML5,SVG和CSS可视化你的数据,让网站更具吸引力。从本质上讲,D3使你能够将数据绑定到文档对象模型(DOM),然后使用基于数据的函数来更改文档。

以下是使用库绘制简单条形图的示例代码

.chart div {
font: 15px sans-serif;
background-color: lightblue;
text-align: right;
padding:5px;
margin:5px;
color: white;
font-weight: bold;
}
<div
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js">
var data = [342,222,169,259,173];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", function(d){ return d + "px"; })
.text(function(d) { return d; });

使用D3库的主要概念是首先应用CSS样式选择指向DOM节点,然后应用运算符来操作它们,就像在其他DOM框架(如jQuery)中一样。

将数据绑定到文档后,将调用.enter()函数来为传入数据构建新节点。在.enter()函数之后调用的所有方法都将为数据中的每个项调用。

这是代码的输出

4个顶级开源JavaScript图表库

4.ECharts

ECharts 由百度前端技术部开发的,是一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11、Chrome、Firefox、Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。

ECharts 有良好的自适应效果,ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。

4个顶级开源JavaScript图表库

4个顶级开源JavaScript图表库

JavaScript图表库为你提供了强大的工具,用于在Web属性上实现数据可视化。通过这四个开源库,你可以增强网站的美感和互动性。你还有其他强大的前端库来创建JavaScript动画效果吗?不妨分享!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
用JS剩余字数计算的代码
Jul 03 Javascript
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 #Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 #Javascript
vue根据值给予不同class的实例
Sep 29 #Javascript
vue实现重置表单信息为空的方法
Sep 29 #Javascript
Vue中的Props(不可变状态)
Sep 29 #Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 #Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 #Javascript
You might like
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
mac下安装nginx和php
2013/11/04 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
js实现导航跟随效果
2018/11/17 Javascript
vue实现文字加密功能
2019/09/27 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
[01:07:34]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第二场 1月9日
2021/03/11 DOTA
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
python的即时标记项目练习笔记
2014/09/18 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
对Python 语音识别框架详解
2018/12/24 Python
Python中按值来获取指定的键
2019/03/04 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
django 外键创建注意事项说明
2020/05/20 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
党员个人批评与自我批评
2014/10/14 职场文书
投资入股合作协议书
2014/10/28 职场文书
先进员工事迹材料
2014/12/20 职场文书
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python