3個頂級開源JavaScript圖表庫，前端程序員必備！
圖表對于可視化數(shù)據(jù)和使網(wǎng)站具有吸引力非常重要?？梢暬菔臼狗治龃髩K數(shù)據(jù)和傳達(dá)信息變得更加容易。JavaScript圖表庫使你能夠以易于理解和交互的方式可視化數(shù)據(jù)，并改善網(wǎng)站的設(shè)計。有三個***開源JavaScript圖表庫，你一定要Get!
1. Chart.js
Chart.js是一個開源JavaScript庫，允許你在應(yīng)用程序上創(chuàng)建動畫，美觀和交互式圖表。它可以在MIT許可下獲得。
使用Chart.js，你可以創(chuàng)建各種令人印象深刻的圖表和圖形，包括條形圖，折線圖，面積圖，線性比例和散點(diǎn)圖。它完全響應(yīng)各種設(shè)備，并利用HTML5 Canvas元素進(jìn)行渲染。
以下是使用庫繪制條形圖的示例代碼。我們將使用Chart.js內(nèi)容交付網(wǎng)絡(luò)(CDN)將其包含在此示例中。請注意，使用的數(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è)置為bar來構(gòu)造條形圖。你可以將條形的方向更改為其他類型，例如將type設(shè)置為horizontalBar。
通過在backgroundColor數(shù)組參數(shù)中提供顏色類型來設(shè)置條形圖的顏色。
顏色分配給在相應(yīng)數(shù)組中共享相同索引的標(biāo)簽和數(shù)據(jù)。例如，第二個標(biāo)簽“拉丁美洲”將設(shè)置為“藍(lán)色”(第二種顏色)和4(數(shù)據(jù)中的第二個數(shù)字)。
這是此代碼的輸出。
2. Chartist.js
Chartist.js是一個簡單的JavaScript動畫庫，允許你創(chuàng)建可自定義和美觀的響應(yīng)圖表和其他設(shè)計。開源庫可在WTFPL或MIT許可下獲得。
該庫是由一群對現(xiàn)有圖表工具不滿意的開發(fā)人員開發(fā)的，因此它為設(shè)計人員和開發(fā)人員提供了出色的功能。
在項(xiàng)目中包含Chartist.js庫及其CSS文件后，你可以使用它們創(chuàng)建各種類型的圖表，包括動畫，條形圖和折線圖。它利用SVG動態(tài)渲染圖表。
以下是使用庫繪制餅圖的代碼示例。
- <!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)的組件。你可以使用它們來控制創(chuàng)建的圖表的外觀。
例如，預(yù)先創(chuàng)建的CSS類.ct-chart用于構(gòu)建餅圖的容器。而且，.ct-golden-section類用于獲取寬高比，可以使用響應(yīng)式設(shè)計進(jìn)行縮放，并為你節(jié)省計算固定尺寸的麻煩。Chartist還提供了你可以在項(xiàng)目中使用的其他類別的容器比率。
要設(shè)置各種餅圖樣式，可以使用默認(rèn)的.ct-series-a類。字母a與每個系列計數(shù)(a，b，c等)一起迭代，使得它與要設(shè)置樣式的切片相對應(yīng)。
Chartist.Pie方法用于創(chuàng)建餅圖。要創(chuàng)建另一種類型的圖表，例如折線圖，請使用Chartist.Line。
這是代碼的輸出。
3. D3.js
D3.js是另一個很棒的開源JavaScript圖表庫。它可以在BSD許可下使用。D3主要用于根據(jù)提供的數(shù)據(jù)操縱和添加文檔的交互性。
你可以使用這個神奇的3D動畫庫，使用HTML5，SVG和CSS可視化你的數(shù)據(jù)，讓網(wǎng)站更具吸引力。從本質(zhì)上講，D3使你能夠?qū)?shù)據(jù)綁定到文檔對象模型(DOM)，然后使用基于數(shù)據(jù)的函數(shù)來更改文檔。
以下是使用庫繪制簡單條形圖的示例代碼。
- <!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)，然后應(yīng)用運(yùn)算符來操作它們，就像在其他DOM框架(如jQuery)中一樣。
將數(shù)據(jù)綁定到文檔后，將調(diào)用.enter()函數(shù)來為傳入數(shù)據(jù)構(gòu)建新節(jié)點(diǎn)。在.enter()函數(shù)之后調(diào)用的所有方法都將為數(shù)據(jù)中的每個項(xiàng)調(diào)用。
這是代碼的輸出。
結(jié)語
JavaScript圖表庫為你提供了強(qiáng)大的工具，用于在Web屬性上實(shí)現(xiàn)數(shù)據(jù)可視化。通過這三個開源庫，你可以增強(qiáng)網(wǎng)站的美感和互動性。你還有其他強(qiáng)大的前端庫來創(chuàng)建JavaScript動畫效果嗎?不妨分享!
