好用的3個(gè)開源JavaScript圖表庫
圖表及其它可視化方式讓傳遞數(shù)據(jù)的信息變得更簡單。
對(duì)于數(shù)據(jù)可視化和制作精美網(wǎng)站來說，圖表和圖形很重要。視覺上的展示讓分析大塊數(shù)據(jù)及傳遞信息變得更簡單。JavaScript 圖表庫能讓數(shù)據(jù)以極好的、易于理解的和交互的方式進(jìn)行可視化，還能夠優(yōu)化你的網(wǎng)站設(shè)計(jì)。
本文會(huì)帶你學(xué)習(xí)很好的 3 個(gè)開源 JavaScript 圖表庫。
1、 Chart.js
Chart.js 是一個(gè)開源的 JavaScript 庫，你可以在自己的應(yīng)用中用它創(chuàng)建生動(dòng)美麗和交互式的圖表。使用它需要遵循 MIT 協(xié)議。
使用 Chart.js，你可以創(chuàng)建各種各樣令人印象深刻的圖表和圖形，包括條形圖、折線圖、范圍圖、線性標(biāo)度和散點(diǎn)圖。它可以響應(yīng)各種設(shè)備，使用 HTML5 Canvas 元素進(jìn)行繪制。
示例代碼如下，它使用該庫繪制了一個(gè)條形圖。本例中我們使用 Chart.js 的內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）來包含這個(gè)庫。注意這里使用的數(shù)據(jù)僅用于展示。
<!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>
如你所見，通過設(shè)置 type 和 bar 來構(gòu)造條形圖。你可以把條形體的方向改成其他類型 —— 比如把 type 設(shè)置成 horizontalBar。
在 backgroundColor 數(shù)組參數(shù)中提供顏色類型，就可以設(shè)置條形圖的顏色。
顏色被分配給關(guān)聯(lián)數(shù)組中相同索引的標(biāo)簽和數(shù)據(jù)。例如，第二個(gè)標(biāo)簽 “Latin American”，顏色會(huì)是 “藍(lán)色（blue）”（第二個(gè)顏色），數(shù)值是 4（data 中的第二個(gè)數(shù)字）。
代碼的執(zhí)行結(jié)果如下。
2、 Chartist.js
Chartist.js 是一個(gè)簡單的 JavaScript 動(dòng)畫庫，你能夠自制美麗的響應(yīng)式圖表，或者進(jìn)行其他創(chuàng)作。使用它需要遵循 WTFPL 或者 MIT 協(xié)議。
這個(gè)庫是由一些對(duì)現(xiàn)有圖表工具不滿的開發(fā)者進(jìn)行開發(fā)的，它可以為設(shè)計(jì)師或程序員提供美妙的功能。
在項(xiàng)目中包含 Chartist.js 庫后，你可以使用它們來創(chuàng)建各式各樣的圖表，包括動(dòng)畫，條形圖和折線圖。它使用 SVG 來動(dòng)態(tài)渲染圖表。
這里是使用該庫繪制一個(gè)餅圖的例子。
<!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 庫，你可以使用各種預(yù)先構(gòu)建好的 CSS 樣式，而不是在項(xiàng)目中指定各種與樣式相關(guān)的部分。你可以使用這些樣式來設(shè)置已創(chuàng)建的圖表的外觀。
比如，預(yù)創(chuàng)建的 CSS 類 .ct-chart 是用來構(gòu)建餅狀圖的容器。還有 .ct-golden-section 類可用于獲取縱橫比，它基于響應(yīng)式設(shè)計(jì)進(jìn)行縮放，幫你解決了計(jì)算固定尺寸的麻煩。Chartist 還提供了其它類別的比例容器，你可以在自己的項(xiàng)目中使用它們。
為了給各個(gè)扇形設(shè)置樣式，可以使用默認(rèn)的 .ct-serials-a 類。字母 a 是根據(jù)系列的數(shù)量變化的（a、b、c，等等），因此它與每個(gè)要設(shè)置樣式的扇形相對(duì)應(yīng)。
Chartist.Pie 方法用來創(chuàng)建一個(gè)餅狀圖。要?jiǎng)?chuàng)建另一種類型的圖表，比如折線圖，請(qǐng)使用 Chartist.Line。
代碼的執(zhí)行結(jié)果如下。
3、 D3.js
D3.js 是另一個(gè)好用的開源 JavaScript 圖表庫。使用它需要遵循 BSD 許可證。D3 的主要用途是，根據(jù)提供的數(shù)據(jù)，處理和添加文檔的交互功能，。
借助這個(gè) 3D 動(dòng)畫庫，你可以通過 HTML5、SVG 和 CSS 來可視化你的數(shù)據(jù)，并且讓你的網(wǎng)站變得更精美。更重要的是，使用 D3，你可以把數(shù)據(jù)綁定到文檔對(duì)象模型（DOM）上，然后使用基于數(shù)據(jù)的函數(shù)改變文檔。
示例代碼如下，它使用該庫繪制了一個(gè)簡單的條形圖。
<!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 庫的主要概念是應(yīng)用 CSS 樣式選擇器來定位 DOM 節(jié)點(diǎn)，然后對(duì)其執(zhí)行操作，就像其它的 DOM 框架，比如 JQuery。
將數(shù)據(jù)綁定到文檔上后，.enter() 函數(shù)會(huì)被調(diào)用，為即將到來的數(shù)據(jù)構(gòu)建新的節(jié)點(diǎn)。所有在 .enter() 之后調(diào)用的方法會(huì)為數(shù)據(jù)中的每一個(gè)項(xiàng)目調(diào)用一次。
代碼的執(zhí)行結(jié)果如下。
總結(jié)
JavaScript 圖表庫提供了強(qiáng)大的工具，你可以將自己的網(wǎng)絡(luò)資源進(jìn)行數(shù)據(jù)可視化。通過這三個(gè)開源庫，你可以把自己的網(wǎng)站變得更好看，更容易使用。
你知道其它強(qiáng)大的用于創(chuàng)造 JavaScript 動(dòng)畫效果的前端庫嗎？請(qǐng)?jiān)谙路降脑u(píng)論區(qū)留言分享。
