Chart.js 快速上手教程10 分钟安装并画出你的第一张 Canvas 图表【免费下载链接】Chart.jsSimple HTML5 Charts using thetag项目地址: https://gitcode.com/gh_mirrors/ch/Chart.jsChart.js 是一款轻量、零依赖的 HTML5 图表库它使用canvas标签在前端页面中绘制柱状图、折线图、饼图等 8 种常用图表。本教程带你快速完成 Chart.js 安装只需 10 分钟你就能在自己的网页上画出第一张带图例、网格、悬浮提示的 Canvas 图表——不需要任何图表引擎经验也不需要后端支持。为什么选择 Chart.js在动手之前先看看 Chart.js 的卖点帮你判断它是否适合你的项目特性说明 轻量零依赖核心包仅依赖 Canvas API不捆绑任何其他库 8 种图表类型柱状图、折线图、散点图、气泡图、饼图、环形图、雷达图、极坐标图 高度可定制颜色、动画、图例、坐标轴刻度全部可通过options配置 支持 Tree-shaking按需注册组件生产环境可显著减小打包体积✨ 开箱即用默认自带响应式布局、入场动画和悬浮 TooltipChart.js 的核心入口定义在 src/index.ts所有图表类型分别由独立的控制器实现例如柱状图控制器 src/controllers/controller.bar.js。Chart.js 安装3 种方式任选其一Chart.js 支持三种常见的引入方式按需选择即可详细步骤见官方文档 docs/getting-started/installation.md。方式一npm 安装推荐用于构建工具项目如果你使用 Webpack、Rollup、Vite、Parcel 等打包工具直接运行npm install chart.js之后在代码中以 ES Module 方式引入import Chart from chart.js/auto; // 自动注册全部组件开发最省事方式二Script 标签直接引入零构建最快上手如果只是想快速搭一个演示页面可以下载 Chart.js 构建产物用script标签引用本地文件script srcpath/to/chartjs/dist/chart.umd.min.js/scriptUMD 构建会暴露全局Chart对象无需任何打包配置打开页面就能用。方式三克隆源码仓库适合深度定制如果你希望阅读源码、修改行为或参与开发可以克隆仓库仓库为只读镜像请勿直接提交修改git clone https://gitcode.com/gh_mirrors/ch/Chart.js⚠️ 提示源码仓库不包含预构建的dist文件生产环境更建议使用 npm 或 UMD 构建产物。画出你的第一张 Canvas 图表完整最小示例安装完成后在 HTML 页面中加入一个canvas元素和一段初始化代码。以下是官方文档 docs/getting-started/index.md 中的经典最小示例——一个柱状图只需要不到 30 行代码div canvas idmyChart/canvas /div script const ctx document.getElementById(myChart); new Chart(ctx, { type: bar, // 图表类型bar 柱状图 data: { labels: [Red, Blue, Yellow, Green, Purple, Orange], datasets: [{ label: # of Votes, data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } // Y 轴从 0 开始 } } }); /script运行后你会得到一张完整的 Chart.js Canvas 柱状图包含图例、网格线和坐标轴刻度 小技巧建议像上面那样把canvas包在一个容器div中。Chart.js 默认是响应式的图表会自动填满外层容器容器尺寸即图表尺寸。读懂这段代码的 4 个核心概念概念代码位置作用画布canvas#myChartChart.js 的绘制载体所有图表都渲染在 canvas 上typebar指定图表类型可换成line、doughnut、radar等datalabelsdatasetslabels是 X 轴标签datasets是一个数组每个数据集包含label和data数据点optionsscales.y.beginAtZero配置项入口控制坐标轴、插件、动画等一切外观进阶从能画到好看的 3 个技巧跑通第一个图只是开始下面 3 个技巧能让你快速做出产品级图表。完整分步实践可参考官方指南 docs/getting-started/usage.md。1. 利用默认能力图例、网格与动画免费送你如上示例所示Chart.js 的柱状图默认就带上了图例、网格线和入场动画鼠标悬停还会出现 Tooltip 提示。带图例、网格和完整坐标轴的完整效果如下注意点击图例可以切换数据集的显示/隐藏多数据集场景下非常实用。2. 用 options 做精细定制所有定制都通过options完成。例如关闭动画、隐藏图例options: { animation: false, // 关闭入场动画 plugins: { legend: { display: false }, // 隐藏图例 tooltip: { enabled: false } // 关闭悬浮提示 } }接入真实数据后柱状图可以轻松承载上万个数据点而不卡顿3. 多数据集与多图表类型自由组合Chart.js 支持在同一张图中绘制多个数据集每个数据集可独立设置标签、颜色与样式。下图是官方示例中把数据拆分为 3 个数据集后的气泡图不同类别一目了然除柱状图外气泡图、折线图、饼图等类型只需修改type字段即可切换。配合坐标轴刻度格式化如把数值显示为米效果如下各类型图表的完整配置项可在官方文档中查阅柱状图 docs/charts/bar.md、折线图 docs/charts/line.md、环形图 docs/charts/doughnut.md。生产环境建议按需注册组件减小打包体积开发阶段用chart.js/auto图省事但生产环境建议按需引入让打包工具做 Tree-shaking 优化。以柱状图为例只需注册控制器、柱形元素和两个坐标轴import { Chart, BarController, BarElement, CategoryScale, LinearScale } from chart.js; Chart.register(BarController, BarElement, CategoryScale, LinearScale);这样可以从 bundle 中移除未使用的图表类型代码。每种图表的最小注册清单详见 docs/getting-started/integration.md。下一步继续深挖 Chart.js 的能力恭喜你已经掌握了 Chart.js Canvas 图表的核心工作流接下来推荐按以下路径继续学习分步实战指南docs/getting-started/usage.md —— 从零构建应用、接入真实 API 数据、自定义插件️配置大全docs/configuration/ —— 动画、图例、Tooltip、标题、响应式等坐标轴专题docs/axes/ —— 类目轴、线性轴、对数轴、时间轴插件开发docs/developers/plugins.md —— 编写自定义插件扩展绘制逻辑示例合集docs/samples/information.md —— 官方示例照着抄就有Chart.js 用最小的学习成本换来了一个功能完整、可深度定制的 HTML5 图表方案。打开编辑器画出你的第一张 Canvas 图表吧【免费下载链接】Chart.jsSimple HTML5 Charts using thetag项目地址: https://gitcode.com/gh_mirrors/ch/Chart.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考