如何使用 Bootstrap 创建图表?
图表对于数据可视化至关重要，我们可以用各种格式显示数据并分析数据中的模式。此外，图表对于数据科学家来说更为重要，因为他们需要分析各种数据。
Bootstrap 是一个库，允许我们使用 JavaScript 或 JQuery 绘制各种图表。它包含我们需要导入的函数，并将图表类型和图表数据作为函数的参数传递，它会为我们准备一个图表。
本教程将教我们使用 Bootstrap 绘制各种图表模式。
语法
用户可以按照以下语法使用 Bootstrap 创建图表。
new Chart("Canvas_id", {
Type: "Chart_Type",
Data: { various data },
Options: { Various options }
});
在上述语法中，我们使用 Chart() 构造函数和 new 关键字创建了一个 Chart 对象。
参数
Canvas_id − 这是我们想要显示图表的画布的 ID。此外，我们可以访问 HTML 元素中的变量，并将该变量用作第一个参数，而不是画布 ID。
类型 − Bootstrap 包含各种类型的图表。例如，折线图、雷达图、条形图、水平条形图、饼图、极坐标区域图、圆环图、散点图和气泡图。我们可以指定任何一种来绘制图表。
数据 − 以对象格式绘制图表的数据。
选项 − 我们需要以对象格式传递各种选项来提供图表。例如，标签、边框颜色、背景颜色、边框宽度等。
示例 1
在下面的示例中，我们使用 Bootstrap 创建了散点图。我们使用一些 x 和 y 值创建了 chartData。
之后，我们在创建图表时选择"散点图"作为类型，并在数据对象中使用 chartData 作为数据。此外，我们还设置了散点图每个点的背景颜色和边框。用户可以看到我们如何使用选项来设置 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 变量中。此外，我们还创建了一个标签数组。
用户可以在数据对象中看到我们如何传递多条线条的数据。此外，我们为每条线条使用了不同的线条颜色和填充颜色，使其更具吸引力。这些选项的作用与设置 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
在下面的示例中，我们将创建饼图。我们为性别设置了三个标签，并根据每个性别设置了不同的值。之后，我们将性别数据传递给数据对象，并设置饼图中每个性别的颜色。
<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 库中也提供了其他类型的图表。用户可以根据自己的需求使用任意图表。
