如何使用 Chart.js 构建简单的图表

在数据驱动决策的时代,以人们可以理解的方式可视化数据非常重要。 图表和图形帮助我们轻松理解复杂的数据、趋势和模式。

让我们探索如何使用 Chart.js(一个流行的数据可视化 JavaScript 库)创建简单的图表。

什么是 Chart.js?

Chart.js 是一款免费工具,可帮助开发人员为网络应用程序制作交互式图表。 HTML5 canvas 元素呈现图表,允许它们在现代浏览器上工作。

Chart.js 的特点

其特点包括:

  • Chart.js 因其用户友好的方法而脱颖而出。 使用最少的代码,开发人员可以制作交互式且具有视觉吸引力的图表。
  • 该库用途广泛,支持不同的图表类型,如折线图、条形图、饼图和雷达图。 可以满足多样化的数据表示需求。
  • Chart.js 设计的图表可以在桌面和移动设备上正常运行。 他们反应灵敏,适应能力强。
  • 您可以使用许多选项而不是默认设置来更改 Chart.js 图表。 开发人员可以微调图表以满足特定要求。

设置环境

您可以通过以下两种方式之一设置库:

基本 HTML 结构

要嵌入图表,您需要在 HTML 中添加一个 canvas 元素。 这是一个基本结构:

 <!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Document</title>
   <link rel="stylesheet" href="https://wilku.top/how-to-build-a-simple-chart-with-chart-js/./style.css" />
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>

 <body>
   <h1>Welcome to My Data Representation</h1>
   <canvas id="myChart" width="400" height="150"></canvas>
  <script></script>
 </body>
</html>

要设置页面样式,请创建一个文件 style.css,并向其中添加以下 CSS:

 @import url("https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Tilt Neon", sans-serif;
  padding: 2rem 4rem;
}

h1 {
  font-size: 3rem;
  color: #333;
  text-align: center;
  padding: 3rem;
}

制作您的第一个图表:条形图示例

在此示例中,我们将使用条形图,非常适合按类别比较各个数据点。

  如何轻松更新您的 Chromebook
  • 在 HTML 底部的脚本标记中,首先使用其 id 属性选择 canvas 元素:
     let canvas = document.getElementById('myChart'); 
  • 接下来,获取如何渲染图表的上下文。 在本例中,它是 2D 绘图上下文。
     let ctx = canvas.getContext('2d'); 
  • 接下来,使用 Chart() 函数在画布上初始化一个新图表。 该函数将画布上下文作为第一个参数,然后是一个包含要在图表中显示的数据的选项对象。
     let options = {};
    let myChart = new Chart(canvas, options);
  • 接下来,填充选项对象以指定图表类型、数据以及图表中所需的标签。
     let options = {
      type: "bar",

      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

        datasets: [{
          label: "Total number of votes on favourite color",
          data: [12, 19, 3, 5, 2, 3],
        }],
      },
    };

  • 目前,您的图表如下所示:

    设计和定制图表

    Chart.js 提供了多种自定义图表的选项,例如:

    • 颜色:使用 Chart.js 自定义图表颜色,从条形背景到线条边框。
    • 图例:为了清晰起见,将图例放置在顶部、底部、左侧或右侧。
    • 工具提示:使用工具提示可详细了解悬停时显示的数据点。
    • 动画:设置动态显示图表动画的样式和节奏。

    作为一个简单的示例,您可以通过更改选项对象来为数据集设置一些基本样式,如下所示:

     let options = {
      type: "bar",

      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

        datasets: [{
          label: "Total number of votes on favourite color",
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: "rgba(75, 192, 192, 0.2)",
          borderColor: "rgba(75, 192, 192, 1)",
          borderWidth: 1,
        }],
      },
    };

    您的图表现在应如下所示:

      如何删除缩放个人资料图片

    最佳实践和性能技巧

    为了确保渲染图表时的最佳性能:

    • 限制 Chart.js 中使用的数据点,以实现更快的渲染和更好的用户体验。
    • 如果您经常更新图表,请在渲染新图表之前使用 destroy() 方法删除旧图表。

    避免常见陷阱的技巧

    以下是一些需要避免的陷阱:

    • 确保您的数据始终采用相同的格式,以防止出现任何意外。
    • 为了提高性能,最好限制动画。 尽管它们有助于增强用户体验,但使用太多可能会导致问题。

    Chart.js:增强 Web 数据可视化能力

    当您想要以有吸引力的方式显示交互式数据时,Chart.js 是一个有用的工具。 您可以轻松创建精美的数据可视化,提供见解并为决策提供信息。

    Chart.js 为可视化数据提供了强大的解决方案,无论您是开发经验丰富的还是新手。