整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
本文中，我將向您展示一些用于圖形/圖表的最佳JavaScript庫。這些庫將幫助您為未來的項目創建漂亮且可自定義的圖表。
雖然大多數庫都是免費和開源的，但其中一些庫提供了帶有附加功能的付費版本。
當我們想到今天的圖表時，D3.js是第一個出現的名字。作為一個開源項目，D3.js肯定會帶來許多現有庫中缺少的強大功能。“enter and exit”等功能，強大的轉換和熟悉jQuery或Prototype的語法使其成為最佳的圖表JavaScript庫。D3.js中的圖表通過HTML，SVG和CSS呈現。
與許多其他JavaScript庫不同，D3.js不提供任何預先構建的開箱即用的圖表。但是，您可以查看使用D3.js構建的圖表列表以獲得概述。
Google Charts是輕松創建圖表的首選JavaScript庫。它提供了許多預先構建的圖表，如區域圖表，條形圖，日歷圖表，餅圖，地理圖表等。
Google圖表還附帶了各種自定義選項，可幫助您更改圖表的外觀。使用HTML5 / SVG呈現圖表，為iPhone，iPad和Android提供跨瀏覽器兼容性和跨平臺可移植性。它還包括用于支持舊版IE的VML。
Highcharts JS是另一個非常受歡迎的圖形庫。它裝載了許多不同類型的炫酷動畫，足以吸引許多眼球到您的網站。與其他庫一樣，Highcharts附帶了許多預先構建的圖形，如樣條曲線，面積，區域線，柱，條，餅，散點等。
使用Highcharts JS的最大優勢之一是與舊版瀏覽器的兼容性 - 甚至可以回溯到Internet Explorer 6.標準瀏覽器使用SVG進行圖形渲染。在舊版Internet Explorer中，使用VML繪制圖形。
雖然Highcharts JS是免費供個人使用，但您需要購買商業用途的許可證。
商業級數據圖表，它是一個純JavaScript的圖標庫，兼容絕大部分的瀏覽器，底層依賴輕量級的canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
amCharts無疑是最美麗的圖表庫之一。它完全隔離成3個獨立的圖表 - JavaScript圖表，地圖圖表（amMaps）和股票圖表。
amMaps是我最喜歡的三個。它提供的功能包括在地圖上加載圖標或照片，熱圖，繪圖線，以及在地圖上添加文本，縮放等。
amCharts使用SVG渲染在現代瀏覽器中工作的圖表。
amCharts具有免費和收費版本。
ChartJS為圖表提供漂亮的平面設計。它使用HTML5 canvas元素進行渲染。通過polyfill添加對IE7 / 8等舊版瀏覽器的支持。
ChartJS圖表默認是響應式的。它們適用于手機和平板電腦。ChartJS開箱即用了6種不同類型的核心圖表（核心，條形圖，圓環圖，雷達圖，線圖圖和極地圖），它絕對是近期最令人印象深刻的開源圖表庫之一。
Chartist.js提供了漂亮的響應式圖表。它使用SVG渲染圖表。它可以通過CSS3媒體查詢和Sass進行控制和定制。另請注意，Chartist.js提供的酷炫動畫僅適用于現代瀏覽器。
如果您是Angular開發人員，您肯定會發現n3-charts非常有用且有趣。n3-charts建立在D3.js和Angular之上。它以可定制的Angular指令的形式提供各種標準圖表。
uvCharts是一個開源JavaScript圖表庫，聲稱擁有100多個自定義選項。它有12種不同的標準圖表類型。
uvCharts是使用D3.js庫構建的。它承諾從D3.js中消除所有困難的編碼部分，并提供標準圖表類型的簡單實現。uvCharts使用SVG，HTML和CSS呈現。
Plotly.js是第一個用于Web的科學JavaScript圖表庫。它自2015年以來一直是開源的，這意味著任何人都可以免費使用它。Plotly.js支持20種圖表類型，包括直方圖，3d圖，誤差線和地圖。它還可以執行所有基本圖表，如條形圖，折線圖和餡餅。
Plotly.js在引擎蓋下使用D3.js，因此它比制作D3.js圖形更容易，而不是單獨使用D3.js。有關使用Plotly.js制作的圖表的一些示例，請查看Plotly的圖表新聞Feed。
ECharts 是一個基于 JavaScript 的開源可視化圖表庫，涵蓋各行業圖表，多達20多種圖表和十幾種組件，支持各種圖表和組件的任意組合，滿足各種需求，也是前端項目中大屏應用最多的。
官方地址：https://echarts.apache.org/zh/index.html
D3.js 是一個 JavaScript 庫，用于基于數據操作文檔。D3 對 Web 標準的強調提供了現代瀏覽器的全部功能，而無需將自己綁定到專有框架，將強大的可視化組件和數據驅動的 DOM 操作方法相結合。
與許多其他 JavaScript 庫不同，D3 不附帶任何開箱即用的預構建圖表。但是可以查看使用 D3.js 構建的圖表列表 作為入門教程，D3.js 支持多種圖表類型。
唯一的缺點就是對于初學者來說其陡峭的學習曲線，不過還好有很多教程資源可以幫助你入門。
官網地址：https://d3js.org/
ChartJS 為圖表提供了漂亮的平面設計，如果是追求其展現和動畫效果的項目，ChartJS 是個不錯的選擇。
它使用 HTML5 Canvas 元素進行渲染并支持所有現代瀏覽器 (IE11+)。ChartJS 圖表默認是響應式的，它們在手機和平板電腦上運行良好，開箱即用。
官網地址：https://www.chartjs.org/
Chartist.js 提供的響應式圖表也很漂亮，同時也提供了很酷炫的動畫。它使用 SVG 來呈現圖表，可以通過 CSS3 媒體查詢和 Sass 進行控制和定制。
官網地址：https://gionkunz.github.io/chartist-js/
Plotly.js 是第一個用于 Web 的科學 JavaScript 圖表庫。Plotly.js 是建立在 D3.js 和 stack.gl 之上，支持 20 種圖表類型，包括 SVG 地圖、3D 圖表和統計圖。
官網地址：https://plotly.com/javascript/
Google 圖表工具功能強大、易于使用且是免費的。提供的圖表組件都是交互式的且支持自定義選項，跨瀏覽器兼容性（為較舊的 IE 版本采用 VML），以及跨平臺移植到 iOS 和新 Android 版本的能力。無需插件。
對于一些小項目且需求不是很復雜的項目，可以選擇Google Charts。
官網地址：https://developers.google.cn/chart?hl=en
表對于可視化數據和使網站具有吸引力非常重要。可視化演示使分析大塊數據和傳達信息變得更加容易。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（數據中的第二個數字）。
這是此代碼的輸出
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 中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對
對前端的技術，架構技術感興趣的同學關注我的頭條號，并在后臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料
知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
