本文介绍了3个优秀的开源JavaScript图表库：Chart.js、Chartist.js和D3.js，用于数据可视化和提升网站设计。Chart.js适用于创建动画图表，支持多种图表类型；Chartist.js注重自定义和响应式设计，提供动画图表和SVG绘图；D3.js则允许数据绑定到DOM并实现交互式数据可视化。
qt开源图表库
图表对于可视化数据和吸引网站很重要。 可视化演示使分析大块数据和传达信息变得更加容易。 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数组参数中提供颜色类型来设置条形的颜色。
将颜色分配给标签和数据，这些标签和数据在其对应的数组中共享相同的索引。 例如，第二个标签“ Latin America”将设置为“ blue”（第二个颜色）和4（数据中的第二个数字）。
这是此代码的输出。
2. Chartist.js
Chartist.js是一个简单JavaScript动画库，可让您创建可自定义且美观的响应式图表和其他设计。 开源库在WTFPL或MIT许可下可用。
该库是由对现有图表工具不满意的一组开发人员开发的，因此它为设计师和开发人员提供了出色的功能。
将Chartist.js库及其CSS文件包含在您的项目中之后，您可以使用它们来创建各种类型的图表，包括动画，条形图和折线图。 它利用SVG动态绘制图表。
这是使用该库绘制饼图的代码示例。
<! DOCTYPE html
>
< html
>
< head
>
< link href
=
"https//cdn.jsdelivr.net/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/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样式。 您可以使用它们来控制创建的图表的外观。
.ct-chart用于构建饼图的容器。 并且， .ct-golden-section类用于获取长宽比，该宽高比可通过响应式设计进行缩放，从而节省了计算固定尺寸的麻烦。 Chartist还提供您可以在项目中使用的其他类别的集装箱比率。要设置各种饼图的样式，可以使用default。 ct系列-一类。 每个系列计数（a，b，c等）都会对字母a进行迭代，以使其与要设置样式的切片相对应。
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节点，然后应用运算符来操纵它们-就像在其他DOM框架（如jQuery）中一样。
数据绑定到文档后，。 调用enter（）函数以为输入数据构建新节点。 。之后的所有方法调用。 将对数据中的每个项目调用enter（）函数。
这是代码的输出。
结语
JavaScript图表库为您提供了用于在网络媒体资源上实现数据可视化的强大工具。 使用这三个开源库，您可以增强网站的美观性和交互性。
您是否知道另一个强大的用于创建JavaScript动画效果的前端库？ 请在下面的评论部分中告诉我们。
LiveEdu.tv培训提供了一种了解JavaScript的方法。
翻译自: https://opensource.com/article/18/9/open-source-javascript-chart-libraries
qt开源图表库
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
