Chart.js 数据可视化入门实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01163/article/details/148323836

Chart.js 数据可视化入门实战指南

Chart.js 项目地址: https://gitcode.com/gh_mirrors/cha/Chart.js

Chart.js 是一款功能强大且易于使用的 JavaScript 图表库，本文将带您从零开始构建一个完整的数据可视化应用，涵盖核心概念和实用技巧。

环境准备与项目初始化

首先创建一个新项目并安装必要的依赖：

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

安装完成后，创建基础 HTML 结构：

<!doctype html>
<html lang="en">
  <head>
    <title>Chart.js 示例</title>
  </head>
  <body>
    <div style="width: 800px;">
      <canvas id="acquisitions"></canvas>
    </div>
    <script type="module" src="acquisitions.js"></script>
  </body>
</html>

创建第一个柱状图

在 acquisitions.js 中编写第一个图表：

import Chart from 'chart.js/auto'

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

  new Chart(
    document.getElementById('acquisitions'),
    {
      type: 'bar',
      data: {
        labels: data.map(row => row.year),
        datasets: [{
          label: '年度采购量',
          data: data.map(row => row.count)
        }]
      }
    }
  );
})();

这段代码展示了 Chart.js 的核心使用模式：

从 chart.js/auto 导入 Chart 类（自动加载所有组件）
创建 Chart 实例，绑定到 canvas 元素
指定图表类型为柱状图
提供包含标签和数据集的数据对象

图表定制化技巧

基础样式调整

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

响应式设计要点

Chart.js 图表默认是响应式的，会填充其容器。通过设置容器 div 的宽度来控制图表大小：

<div style="width: 80%; max-width: 800px;">
  <canvas id="chart"></canvas>
</div>

使用真实数据源

替换静态数据为 API 获取的真实数据：

import { getAquisitionsByYear } from './api'

const data = await getAquisitionsByYear();

创建气泡图实战

气泡图可以展示三维数据（x, y, 半径）：

new Chart(
  document.getElementById('dimensions'),
  {
    type: 'bubble',
    data: {
      datasets: [{
        label: '艺术品尺寸',
        data: data.map(row => ({
          x: row.width,
          y: row.height,
          r: row.count
        }))
      }]
    }
  }
);

气泡图高级配置

保持正方形比例：

options: {
  aspectRatio: 1
}

坐标轴定制：

scales: {
  x: { max: 500 },
  y: { max: 500 }
}

刻度标签格式化：

ticks: {
  callback: value => `${value / 100} m`
}

多数据集应用

将数据分类显示：

datasets: [
  {
    label: '正方形作品',
    data: data.filter(row => row.width === row.height)
    // 其他配置...
  },
  {
    label: '横向作品',
    data: data.filter(row => row.width > row.height)
    // 其他配置...
  }
  // 更多数据集...
]

插件开发实践

创建自定义插件为图表区域添加边框：

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(ctx, {
  plugins: [chartAreaBorder]
  // 其他配置...
});