4个*开源JavaScript图表库

程序员文章站 2023-03-23 07:50:38

图表对于可视化数据和使网站具有吸引力非常重要。可视化演示使分析大块数据和传达信息变得更加容易。javascript图表库使你能够以易于理解和交互的方式可视化数据，并改善网站...

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