如何使用引导程序创建图表？

bootstrap 中的图表是数据可视化的图形表示，其中数据由符号表示。各种类型的图表，如条形图、折线图、饼图、圆环图等，都是在 Bootstrap 的帮助下创建的。换句话说，我们可以说图表是一种图表或图形，它组织和表示一组数字或定性数据。

示例 1：我们正在使用 bootstrap 和 JavaScript 创建折线图。在此示例中，我们使用了 chart.js 文件来创建图表。数据是根据图表类型创建的。下图的“线”类型具有 2 个不同的数据，分别用于工作时间和空闲时间。

HTML

  
  
  
  
  
  
  
    .container {
      width: 70%;
      margin: 15px auto;
    }
    body {
      text-align: center;
      color: green;
    }
    h2 {
      text-align: center;
      font-family: "Verdana", sans-serif;
      font-size: 30px;
    }
  
  
    
      Line Chart
      
        
      
    
  
  
  
    var ctx = document.getElementById("myChart").getContext("2d");
    var 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)",
          },
        ],
      },
    });
  

输出：

带工作和空闲时间的折线图

示例 2：在以下示例中，我们使用 bootstrap 和 JavaScript 创建了一个圆环图。在这个例子中，我们也使用了 chart.js 文件来创建一个圆环图。圆环图是饼图的修改版本，中心区域被切除。

HTML

  
  
  
  
  
  
  
  
  
  
  
  
  
  
    body {
      text-align: center;
      color: green;
    }
    h2 {
      text-align: center;
      font-family: "Verdana", sans-serif;
      font-size: 40px;
    }
  
  
    
      Donut Chart
    
  
    
  
    
      var 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",
      });
    
  

输出：

甜甜圈图