溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹好用的開源JavaScript圖表庫有哪些，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
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>如你所見，通過設置 type 和 bar 來構造條形圖。你可以把條形體的方向改成其他類型 —— 比如把 type 設置成 horizontalBar。
在 backgroundColor 數組參數中提供顏色類型，就可以設置條形圖的顏色。
顏色被分配給關聯數組中相同索引的標簽和數據。例如，第二個標簽 “Latin American”，顏色會是 “藍色（blue）”（第二個顏色），數值是 4（data 中的第二個數字）。
代碼的執行結果如下。
Chartist.js 是一個簡單的 JavaScript 動畫庫，你能夠自制美麗的響應式圖表，或者進行其他創作。使用它需要遵循 WTFPL 或者 MIT 協議。
這個庫是由一些對現有圖表工具不滿的開發者進行開發的，它可以為設計師或程序員提供美妙的功能。
在項目中包含 Chartist.js 庫后，你可以使用它們來創建各式各樣的圖表，包括動畫，條形圖和折線圖。它使用 SVG 來動態渲染圖表。
這里是使用該庫繪制一個餅圖的例子。
<!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 庫，你可以使用各種預先構建好的 CSS 樣式，而不是在項目中指定各種與樣式相關的部分。你可以使用這些樣式來設置已創建的圖表的外觀。
比如，預創建的 CSS 類 .ct-chart 是用來構建餅狀圖的容器。還有 .ct-golden-section 類可用于獲取縱橫比，它基于響應式設計進行縮放，幫你解決了計算固定尺寸的麻煩。Chartist 還提供了其它類別的比例容器，你可以在自己的項目中使用它們。
為了給各個扇形設置樣式，可以使用默認的 .ct-serials-a 類。字母 a 是根據系列的數量變化的（a、b、c，等等），因此它與每個要設置樣式的扇形相對應。
Chartist.Pie 方法用來創建一個餅狀圖。要創建另一種類型的圖表，比如折線圖，請使用 Chartist.Line。
代碼的執行結果如下。
D3.js 是另一個好用的開源 JavaScript 圖表庫。使用它需要遵循 BSD 許可證。D3 的主要用途是，根據提供的數據，處理和添加文檔的交互功能，。
借助這個 3D 動畫庫，你可以通過 HTML5、SVG 和 CSS 來可視化你的數據，并且讓你的網站變得更精美。更重要的是，使用 D3，你可以把數據綁定到文檔對象模型（DOM）上，然后使用基于數據的函數改變文檔。
示例代碼如下，它使用該庫繪制了一個簡單的條形圖。
<!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 庫的主要概念是應用 CSS 樣式選擇器來定位 DOM 節點，然后對其執行操作，就像其它的 DOM 框架，比如 JQuery。
將數據綁定到文檔上后，.enter() 函數會被調用，為即將到來的數據構建新的節點。所有在 .enter() 之后調用的方法會為數據中的每一個項目調用一次。
代碼的執行結果如下。
以上是“好用的開源JavaScript圖表庫有哪些”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
