欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

4個(gè)頂級(jí)開(kāi)源JavaScript圖表庫(kù)

 更新時(shí)間：2018年09月29日 11:27:22   作者：Michael J. Garbade  
今天小編就為大家分享一篇關(guān)于4個(gè)頂級(jí)開(kāi)源JavaScript圖表庫(kù)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧

圖表對(duì)于可視化數(shù)據(jù)和使網(wǎng)站具有吸引力非常重要?？梢暬菔臼狗治龃髩K數(shù)據(jù)和傳達(dá)信息變得更加容易。JavaScript圖表庫(kù)使你能夠以易于理解和交互的方式可視化數(shù)據(jù)，并改善網(wǎng)站的設(shè)計(jì)。有四個(gè)頂級(jí)開(kāi)源JavaScript圖表庫(kù)，你一定要Get!

1.Chart.js

Chart.js是一個(gè)開(kāi)源JavaScript庫(kù)，允許你在應(yīng)用程序上創(chuàng)建動(dòng)畫，美觀和交互式圖表。它可以在MIT許可下獲得。

使用Chart.js，你可以創(chuàng)建各種令人印象深刻的圖表和圖形，包括條形圖，折線圖，面積圖，線性比例和散點(diǎn)圖。它完全響應(yīng)各種設(shè)備，并利用HTML5 Canvas元素進(jìn)行渲染。

以下是使用庫(kù)繪制條形圖的示例代碼。我們將使用Chart.js內(nèi)容交付網(wǎng)絡(luò)（CDN）將其包含在此示例中。請(qǐng)注意，使用的數(shù)據(jù)僅用于說(shuō)明目的。

<!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>

從這段代碼中可以看出，通過(guò)將類型設(shè)置為bar來(lái)構(gòu)造條形圖。你可以將條形的方向更改為其他類型，例如將type設(shè)置為horizontalBar。

通過(guò)在backgroundColor數(shù)組參數(shù)中提供顏色類型來(lái)設(shè)置條形圖的顏色。

顏色分配給在相應(yīng)數(shù)組中共享相同索引的標(biāo)簽和數(shù)據(jù)。例如，第二個(gè)標(biāo)簽“拉丁美洲”將設(shè)置為“藍(lán)色”（第二種顏色）和4（數(shù)據(jù)中的第二個(gè)數(shù)字）。

這是此代碼的輸出

2.Chartist.js

Chartist.js是一個(gè)簡(jiǎn)單的JavaScript動(dòng)畫庫(kù)，允許你創(chuàng)建可自定義和美觀的響應(yīng)圖表和其他設(shè)計(jì)。開(kāi)源庫(kù)可在WTFPL或MIT許可下獲得。

該庫(kù)是由一群對(duì)現(xiàn)有圖表工具不滿意的開(kāi)發(fā)人員開(kāi)發(fā)的，因此它為設(shè)計(jì)人員和開(kāi)發(fā)人員提供了出色的功能。

在項(xiàng)目中包含Chartist.js庫(kù)及其CSS文件后，你可以使用它們創(chuàng)建各種類型的圖表，包括動(dòng)畫，條形圖和折線圖。它利用SVG動(dòng)態(tài)渲染圖表。

以下是使用庫(kù)繪制餅圖的代碼示例

<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庫(kù)允許你使用各種預(yù)構(gòu)建的CSS樣式，而不是指定項(xiàng)目的各種與樣式相關(guān)的組件。你可以使用它們來(lái)控制創(chuàng)建的圖表的外觀。

例如，預(yù)先創(chuàng)建的CSS類.ct-chart用于構(gòu)建餅圖的容器。而且，.ct-golden-section類用于獲取寬高比，可以使用響應(yīng)式設(shè)計(jì)進(jìn)行縮放，并為你節(jié)省計(jì)算固定尺寸的麻煩。Chartist還提供了你可以在項(xiàng)目中使用的其他類別的容器比率。

要設(shè)置各種餅圖樣式，可以使用默認(rèn)的.ct-series-a類。字母a與每個(gè)系列計(jì)數(shù)（a，b，c等）一起迭代，使得它與要設(shè)置樣式的切片相對(duì)應(yīng)。

Chartist.Pie方法用于創(chuàng)建餅圖。要?jiǎng)?chuàng)建另一種類型的圖表，例如折線圖，請(qǐng)使用Chartist.Line。

這是代碼的輸出

3.D3.js

D3.js是另一個(gè)很棒的開(kāi)源JavaScript圖表庫(kù)。它可以在BSD許可下使用。D3主要用于根據(jù)提供的數(shù)據(jù)操縱和添加文檔的交互性。

你可以使用這個(gè)神奇的3D動(dòng)畫庫(kù)，使用HTML5，SVG和CSS可視化你的數(shù)據(jù)，讓網(wǎng)站更具吸引力。從本質(zhì)上講，D3使你能夠?qū)?shù)據(jù)綁定到文檔對(duì)象模型（DOM），然后使用基于數(shù)據(jù)的函數(shù)來(lái)更改文檔。

以下是使用庫(kù)繪制簡(jiǎn)單條形圖的示例代碼

.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庫(kù)的主要概念是首先應(yīng)用CSS樣式選擇指向DOM節(jié)點(diǎn)，然后應(yīng)用運(yùn)算符來(lái)操作它們，就像在其他DOM框架（如jQuery）中一樣。

將數(shù)據(jù)綁定到文檔后，將調(diào)用.enter（）函數(shù)來(lái)為傳入數(shù)據(jù)構(gòu)建新節(jié)點(diǎn)。在.enter（）函數(shù)之后調(diào)用的所有方法都將為數(shù)據(jù)中的每個(gè)項(xiàng)調(diào)用。

這是代碼的輸出

4.ECharts

ECharts 由百度前端技術(shù)部開(kāi)發(fā)的，是一個(gè)純 Javascript 的圖表庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器(IE8/9/10/11、Chrome、Firefox、Safari等)，底層依賴輕量級(jí)的 Canvas 類庫(kù) ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

ECharts 有良好的自適應(yīng)效果，ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對(duì)移動(dòng)端做了深度的優(yōu)化。

JavaScript圖表庫(kù)為你提供了強(qiáng)大的工具，用于在Web屬性上實(shí)現(xiàn)數(shù)據(jù)可視化。通過(guò)這四個(gè)開(kāi)源庫(kù)，你可以增強(qiáng)網(wǎng)站的美感和互動(dòng)性。你還有其他強(qiáng)大的前端庫(kù)來(lái)創(chuàng)建JavaScript動(dòng)畫效果嗎？不妨分享！

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請(qǐng)查看下面相關(guān)鏈接

相關(guān)文章

最新評(píng)論