Chart.js 数据可视化入门指南：从零构建交互式图表-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00811/article/details/148324142

Chart.js 数据可视化入门指南：从零构建交互式图表

Chart.js Simple HTML5 Charts using the `canvas` tag 项目地址: https://gitcode.com/gh_mirrors/ch/Chart.js

前言

Chart.js 是一个功能强大且易于使用的 JavaScript 图表库，能够帮助开发者快速构建美观的数据可视化界面。本文将带领您从零开始，通过实际案例掌握 Chart.js 的核心概念和使用技巧。

环境准备

首先需要创建一个基础的前端项目环境：

创建项目目录并初始化 package.json 文件
安装必要的依赖：
- Chart.js 最新版本
- Parcel 作为零配置的打包工具

{
  "name": "chartjs-demo",
  "version": "1.0.0",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "devDependencies": {
    "parcel": "^2.6.2"
  },
  "dependencies": {
    "chart.js": "^4.0.0"
  }
}

基础图表实现

HTML 结构

Chart.js 只需要最基本的 HTML 结构：

<!doctype html>
<html>
  <body>
    <div style="width: 800px;">
      <canvas id="myChart"></canvas>
    </div>
    <script type="module" src="chart.js"></script>
  </body>
</html>

关键点：

使用 <canvas> 元素作为图表容器
通过 CSS 控制图表宽度
Chart.js 会自动处理响应式布局

基础柱状图实现

创建 chart.js 文件，实现第一个柱状图：

import Chart from 'chart.js/auto';

(async function() {
  // 示例数据
  const data = [
    { year: 2010, count: 10 },
    { year: 2011, count: 20 },
    // 更多数据...
  ];

  new Chart(
    document.getElementById('myChart'),
    {
      type: 'bar',  // 指定图表类型为柱状图
      data: {
        labels: data.map(row => row.year),  // X轴标签
        datasets: [{
          label: '年度数据',  // 数据集标签
          data: data.map(row => row.count)  // Y轴数据
        }]
      }
    }
  );
})();

这段代码展示了 Chart.js 的核心概念：

通过 type 指定图表类型
data.labels 定义 X 轴标签
datasets 数组包含一个或多个数据集
每个数据集有自己的标签和数据

图表定制化

基础样式调整

我们可以通过 options 配置项来自定义图表行为：

new Chart(
  document.getElementById('myChart'),
  {
    type: 'bar',
    options: {
      animation: false,  // 禁用动画
      plugins: {
        legend: {
          display: false  // 隐藏图例
        },
        tooltip: {
          enabled: false  // 禁用提示框
        }
      }
    },
    data: { /* 数据配置 */ }
  }
);

使用真实数据

实际项目中，我们通常会从 API 获取数据：

import { fetchChartData } from './api';

const data = await fetchChartData();

// 使用真实数据渲染图表

进阶图表类型

气泡图实现

Chart.js 支持多种图表类型，下面实现一个气泡图：

new Chart(
  document.getElementById('bubbleChart'),
  {
    type: 'bubble',
    data: {
      datasets: [{
        label: '气泡数据集',
        data: data.map(item => ({
          x: item.width,  // X坐标
          y: item.height, // Y坐标
          r: item.count   // 半径大小
        }))
      }]
    }
  }
);

气泡图定制

我们可以对气泡图进行多种定制：

{
  type: 'bubble',
  options: {
    aspectRatio: 1,  // 保持1:1宽高比
    scales: {
      x: {
        max: 500,
        ticks: {
          callback: value => `${value / 100} m`  // 自定义刻度标签
        }
      },
      y: {
        max: 500,
        ticks: {
          callback: value => `${value / 100} m`
        }
      }
    }
  }
}

多数据集应用

Chart.js 支持在同一个图表中展示多个数据集：

datasets: [
  {
    label: '正方形作品',
    data: data.filter(item => item.width === item.height)
             .map(/* 转换数据 */)
  },
  {
    label: '宽度>高度',
    data: data.filter(item => item.width > item.height)
             .map(/* 转换数据 */)
  }
  // 更多数据集...
]

每个数据集可以有自己的样式和配置，用户可以通过图例交互式地显示/隐藏各个数据集。

插件系统

Chart.js 的插件系统允许深度定制图表行为。下面是一个添加图表区域边框的插件示例：

const chartAreaBorder = {
  id: 'chartAreaBorder',
  beforeDraw(chart) {
    const { ctx, chartArea } = chart;
    ctx.save();
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;
    ctx.setLineDash([5, 5]);
    ctx.strokeRect(chartArea.left, chartArea.top, 
                  chartArea.width, chartArea.height);
    ctx.restore();
  }
};

new Chart(/* ... */, {
  plugins: [chartAreaBorder]
});