4个顶级开源JavaScript图表库

2024-09-30 22:01:40

图表对于可视化数据和使网站具有吸引力非常重要。可视化演示使分析大块数据和传达信息变得更加容易。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（数据中的第二个数字）。

这是此代码的输出

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。

这是代码的输出

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.ECharts

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

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

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

总结

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

使用Chart.js图表库制作漂亮的响应式表单

入门基础 Chart.js是一个基于HTML5的开源图表库,可以方便简洁的绘制美观的图表. 主要特性包括: 1.支持6种不同的表格类型:曲线图.柱状图.饼状图.雷达图.极坐标区域图.环图. 2.基于HTML5开发,支持所有浏览器(包括IE7/8). 3.不依赖于其他任何库,仅有4.5k大小,并且可以进行定制. Chart.js 是一个基于 HTML5 canvas 的响应式.灵活的.轻量化的图表库.库中提供了六种不同的图表类型,每种类型都带有一系列的自定义选项.如果这些还不够,你还可以创造自己的
一个加密JavaScript的开源工具PACKER2.0.2

这是一个并非很复杂的编码工具,编码过后可以被浏览器直接识别.新浪在用.比如:http://comment4.news.sina.com.cn/comment/cmnt_xml.js 从这里进入http://dean.edwards.name/packer/,很简单的一个界面. 设置也很简单Numeric (Base 10) :所有的字符都被编码成数字Normal (Base 62) :所有的字符都被编码成字母与数字符号构成的值.这是推荐的方式.High ASCII (Base 95) :这种方式
常用的9个JavaScript图表库详解

当前,数据可视化已经成为数据科学领域非常重要的一部分.不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析. 对任何一个组织来说,如果能够充分的获取数据.可视化数据和分析数据,那么就能很大程度上帮助了解数据产生的深层次原因,以便据此做出正确的决定. 对于前端开发人员来说,如果能够掌握交互式网页中的数据可视化技术,则是一项很棒的技能.当然,通过一些 JavaScript 的图表库也会使前端的数据可视化变得更加容易.使用这些库,开发者可以在无需考虑不同的语法所带来的编
jQuery EasyUI 开源插件套装完全替代ExtJS

前台开发,很多人喜欢用JQuery,但是在做后台管理系统,特别是企业管理系统,例如WEB进销存系统等,很多人都会选择ExtJS,因为ExtJS提供了非常多的UI界面,并且非常友好. 我要告诉大家,现在JQuery也有一个很好的UI插件了,几乎完全可以替代ExtJS,下面来看看对比: 上图是ExtJS和EasyUI的界面对比,是不是很类似呢,很强大呢? 呵呵~~ 漂亮的消息弹出,支持遮罩效果. 这个效果也很酷~ 更多的酷炫功能请看下方功能列表... Easy UI的使用也非常地简单: 复制代码代
详解Chart.js轻量级图表库的使用经验

前言最近项目中遇到一个在页面中画图表的需求,需要一个扇状图和一个柱状图,虽然能使用svg或canvas绘制,但吃力还不一定讨好,所以研究接入了主流的第三方图表库供项目使用.下面主要记录我使用过程中的一些体验和解决方法,具体教程请移步官方文档. 技术选型研究了Highcharts.百度的ECharts.阿里的G2和Charts.js四个图表库,由于项目对图表需求不大,图表不复杂,所以引入了轻量级的Charts.js.Chart.js很容易上手,只需要在页面中引用脚本文件,并创建 <canvas
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图

gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库.你只需要编写几行简单的代码就能创建出精美的条形图.饼图.点图和曲线图. gRaphael 使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+. 使用方法:在页
Java中使用开源库JSoup解析HTML文件实例

HTML是WEB的核心,互联网中你看到的所有页面都是HTML,不管它们是由JavaScript,JSP,PHP,ASP或者是别的什么WEB技术动态生成的.你的浏览器会去解析HTML并替你去渲染它们.不过如果你需要自己在Java程序中解析HTML文档并查找某些元素,标签,属性或者检查某个特定的元素是否存在的话,那又该如何呢?如果你已经使用Java编程多年了,我相信你肯定试过去解析XML,也使用过类似DOM或者SAX这样的解析器,不过很有可能你从未进行过任何的HTML解析的工作.更讽刺的是,在Jav
开源的javascript项目Kissy介绍

kissy简介 kISSY是什么? KISSY是一个开源的javascript项目,其主体是一个前端UI开发框架,即KissyUI.本文所述的kissy是仅指其内核部分的kissy.js中的语言与框架设计思想.KISSY项目的开源网站是:http://kissyteam.github.com/ kissy怎么使用呢? 尽管在KissyUI向kissy内核化的过程中,我们提出了一些新的概念与框架模型,但事实上,我们并未改变KissyUI的任何使用惯例.从代码上来看,kissy.js和lang.js
JavaScript可视化图表库D3.js API中文参考

D3库所提供的所有 API 都在 d3 命名空间下.d3 库使用语义版本命名法(semantic versioning). 你可以用 d3.version 查看当前的版本信息. d3 (核心部分) 选择集 d3.select - 从当前文档中选择一系列元素. d3.selectAll - 从当前文档中选择多项元素. selection.attr - 设置或获取指定属性. selection.classed - 添加或删除选定元素的 CSS 类(CSS class). selection.styl
利用noesis.Javascript开源组件.Net中执行javascript脚本

界面如下: 然后,click filter button后的UI: 看,筛选出来了,代码如下(js能调C#写的UserInfo类的各个属性) 复制代码代码如下: public class UserInfo { public string FirstName { get; set; } public string LastName { get; set; } public int Age { get; set; } public ov
优秀js开源框架-jQuery使用手册(1)

jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优秀的js效果,jQuery可以帮你达到目的! 下载地址:http://jquery.com 下载完成后先加载到文档中,然后我们来看个简单的例子!<script language="javascript" type="text/javascript"> $(document).ready(f
Node.js开源应用框架HapiJS介绍

一.HapiJS介绍 HapiJS是一个开源的.基于Node.js的应用框架,它适用于构建应用程序和服务,其设计目标是让开发者把精力集中于开发可重用的应用程序的业务逻辑,向开发者提供构建应用程序业务逻辑所需的基础设施.HapiJS目前的最新版本为7.2.0版. 二.HapiJS安装和项目配置 1.安装Hapi库 HapiJS的安装很简单,执行如下命令: 复制代码代码如下: $ sudo npm install hapi -g hapi@7.2.0 /usr/local/lib/node_mod

4个顶级开源JavaScript图表库

相关推荐

随机推荐