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>