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 相关文章推荐
优化JavaScript脚本的性能的几个注意事项
Dec 22 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
js Dom实现换肤效果
Oct 21 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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中动态HTML的输出技术
2006/10/09 PHP
详解php中反射的应用
2016/03/15 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
js加解密 脚本解密
2008/02/22 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
jQuery EasyUI Layout实现tabs标签的实例
2017/09/26 jQuery
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
Vue中全局变量的定义和使用
2019/06/05 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
Python实现图像几何变换
2015/07/06 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python模拟实现斗地主发牌
2020/01/07 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
机电专业体育教师求职信
2013/09/21 职场文书
技术总监岗位职责
2013/12/05 职场文书
签约仪式主持词
2014/03/19 职场文书
天网工程实施方案
2014/03/26 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2015年人民调解工作总结
2015/05/18 职场文书