如何使用 Bootstrap 创建图表？

Bootstrap 是 Web 开发中最著名的 CSS 框架之一。 它用于设计和创建具有出色设计和完全响应能力的网站。 它用于前端开发，这使得创建网页变得非常容易，而无需太多的 HTML 和 CSS。 它几乎与所有浏览器兼容。

Bootstrap 中的图表是什么？

图表是数据集的图形表示，其中数据由各种符号表示。 可以有多种类型的图表，例如饼图、折线图、甜甜圈图或条形图等。

我们将看到一些使用 Bootstrap 的图表示例

示例 1

输出

说明

在上面的 HTML 代码中，我们插入了 CDN 链接，这对于直接在我们的代码中使用 Bootstrap 类是必要的。 然后，我们使用了 canvas 标签，在其中绘制了折线图。 在 script 标签中，我们创建了 canvas 标签的二维上下文，并使用 Chart 类为 canvas 上下文制作图表。 在 type 中，我们提到了 'line' 来创建折线图，然后我们使用一个数组为水平轴定义了一些标签。 此外，我们分别为水平轴和垂直轴定义了数据集。 我们还为水平轴和垂直轴创建了标题。 我们在 style 标签中用必要的颜色和边距设置了组件的样式。

示例 2

输出

说明

在上面的 HTML 代码中，我们插入了 CDN 链接，这对于直接在我们的代码中使用 Bootstrap 类是必要的。 然后，我们创建了一个 div 标签，并为其指定了一个 id 以便轻松定位它。 然后，我们使用 generate() 函数在带有数据集的 div 标签上创建甜甜圈图。 在 generate() 函数中，我们创建了一个 2D 数组，使用整数定义了列名及其在甜甜圈图中的比例。 可以使用平均理论计算每列的百分比。

因此，在上面的代码中，我们有六列，它们的值之和是 20。

因此，蓝色部分的百分比将为 2/20 = 0.1 或 10%。

橙色部分的百分比将是：4/20 = 0.2 或 20%

绿色部分的百分比将是：3/20 = 0.15 或 15%

红色部分的百分比将是：5/20 = 0.25 或 25%

灰色部分的百分比将是：3/20 = 0.15 或 15%

黄色部分的百分比将是：3/20 = 0.15 或 15%

我们为甜甜圈图定义了 onclick() 函数、onover() 和 onout() 函数。 对于每个函数，我们使用 console.log() 函数打印了一些语句。