现在位置: 首页 / JavaScript / 正文

轻松上手 Chart js：创建交互式图表（一）

Chart.js 是一款功能强大且易于使用的 JavaScript 图表库，它基于 HTML5 Canvas 技术，能够帮助你在网页上快速创建各种交互式图表。无论你是初学者还是经验丰富的开发者，Chart.js 都能为你提供丰富的图表类型和强大的自定义能力。本文将详细介绍如何安装和使用 Chart.js，帮助你快速上手。

Chart.js 特性

  • 开源且免费：Chart.js 是一个由社区维护的开源项目，免费提供给个人学习、个人网站和非商业用途使用。
  • 丰富的图表类型：支持包括折线图、柱状图、饼图、环形图等在内的 8 种图表类型，每种图表都具有动态效果和高度可定制性。
  • 高效的绘图性能：使用 HTML5 Canvas 技术，确保在所有现代浏览器（IE11+）上都能高效运行。
  • 响应式设计：图表会根据窗口尺寸自动调整大小，确保在不同设备上都能完美展示。

Chart.js 安装方法

1. 通过 NPM/Yarn 安装

如果你的项目使用构建工具（如 Webpack 或 Rollup），推荐使用 NPM 或 Yarn 安装 Chart.js。这种方式便于版本管理和依赖管理。

安装步骤

npm install chart.js

或者

yarn add chart.js

在项目中引入

安装完成后，你可以在 JavaScript 文件中这样引入 Chart.js：

// 引入整个 Chart.js 库
import Chart from 'chart.js/auto';

// 或者按需引入特定图表类型（减小打包体积）
import { Line } from 'chart.js';

版本管理

要安装特定版本的 Chart.js，可以指定版本号：

npm install chart.js@3.9.1

2. 通过 CDN 使用

如果你只是想快速原型开发或学习 Chart.js，使用 CDN 是最简单的方法。以下是几个推荐的 CDN 地址：

  • 字节跳动 CDN（国内推荐）：

    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.min.js"></script>

  • Staticfile CDN（国内备选）：

    <script src="https://cdn.staticfile.net/Chart.js/3.9.1/chart.min.js"></script>

  • cdnjs CDN（海外推荐）：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>

实例

以下是一个简单的 HTML 页面示例，展示了如何使用 CDN 创建一个柱状图：

<!DOCTYPE html>
<html>
<head>

<title>Chart.js CDN 示例</title>
  <!-- 引入 Chart.js -->
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;">
    <canvas id="myChart"></canvas>
  </div>
  <script>
    // 获取 canvas 元素
    const ctx = document.getElementById('myChart').getContext('2d');

    // 创建图表
    const myChart = new Chart(ctx, {
      type: 'bar', // 图表类型
      data: {
        labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
        datasets: [{
          label: '月度销售额',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: 'rgba(54, 162, 235, 0.5)'
        }]
      },
      options: {
        responsive: true, // 响应式设计
        scales: {
          y: {
            beginAtZero: true // y轴从0开始
          }
        }
      }
    });
  </script>
</body>
</html>

3. 从 GitHub 获取

如果你需要最新的特性或希望参与项目贡献，可以从 GitHub 获取 Chart.js 的源码。

获取方式

  • 克隆仓库（需要 Git）：

    git clone https://github.com/chartjs/Chart.js.git

  • 下载 ZIP 文件：

    1. 访问 Chart.js GitHub
    2. 点击 "Code" 按钮
    3. 选择 "Download ZIP"

构建项目

下载后，你可以构建自己的 Chart.js 版本：

cd Chart.js
npm install
npm run build

构建完成后，可以在 dist/ 目录找到生成的文件。

安装方式对比

方式优点缺点适用场景
NPM/Yarn版本管理方便，适合现代前端项目需要构建工具正式项目开发
CDN简单快捷，无需构建依赖网络，版本更新不及时快速原型、学习
GitHub获取最新代码，可自定义需要手动构建高级开发、贡献代码

初始化 Chart.js 图表

