資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用 Bootstrap 建立圖表？
圖表對於資料視覺化非常重要，我們可以以各種格式顯示資料並分析資料模式。圖表對於資料科學家也更為重要，因為他們需要分析各種資料。
Bootstrap 是一個庫，允許我們使用 JavaScript 或 JQuery 繪製各種圖表。它包含我們需要匯入的函式，並將圖表型別和圖表資料作為函式的引數傳遞，它將為我們準備圖表。
本教程將教我們如何使用 Bootstrap 繪製各種圖表模式。
語法
使用者可以遵循以下語法使用 Bootstrap 建立圖表。
new Chart("Canvas_id", {
Type: "Chart_Type",
Data: { various data },
Options: { Various options }
});
在上述語法中，我們使用了帶有 new 關鍵字的 Chart() 建構函式來建立一個 Chart 物件。
引數
Canvas_id − 這是要在其中顯示圖表的畫布的 ID。此外，我們可以在變數中訪問 HTML 元素，並將該變數用作第一個引數，而不是畫布 ID。
型別 − Bootstrap 包含各種型別的圖表。例如，折線圖、雷達圖、條形圖、水平條形圖、餅圖、極地區域圖、環形圖、散點圖和氣泡圖。我們可以指定任何一個來繪製它。
資料 − 它是以物件格式繪製圖表的資料。
選項 − 我們需要以物件格式傳遞各種選項來完善我們的圖表。例如，標籤、borderColor、backgroundColor、borderWidth 等。
示例 1
在下面的示例中，我們使用 Bootstrap 建立了散點圖。我們使用一些 x 和 y 值建立了 chartData。
之後，我們在建立圖表時將“scatter”作為型別，並將 chartData 用作 data 物件中的資料。此外，我們還為散點圖的每個點設定了背景顏色和邊框。使用者可以看到我們如何使用 options 設定 x-y 座標的最小值和最大值限制。
<html>
<head>
<style> #sampleChart{ max-width: 550px; height: 300px;} </style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
</head>
<body>
<h2> Using the <i> Bootstrap </i> to draw a scatter plot </h2>
<canvas id = "sampleChart"> </canvas>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
var chartData = [
{ x: 1, y: 1 },
{ x: 2, y: 3 },
{ x: 3, y: 5 },
{ x: 4, y: 7 },
{ x: 5, y: 11 },
{ x: 6, y: 9 },
{ x: 7, y: 5 },
{ x: 8, y: 6 },
{ x: 9, y: 15 },
{ x: 10, y: 14 },
];
let canvas = document.getElementById("sampleChart")
new Chart(canvas, {
type: "scatter",
data: {
datasets: [{
borderColor: "yellow",
pointBackgroundColor: "green",
data: chartData
}]
},
options: {
scales: {
xAxes: [{ ticks: { min: 1, max: 10 } }],
yAxes: [{ ticks: { min: 1, max: 20 } }],
}
}
});
</script>
</body>
</html>
在上面的輸出中，我們可以觀察到根據我們傳遞的資料，帶有綠色點和黃色半徑的散點圖。
示例 2
在這個例子中，我們將使用 Bootstrap 建立一個折線圖。但是，我們將在單個畫布中建立多條線，並將“line”作為畫布。我們為各種線條建立了資料，並將它們儲存在 line1Data、line2data 和 line3Data 變數中。此外，我們還建立了一個標籤陣列。
使用者可以看到我們如何在 data 物件中傳遞多條線的資料。此外，我們還為每個繪圖線使用了不同的線條顏色和填充顏色，以使其更具吸引力。options 執行設定 x-y 座標限制的相同工作。
<html>
<head>
<style> #sampleChart { max-width: 550px; height: 300px;} </style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
</head>
<body>
<h2> Using the <i>Bootstrap </i> to draw multiple lines with a line plot</h2>
<canvas id = "sampleChart"> </canvas>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let canvas = document.getElementById("sampleChart");
let line1Data = [20, 10, 30, 40, 60, 70, 100, 120, 220, 200];
let line2Data = [10, 5, 20, 25, 60, 55, 47, 80, 100, 30, 55];
let line3Data = [30, 40, 50, 60, 70, 80, 90, 100, 102, 34];
var xValues = [20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300];
new Chart(canvas, {
type: "line",
data: {
labels: xValues,
datasets: [{
borderColor: "red",
pointBackgroundColor: "green",
fill: false,
data: line1Data,
label: "line 1"
}, {
borderColor: "yellow",
pointBackgroundColor: "blue",
fill: false,
data: line2Data,
label: "line 2"
}, {
borderColor: "black",
pointBackgroundColor: "pink",
fill: false,
data: line3Data,
label: "line 3"
}]
},
options: {
scales: {
xAxes: [{ ticks: { min: 5, max: 300 } }],
yAxes: [{ ticks: { min: 5, max: 300 } }],
}
}
});
</script>
</body>
</html>
示例 3
在下面的示例中，我們正在建立餅圖。我們為性別取了三個標籤，每個性別都有不同的值。之後，我們將性別資料傳遞給 data 物件，併為餅圖中的每個性別設定顏色。
<html>
<head>
<style>
#sampleChart {
max-width: 300px;
height: 150px; }
* { text-align: center;}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
</head>
<body>
<h2>Using the <i> Bootstrap </i> to draw a pie chart </h2>
<p> Showing data of male, female, and others </p>
<canvas id = "pieChart"> </canvas>
<script>
let canvas = document.getElementById("pieChart");
new Chart(canvas, {
type: "pie",
data: {
labels: ["male", "female", "others"],
datasets: [{
backgroundColor: ["blue", "red", "green"],
borderWidth: 10,
data: [455, 240, 55]
}]
},
});
</script>
</body>
</html>
在本教程中，使用者學習瞭如何建立散點圖、折線圖和餅圖。但是，Bootstrap 庫中還提供其他型別的圖表。使用者可以根據自己的需求使用任何圖表。
2K+ 次瀏覽
