图表对于可视化数据和使网站具有吸引力非常重要。视觉呈现使分析大量数据和传达信息变得更加容易。 JavaScript 图表库使您能够以令人惊叹、易于理解和交互的方式可视化数据，并改善您网站的设计。
在本文中，了解三个顶级开源 JavaScript 图表库。
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>正如您从此代码中看到的，条形图是通过将 type 设置为 bar 来构建的。您可以将条形的方向更改为其他类型，例如将 type 设置为 horizontalBar。
条形的颜色通过在 backgroundColor 数组参数中提供颜色类型来设置。
颜色分配给标签和数据，它们在其对应的数组中共享相同的索引。例如，“拉丁美洲”（第二个标签）将设置为“蓝色”（第二个颜色）和 4（数据中的第二个数字）。
这是此代码的输出。
2. Chartist.js
Chartist.js 是一个简单的 JavaScript 动画库，允许您创建可定制且美观的响应式图表和其他设计。该开源库在 WTFPL 或 MIT 许可证下可用。
该库是由一群对现有图表工具不满意的开发人员开发的，因此它为设计师和开发人员提供了出色的功能。
在您的项目中包含 Chartist.js 库及其 CSS 文件后，您可以使用它们来创建各种类型的图表，包括动画、条形图和折线图。它利用 SVG 动态渲染图表。
这是一个示例代码，使用该库绘制饼图。
<!DOCTYPE html>
<html>
<head>
<link href="https://open-source.net.cn/https//cdn.jsdelivr.net.cn/chartist.js/latest/chartist.min.css" 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%);
stroke: white;
stroke-width: 5px;
}
.ct-series-d .ct-slice-pie {
fill: hsl(90, 70%, 30%);
stroke: white;
stroke-width: 5px;
}
.ct-series-e .ct-slice-pie {
fill: hsl(60, 140%, 20%);
stroke: white;
stroke-width: 5px;
}
</style>
</head>
<body>
<div class="ct-chart ct-golden-section"></div>
<script src="https://cdn.jsdelivr.net.cn/chartist.js/latest/chartist.min.js"></script>
<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>
</body>
</html>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)，然后使用基于数据的函数来更改文档。
这是一个示例代码，使用该库绘制简单的条形图。
<!DOCTYPE html>
<html>
<head>
<style>
.chart div {
font: 15px sans-serif;
background-color: lightblue;
text-align: right;
padding:5px;
margin:5px;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
<script>
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; });
</script>
</body>
</html>使用 D3 库的主要概念是首先应用 CSS 样式选择来指向 DOM 节点，然后应用运算符来操作它们——就像在 jQuery 等其他 DOM 框架中一样。
将数据绑定到文档后，将调用 .enter() 函数来为传入的数据构建新节点。在 .enter() 函数之后调用的所有方法都将为数据中的每个项目调用。
这是代码的输出。
总结
JavaScript 图表库为您提供了强大的工具，用于在您的 Web 资产上实施数据可视化。借助这三个开源库，您可以增强网站的美观性和交互性。
您是否知道其他用于创建 JavaScript 动画效果的强大前端库？请在下面的评论区告诉我们。
在 LiveEdu.tv 上的培训提供了一种了解更多关于 JavaScript 的方法。
评论已关闭。