使用 Chart.js 创建图表的基本步骤如下：

  1. 准备 HTML Canvas 元素：

    <canvas id="myChart" width="400" height="400"></canvas>

  2. 获取 Canvas 节点：

    const ctx = document.getElementById('myChart').getContext('2d');

  3. 创建图表实例：

    const myChart = new Chart(ctx, {
  type: 'line', // 图表类型
  data: {
    labels: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份'],
    datasets: [{
      label: '我的第一个折线图',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

实例：创建一个简单的折线图

以下是一个完整的示例，展示了如何创建一个简单的折线图：

<!DOCTYPE html>
<html>
<head>

<title>Chart.js 折线图示例</title>
  <!-- 引入 Chart.js -->
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;">
    <canvas id="myChart"></canvas>
  </div>
  <script>
    // 获取 canvas 元素
    const ctx = document.getElementById('myChart').getContext('2d');

    // 创建图表
    const myChart = new Chart(ctx, {
      type: 'line', // 图表类型
      data: {
        labels: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份'],
        datasets: [{
          label: '我的第一个折线图',
          data: [65, 59, 80, 81, 56, 55, 40],
          fill: false,
          borderColor: 'rgb(75, 192, 192)',
          tension: 0.1
        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

实例：创建一个柱形图

以下是一个创建柱形图的示例：

<!DOCTYPE html>
<html>
<head>

<title>Chart.js 柱形图示例</title>
  <!-- 引入 Chart.js -->
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;">
    <canvas id="myChart"></canvas>
  </div>
  <script>
    // 获取 canvas 元素
    const ctx = document.getElementById('myChart').getContext('2d');

    // 创建图表
    const myChart = new Chart(ctx, {
      type: 'bar', // 图表类型
      data: {
        labels: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份'],
        datasets: [{
          label: '我的第一个柱形图',
          data: [65, 59, 80, 81, 56, 55, 40],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 205, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(201, 203, 207, 0.2)'
          ],
          borderColor: [
            'rgb(255, 99, 132)',
            'rgb(255, 159, 64)',
            'rgb(255, 205, 86)',
            'rgb(75, 192, 192)',
            'rgb(54, 162, 235)',
            'rgb(153, 102, 255)',
            'rgb(201, 203, 207)'
          ],
          borderWidth: 1

        }]
      },
      options: {
        responsive: true,
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

实例：创建一个气泡图

气泡图用于展示三个变量之间的关系。以下是一个创建气泡图的示例：

<!DOCTYPE html>
<html>
<head>

<title>Chart.js 气泡图示例</title>
  <!-- 引入 Chart.js -->
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;">
    <canvas id="myChart"></canvas>
  </div>
  <script>
    // 获取 canvas 元素
    const ctx = document.getElementById('myChart').getContext('2d');

    // 创建图表
    const myChart = new Chart(ctx, {
      type: 'bubble', // 图表类型
      data: {
        datasets: [{
          label: '气泡图实例',
          data: [
            { x: 20, y: 30, r: 15 },
            { x: 30, y: 20, r: 20 },
            { x: 40, y: 10, r: 10 }
          ],
          backgroundColor: 'rgb(255, 99, 132)'
        }]
      },
      options: {}
    });
  </script>
</body>
</html>

实例：创建一个环形图

环形图是饼图的一种变体，中间有一个“空洞”。以下是一个创建环形图的示例：

<!DOCTYPE html>
<html>
<head>

<title>Chart.js 环形图示例</title>
  <!-- 引入 Chart.js -->
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/Chart.js/3.7.1/chart.min.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;">
    <canvas id="myChart"></canvas>
  </div>
  <script>
    // 获取 canvas 元素
    const ctx = document.getElementById('myChart').getContext('2d');

    // 创建图表
    const myChart = new Chart(ctx, {
      type: 'doughnut', // 图表类型
      data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
          label: '环形图实例',
          data: [300, 50, 100],
          backgroundColor: [
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 205, 86)'
          ],
          hoverOffset: 4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  </script>
</body>
</html>

总结

通过本文，你应该已经掌握了如何安装和使用 Chart.js 创建各种类型的图表。无论是通过 NPM/Yarn、CDN 还是从 GitHub 获取，Chart.js 都提供了灵活多样的安装方式。希望这些示例能帮助你快速上手，创造出美观且交互性强的图表。如果你有任何疑问或需要进一步的帮助，欢迎访问 Chart.js 官方文档 和 GitHub 仓库。