10个用于创建漂亮图表的Javascript库

本文中，我将向您展示一些用于图形/图表的最佳JavaScript库。这些库将帮助您为未来的项目创建漂亮且可自定义的图表。

虽然大多数库都是免费和开源的，但其中一些库提供了带有附加功能的付费版本。

D3.js - 数据驱动文档

当我们想到今天的图表时，D3.js是第一个出现的名字。作为一个开源项目，D3.js肯定会带来许多现有库中缺少的强大功能。“enter and exit”等功能，强大的转换和熟悉jQuery或Prototype的语法使其成为最佳的图表JavaScript库。D3.js中的图表通过HTML，SVG和CSS呈现。

与许多其他JavaScript库不同，D3.js不提供任何预先构建的开箱即用的图表。但是，您可以查看使用D3.js构建的图表列表以获得概述。

Google Chart

Google Charts是轻松创建图表的首选JavaScript库。它提供了许多预先构建的图表，如区域图表，条形图，日历图表，饼图，地理图表等。

Google图表还附带了各种自定义选项，可帮助您更改图表的外观。使用HTML5 / SVG呈现图表，为iPhone，iPad和Android提供跨浏览器兼容性和跨平台可移植性。它还包括用于支持旧版IE的VML。

Highcharts JS

Highcharts JS是另一个非常受欢迎的图形库。它装载了许多不同类型的炫酷动画，足以吸引许多眼球到您的网站。与其他库一样，Highcharts附带了许多预先构建的图形，如样条曲线，面积，区域线，柱，条，饼，散点等。

使用Highcharts JS的最大优势之一是与旧版浏览器的兼容性 - 甚至可以回溯到Internet Explorer 6.标准浏览器使用SVG进行图形渲染。在旧版Internet Explorer中，使用VML绘制图形。

虽然Highcharts JS是免费供个人使用，但您需要购买商业用途的许可证。

ECharts

商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

amCharts

amCharts无疑是最美丽的图表库之一。它完全隔离成3个独立的图表 - JavaScript图表，地图图表（amMaps）和股票图表。

amMaps是我最喜欢的三个。它提供的功能包括在地图上加载图标或照片，热图，绘图线，以及在地图上添加文本，缩放等。

amCharts使用SVG渲染在现代浏览器中工作的图表。

amCharts具有免费和收费版本。

ChartJS

ChartJS为图表提供漂亮的平面设计。它使用HTML5 canvas元素进行渲染。通过polyfill添加对IE7 / 8等旧版浏览器的支持。

ChartJS图表默认是响应式的。它们适用于手机和平板电脑。ChartJS开箱即用了6种不同类型的核心图表（核心，条形图，圆环图，雷达图，线图图和极地图），它绝对是近期最令人印象深刻的开源图表库之一。

Chartist.js

Chartist.js提供了漂亮的响应式图表。它使用SVG渲染图表。它可以通过CSS3媒体查询和Sass进行控制和定制。另请注意，Chartist.js提供的酷炫动画仅适用于现代浏览器。

N3-Charts

如果您是Angular开发人员，您肯定会发现n3-charts非常有用且有趣。n3-charts建立在D3.js和Angular之上。它以可定制的Angular指令的形式提供各种标准图表。

uvCharts

uvCharts是一个开源JavaScript图表库，声称拥有100多个自定义选项。它有12种不同的标准图表类型。

uvCharts是使用D3.js库构建的。它承诺从D3.js中消除所有困难的编码部分，并提供标准图表类型的简单实现。uvCharts使用SVG，HTML和CSS呈现。

Plotly.js

Plotly.js是第一个用于Web的科学JavaScript图表库。它自2015年以来一直是开源的，这意味着任何人都可以免费使用它。Plotly.js支持20种图表类型，包括直方图，3d图，误差线和地图。它还可以执行所有基本图表，如条形图，折线图和馅饼。

Plotly.js在引擎盖下使用D3.js，因此它比制作D3.js图形更容易，而不是单独使用D3.js。有关使用Plotly.js制作的图表的一些示例，请查看Plotly的图表新闻Feed。

. ECharts

ECharts 是一个基于 JavaScript 的开源可视化图表库，涵盖各行业图表，多达20多种图表和十几种组件，支持各种图表和组件的任意组合，满足各种需求，也是前端项目中大屏应用最多的。

官方地址：https://echarts.apache.org/zh/index.html

2. D3.js

D3.js 是一个 JavaScript 库，用于基于数据操作文档。D3 对 Web 标准的强调提供了现代浏览器的全部功能，而无需将自己绑定到专有框架，将强大的可视化组件和数据驱动的 DOM 操作方法相结合。

与许多其他 JavaScript 库不同，D3 不附带任何开箱即用的预构建图表。但是可以查看使用 D3.js 构建的图表列表作为入门教程，D3.js 支持多种图表类型。

唯一的缺点就是对于初学者来说其陡峭的学习曲线，不过还好有很多教程资源可以帮助你入门。

官网地址：https://d3js.org/

3. ChartJS

ChartJS 为图表提供了漂亮的平面设计，如果是追求其展现和动画效果的项目，ChartJS 是个不错的选择。

它使用 HTML5 Canvas 元素进行渲染并支持所有现代浏览器 (IE11+)。ChartJS 图表默认是响应式的，它们在手机和平板电脑上运行良好，开箱即用。

官网地址：https://www.chartjs.org/

4. Chartist.js

Chartist.js 提供的响应式图表也很漂亮，同时也提供了很酷炫的动画。它使用 SVG 来呈现图表，可以通过 CSS3 媒体查询和 Sass 进行控制和定制。

官网地址：https://gionkunz.github.io/chartist-js/

5. Plotly.js

Plotly.js 是第一个用于 Web 的科学 JavaScript 图表库。Plotly.js 是建立在 D3.js 和 stack.gl 之上，支持 20 种图表类型，包括 SVG 地图、3D 图表和统计图。

官网地址：https://plotly.com/javascript/

6. Google Charts

Google 图表工具功能强大、易于使用且是免费的。提供的图表组件都是交互式的且支持自定义选项，跨浏览器兼容性（为较旧的 IE 版本采用 VML），以及跨平台移植到 iOS 和新 Android 版本的能力。无需插件。

对于一些小项目且需求不是很复杂的项目，可以选择Google Charts。

官网地址：https://developers.google.cn/chart?hl=en

表对于可视化数据和使网站具有吸引力非常重要。可视化演示使分析大块数据和传达信息变得更加容易。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 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对

对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料

知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！

在线咨询

上一篇：12.HTML创建和格式化表格
下一篇：html基础必备-分隔标记，前端小白一看就会

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商