1. type 图表类型
写在 config.type，决定图表整体形态。
| 取值 | 含义 | 典型用途 |
'bar' | 柱形图 | 分类对比（销量、人数、得分） |
'line' | 折线图 | 趋势变化（时间序列） |
'pie' | 饼图 | 占比 / 构成关系 |
'doughnut' | 环形图 | 占比，且中心可放说明文字 |
'radar' | 雷达图 | 多维度对比 |
'polarArea' | 极地区域图 | 分类强弱 + 占比感 |
'scatter' | 散点图 | 两变量关系（x, y） |
'bubble' | 气泡图 | 三变量关系（x, y, r） |
2. data 数据结构
| 参数 | 类型 | 说明 | 取值示例 |
labels |
string[] |
横轴 / 分类标签数组（pie/doughnut 中是每个扇区的名字） |
['1月','2月','3月'] |
datasets |
object[] |
必须是数组，每个元素代表一组数据。多 dataset 可以做分组对比 / 堆叠 / 组合图 |
[{ label, data, ... }] |
注意：scatter / bubble 不需要 labels，因为每个数据点自带坐标。
3. datasets 通用参数
所有图表类型都通用的 dataset 字段。
| 参数 | 类型 | 说明 | 默认值 / 取值范围 |
label | string |
这组数据的名字，显示在图例和 tooltip 中 |
无默认，建议必填 |
data | number[] 或 object[] |
数值数组（柱/线/饼）或对象数组（散点/气泡） |
必填 |
backgroundColor | string 或 string[] |
填充色。单值 → 全部同色；数组 → 每项一色 |
颜色字符串，如 'rgba(79,124,255,0.55)' |
borderColor | string 或 string[] |
边框 / 折线颜色 |
颜色字符串 |
borderWidth | number |
边框 / 折线粗细（像素） |
柱图默认 0；折线默认 3 |
hidden | boolean |
是否在图中隐藏这组数据 |
默认 false |
order | number |
多 dataset 的绘制顺序，数字越小越先画（被覆盖） |
默认 0 |
stack | string |
堆叠分组名，相同 stack 名的 dataset 会堆在一起 |
无 |
4. 柱形图（bar）专属参数
| 参数 | 类型 | 说明 | 取值范围 |
borderRadius | number 或 object |
柱子圆角；对象形式可分别设置 4 个角 |
数字 ≥ 0；推荐 8~12 |
borderSkipped | string 或 false |
哪一侧不绘制边框；设为 false 时四角都画（配合圆角能让顶/底都圆） |
'start'(默认) / 'end' / 'top' / 'bottom' / 'left' / 'right' / false |
barPercentage | number |
柱子占用类别宽度的比例 |
0~1，默认 0.9 |
categoryPercentage | number |
类别本身占用刻度宽度的比例 |
0~1，默认 0.8 |
barThickness | number 或 'flex' |
固定柱宽（像素）；'flex' 时自动均匀分布 |
正整数 / 'flex' |
maxBarThickness | number |
柱子最大像素宽度，避免在宽屏上过粗 |
正整数 |
indexAxis (写在 options) | string |
切换垂直 / 水平柱形图 |
'x'(默认) / 'y' |
5. 折线图（line）专属参数
| 参数 | 类型 | 说明 | 取值范围 |
tension | number |
曲线张力，越大越平滑 |
0~1，默认 0；推荐 0.3~0.4 |
fill | boolean / string / number |
是否填充线下方区域 |
true / false / 'origin' / 'start' / 'end' / 数据集索引 |
stepped | boolean / string |
阶梯折线 |
false(默认) / true / 'before' / 'after' / 'middle' |
spanGaps | boolean / number |
是否跨过 null/NaN 数据点画线；数字时表示最大跨距（毫秒） |
默认 false |
cubicInterpolationMode | string |
曲线插值模式 |
'default' / 'monotone' |
pointRadius | number |
数据点半径（像素），0 = 隐藏 |
≥ 0，默认 3 |
pointHoverRadius | number |
悬停时数据点半径 |
≥ 0，默认 4 |
pointStyle | string 或 Image |
数据点形状 |
'circle'(默认) / 'cross' / 'crossRot' / 'dash' / 'line' / 'rect' / 'rectRounded' / 'rectRot' / 'star' / 'triangle' / 自定义图片 |
pointBackgroundColor | string 或 string[] |
数据点填充色 |
颜色字符串 |
pointBorderColor | string 或 string[] |
数据点边框色 |
颜色字符串 |
showLine | boolean |
是否显示连线（false 即只显示点） |
默认 true |
borderDash | number[] |
虚线样式 [实线长, 间隔长] |
例：[6, 4] |
6. 饼图 / 环形图（pie / doughnut）参数
| 参数 | 类型 | 说明 | 取值范围 |
cutout (options) | string 或 number |
环形图中心空洞大小 |
百分比 '0%'~'99%' 或像素数；pie 默认 0，doughnut 默认 50% |
radius (options) | string 或 number |
整个饼图的外半径 |
百分比或像素，默认 '100%' |
rotation (options) | number |
起始角度（度） |
默认 0（12 点方向） |
circumference (options) | number |
总弧度（度），可用来做半圆图 |
默认 360；半圆写 180 |
borderColor | string |
扇区之间的分隔线颜色，常用白色 |
颜色字符串 |
borderWidth | number |
分隔线粗细 |
≥ 0 |
offset | number 或 number[] |
扇区向外突出的像素距离 |
默认 0 |
spacing | number |
扇区之间的额外间距 |
默认 0 |
7. 雷达图（radar）参数
雷达图只有一条径向轴 scales.r，与 x/y 轴写法不同。
| 参数 | 类型 | 说明 | 取值范围 |
scales.r.min | number | 径向轴最小值 | 建议 0 |
scales.r.max | number | 径向轴最大值（满分） | 例：100、10 |
scales.r.beginAtZero | boolean | 是否从 0 开始 | 默认 false，建议 true |
scales.r.ticks.stepSize | number | 刻度间隔 | 正数 |
scales.r.angleLines | object | 从中心射出的辐射线 | 例：{ color: '#eee' } |
scales.r.pointLabels | object | 每个轴顶端的维度文字 | 例：{ font: { size: 14 } } |
pointBackgroundColor | string | 顶点颜色 | 颜色字符串 |
8. 散点图 / 气泡图参数
| 参数 | 类型 | 说明 |
data 元素 | { x, y } 或 { x, y, r } |
scatter 用 x/y；bubble 多一个 r（气泡半径，单位像素，不会随坐标缩放） |
scales.x.title.text | string |
横轴含义说明（强烈建议写） |
scales.y.title.text | string |
纵轴含义说明 |
scales.x.type | string |
轴类型：'linear'(默认) / 'logarithmic' / 'time' / 'category' |
9. options 顶层参数
| 参数 | 类型 | 说明 | 取值 / 默认 |
responsive | boolean |
是否随容器尺寸变化自动重绘 |
默认 true |
maintainAspectRatio | boolean |
是否保持默认 2:1 宽高比；设 false 后充满容器高度 |
默认 true |
aspectRatio | number |
当 maintainAspectRatio 为 true 时的宽高比 |
默认 2 |
resizeDelay | number |
窗口变化后多少毫秒才重绘（防抖） |
默认 0 |
devicePixelRatio | number |
渲染分辨率倍数，默认跟随屏幕 |
≥ 1 |
indexAxis | string |
分类轴方向（柱形图水平 / 垂直） |
'x'(默认) / 'y' |
locale | string |
数字格式化所用区域 |
例：'zh-CN' |
layout.padding | number 或 object |
图表外边距 |
例：{ top: 8, right: 12 } |
10. scales 坐标轴
写在 options.scales.x / .y（雷达图为 .r）。每个轴都支持下面这些字段。
| 参数 | 类型 | 说明 | 取值 / 默认 |
type | string |
轴类型 |
'linear' / 'logarithmic' / 'category' / 'time' / 'timeseries' / 'radialLinear' |
display | boolean / 'auto' |
是否显示该轴 |
默认 true |
position | string |
轴位置 |
'left' / 'right' / 'top' / 'bottom' / 'center' |
min / max | number |
手动指定数值范围 |
不写则自动 |
suggestedMin / suggestedMax | number |
建议的范围（数据超出仍会扩展） |
— |
beginAtZero | boolean |
是否从 0 起 |
默认 false |
reverse | boolean |
是否反向 |
默认 false |
stacked | boolean |
多 dataset 是否堆叠 |
默认 false |
ticks.stepSize | number |
刻度间隔 |
默认自动 |
ticks.maxTicksLimit | number |
刻度数量上限 |
默认 11 |
ticks.callback | function |
自定义刻度文本，例：v => v + ' 元' |
— |
ticks.color / ticks.font | string / object |
刻度颜色和字体 |
例：{ size: 12, weight: '600' } |
title.display | boolean | 是否显示轴标题 | 默认 false |
title.text | string | 轴标题文本 | — |
grid.display | boolean | 是否绘制网格线 | 默认 true |
grid.color | string / function | 网格线颜色 | 颜色字符串 |
grid.lineWidth | number | 网格线粗细 | 默认 1 |
grid.drawOnChartArea | boolean |
是否在图表内部绘制网格线（双 y 轴时副轴常设 false） |
默认 true |
grid.drawTicks | boolean | 是否在轴上绘制小短线 | 默认 true |
11. plugins.title 标题
| 参数 | 类型 | 说明 | 取值 / 默认 |
display | boolean | 是否显示标题 | 默认 false |
text | string 或 string[] | 标题文本，数组实现多行 | — |
position | string | 标题位置 | 'top'(默认) / 'bottom' / 'left' / 'right' |
align | string | 对齐方式 | 'start' / 'center'(默认) / 'end' |
color | string | 文字颜色 | 颜色字符串 |
font | object | 字体配置 | 例：{ size: 18, weight: 'bold' } |
padding | number 或 object | 标题与图之间的间距 | 默认 10 |
fullSize | boolean | 是否占满整行 | 默认 true |
12. plugins.legend 图例
| 参数 | 类型 | 说明 | 取值 / 默认 |
display | boolean | 是否显示图例 | 默认 true |
position | string | 图例位置 | 'top'(默认) / 'bottom' / 'left' / 'right' / 'chartArea' |
align | string | 对齐方式 | 'start' / 'center'(默认) / 'end' |
reverse | boolean | 是否反序 | 默认 false |
maxHeight / maxWidth | number | 最大宽高（像素） | — |
fullSize | boolean | 是否占满整行 | 默认 true |
labels.color | string | 图例文字颜色 | 颜色字符串 |
labels.font | object | 图例字体 | 例：{ size: 13 } |
labels.boxWidth | number | 颜色块宽度 | 默认 40 |
labels.boxHeight | number | 颜色块高度 | 默认与字体相近 |
labels.padding | number | 每项的间距 | 默认 10 |
labels.usePointStyle | boolean | 是否用点样式代替方块 | 默认 false |
onClick | function | 自定义点击图例的行为 | — |
14. 动画与交互
| 参数 | 类型 | 说明 | 取值 / 默认 |
animation.duration | number | 动画时长（毫秒） | 默认 1000；设 0 关闭 |
animation.easing | string |
缓动函数 |
'linear' / 'easeInQuad' / 'easeOutQuad' / 'easeInOutQuad' 等（共 30+ 种） |
animation.delay | number | 延迟开始（毫秒） | 默认 0 |
animation.loop | boolean | 是否循环 | 默认 false |
animations.属性名 | object |
针对单个动画属性（如 colors、numbers）单独配置 |
例：{ colors: { duration: 0 } } |
interaction.mode | string |
悬停命中模式（同 tooltip.mode） |
默认 'nearest' |
interaction.intersect | boolean | 是否必须命中元素 | 默认 true |
interaction.axis | string |
命中按哪个轴判断 |
'x' / 'y' / 'xy' / 'r' |
onClick | function |
点击图表的回调 (event, elements, chart) => void |
— |
onHover | function | 悬停回调，同样签名 | — |
15. Chart 实例方法
通过 const chart = new Chart(ctx, config) 拿到实例后，可以调用以下方法。
| 方法 | 说明 | 常用参数 |
chart.update(mode?) |
修改 data / options 后调用，重新渲染 |
'none'(无动画) / 'show' / 'hide' / 'active' / 'reset' / 'resize' |
chart.reset() | 重置到初始状态 | — |
chart.render() | 仅重绘，不更新数据 | — |
chart.resize(w?, h?) | 手动触发尺寸刷新 | 可选宽高 |
chart.destroy() | 销毁图表，释放 canvas | — |
chart.toBase64Image(type?, quality?) |
导出图片 |
例：'image/png', 0.92 |
chart.getElementsAtEventForMode(e, mode, options, useFinal) |
查询某次事件命中的元素 |
— |
Chart.getChart(canvasOrId) (静态) |
通过 canvas 获取已存在的实例 |
— |
16. 颜色取值规则
所有颜色字段都接受 CSS 颜色字符串，下面是常用写法。
| 写法 | 示例 | 说明 |
| 命名颜色 | 'red' / 'steelblue' | 简单但不灵活 |
| 十六进制 | '#4f7cff' / '#fff' | 常用，无透明度 |
| 带透明度十六进制 | '#4f7cff80' | 最后两位是 alpha (00~ff) |
rgb() | 'rgb(79, 124, 255)' | 0~255 |
rgba() | 'rgba(79, 124, 255, 0.55)' | 第 4 位 alpha 0~1（推荐） |
hsl() / hsla() | 'hsla(220, 100%, 65%, 0.5)' | 方便统一色相 |
| 函数式（条件配色） | (ctx) => ctx.parsed.y > 100 ? 'red' : 'green' | scriptable options，部分字段支持 |
建议：填充类参数（backgroundColor）使用 rgba() 配 0.4~0.7 的透明度，边框类（borderColor）使用对应不透明色，配色更协调。