数据结构
网络
关系型数据库管理系统 (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+ 次浏览
