极客教程bootstrap 如何创建一个图表
图表对于数据的可视化非常重要，我们可以用各种格式显示数据，并分析数据中的模式。另外，图表对于数据科学家来说更重要，因为他们需要对各种数据进行分析。
Bootstrap是一个库，它允许我们使用JavaScript或JQuery来绘制各种图表。它包含了我们需要导入的函数，并将图表类型和图表数据作为函数的参数进行传递，它将为我们准备一个图表。
本教程将教我们如何使用Bootstrap绘制各种图表模式。
语法
用户可以按照下面的语法来使用Bootstrap创建一个图表。
new Chart("Canvas_id", {
Type: "Chart_Type",
Data: { various data },
Options: { Various options }
});
在上面的语法中，我们使用了带有new关键字的Chart()构造函数来创建一个图表对象。
参数
- Canvas_id – 它是我们要显示图表的画布的id。另外，我们可以在一个变量中访问HTML元素，并使用该变量作为第一个参数，而不是canvas id。
-
Type- bootstrap包含各种类型的图表。例如，线形图、雷达图、条形图、水平条形图、饼图、极地面积图、甜甜圈图、散点图和气泡图。我们可以指定任何人来绘制它。
-
Data- 它是以对象格式绘制图表的数据。
-
Options- 我们需要在对象格式中传递各种选项来布置我们的图表。例如，标签、borderColor、backgroundColor、borderWidth，等等。
示例1
在下面的例子中，我们用Bootstrap创建了一个散点图。我们使用一些x和y值创建了chartData。
之后，我们在创建图表时将 “scatter “作为一种类型，并将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创建一个线形图。然而，我们将在一个画布中创建多条线，并将 “线 “作为一个画布。我们已经创建了各条线的数据，并将它们存储在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库中也有其他类型的图表。用户可以根据自己的要求使用任何图表。