圖表對於視覺化資料和使網站具有吸引力非常重要。視覺化演示使分析大塊資料和傳達資訊變得更加容易。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>
複製程式碼前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力
從這段程式碼中可以看出，通過將型別設定為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 中更是加入了更多豐富的互動功能以及更多的視覺化效果，並且對