Chart.js - 基础知识

要了解 Chart.js 的基础知识，让我们逐步了解如何使用 Chart.js 库创建简单的条形图 -

步骤 1 - 首先我们需要使用 canvas 对象创建一个画布 id。在这里我们可以添加各种样式和 HTML 元素。我们还需要提供图形或图表的高度和宽度。让我们看看如何创建它 -

<canvas id="chartId" aria-label = "chart" height="500" width = "500"></canvas>

步骤 2 - 现在，我们需要访问画布 Id和 Chart.js 对象，如下所示 -

var chrt = document.getElementById("chartId").getContext("2d");

步骤 3 - 接下来使用 Chart.js Type对象指定您需要的图表或图形类型。有多种类型的图表可供选择。

type: 'bar',

步骤 4 - 如果您想为图形或图表的元素添加标签，您可以使用 Chart.js“标签”对象，如下所示 -

labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],

同样，您还可以使用标签对象提供图形或图表的标签，如下所示 -

label: "Online Tutorial Subjects"

步骤 5 - 对于图表，给出图表或图表的元素值。它可以在数据对象的帮助下完成，如下所示 -

data: [20, 40, 30, 10, 40, 20]

步骤 6 - 您还可以通过使用选项对象来应用一些高级功能，例如动画、响应式等 -

options: {
   responsive: false,
},

例子

在此示例中，我们将创建一个条形图，显示在线教程的各种主题。

<!DOCTYPE>
<html>
<head>
   <meta charset- "UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>chart.js</title>
</head>
<body>
   <canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
   <script>
      var chrt = document.getElementById("chartId").getContext("2d");
      var chartId = new Chart(chrt, {
         type: 'bar',
         data: {
            labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
            datasets: [{
               label: "Online Tutorial Subjects",
               data: [20, 40, 30, 35, 30, 20],
            }],
         },
         options: {
            responsive: false,
         },
      });
   </script>
</body>
</html>

输出

图表基础