如何使用Bootstrap创建图表

在Bootstrap中，图表是一种用符号表示数据可视化的图形表示方式。使用Bootstrap可以创建各种类型的图表，如条形图、折线图、饼图、环形图等。换句话说，图表是一种图表或图形，用于组织和表示一组数值或定性数据。

方法1： 在此方法中，我们将使用Bootstrap和Javascript创建一个折线图。我们使用chart.js文件来创建图表。

示例： 在此示例中，我们将创建一个折线图。根据图表的类型创建数据。以下图表的类型为“线型”，包括两个不同的数据，分别表示工作时间和空闲时间。

HTML

<html>
<link rel=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
      type="text/css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
        type="text/javascript">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<style>
    .container {
        width: 70%;
        margin: 15px auto;
    }
 
    body {
        text-align: center;
        color: green;
    }
 
    h2 {
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 30px;
    }
</style>
 
<body>
    <div class="container">
        <h2>Line Chart</h2>
        <div>
            <canvas id="myChart"></canvas>
        </div>
    </div>
</body>
 
<script>
    let ctx = document.getElementById("myChart").getContext("2d");
    let myChart = new Chart(ctx, {
        type: "line",
        data: {
            labels: [
                "Monday",
                "Tuesday",
                "Wednesday",
                "Thursday",
                "Friday",
                "Saturday",
                "Sunday",
            ],
            datasets: [
                {
                    label: "work load",
                    data: [2, 9, 3, 17, 6, 3, 7],
                    backgroundColor: "rgba(153,205,1,0.6)",
                },
                {
                    label: "free hours",
                    data: [2, 2, 5, 5, 2, 1, 10],
                    backgroundColor: "rgba(155,153,10,0.6)",
                },
            ],
        },
    });
</script>
</html>

输出：

如何使用Bootstrap创建图表

方法2： 在这个方法中，我们将使用 Bootstrap 和JavaScript来创建一个甜甜圈图表，甜甜圈图表是饼图的改良版本，中心部分有一个切割出来的区域。

示例： 在这个示例中，我们使用了 chart.js 文件来创建一个甜甜圈图表。

HTML

<html>
<script src=
"https://d3js.org/d3.v4.min.js"></script>
<script src=
"https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet"
      href=
"https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
<link rel=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
      type="text/css" />
 
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
 
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js">
</script>
 
<style>
    body {
        text-align: center;
        color: green;
    }
 
    h2 {
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 40px;
    }
</style>
 
<body>
    <div class="col-xs-12 text-center">
        <h2>Donut Chart</h2>
    </div>
 
    <div id="donut-chart"></div>
 
    <script>
        let chart = bb.generate({
            data: {
                columns: [
                    ["Blue", 2],
                    ["orange", 4],
                    ["green", 3],
                ],
                type: "donut",
                onclick: function (d, i) {
                    console.log("onclick", d, i);
                },
                onover: function (d, i) {
                    console.log("onover", d, i);
                },
                onout: function (d, i) {
                    console.log("onout", d, i);
                },
            },
            donut: {
                title: "70",
            },
            bindto: "#donut-chart",
        });
    </script>
</body>
</html>

输出：

如何使用Bootstrap创建图表