在 chart.js 中，可通过将原始数据对象数组直接传入 data 并配合 parsing 配置与脚本化选项（scriptable options），在 backgroundcolor 回调中访问每个数据项的自定义属性（如 colour），实现逐项动态着色。
在 chart.js 中，可通过将原始数据对象数组直接传入 data 并配合 parsing 配置与脚本化选项（scriptable options），在 backgroundcolor 回调中访问每个数据项的自定义属性（如 colour），实现逐项动态着色。
Chart.js 支持“脚本化选项”（scriptable options），允许你为视觉属性（如 backgroundColor、borderColor）提供回调函数，该函数在渲染每个数据点时被调用，并接收一个上下文对象（context）。但关键前提是：必须让 Chart.js 知道你传入的是结构化数据对象（而非仅数值数组），否则 context.raw 将为 undefined。
正确做法是：
- 直接传入对象数组（如 [{name: 'John', score: 10, colour: 'orange'}, ...]）作为 dataset.data；
- 启用 parsing 配置，明确指定用于图表数值渲染的字段（例如 key: 'score'）；
- 在 backgroundColor 回调中，通过 context.raw 访问当前数据项的完整对象，从而读取任意自定义属性（如 colour）。
以下是完整可运行示例：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script><canvas id="chart"></canvas><script>
const ctx = document.getElementById('chart').getContext('2d');
const dataSet = [
{ name: 'John', score: 10, colour: 'orange' },
{ name: 'Bob', score: 5, colour: 'yellow' },
{ name: 'Alice', score: 20, colour: 'pink' }
];
new Chart(ctx, {
type: 'pie',
data: {
datasets: [{
data: dataSet, // ✅ 直接传入对象数组
backgroundColor: (context) => context.raw.colour, // ✅ 从 raw 对象取 colour
borderColor: '#fff',
borderWidth: 2
}]
},
options: {
responsive: true,
plugins: {
legend: { display: false }
},
parsing: {
key: 'score' // ✅ 告诉 Chart.js：y 值取自每个对象的 'score' 字段
}
}
});
</script>
⚠️ 注意事项：
- context.raw 仅在 parsing 启用且 data 为对象数组时有效；若仍传入纯数值数组（如 data: [10, 5, 20]），则 context.raw 为 undefined，回调会报错；
- 属性名需保持一致（示例中统一用 colour，但注意原数据中 Alice 的字段写为 color 是笔误，应统一为 colour 或 color）；
- 此方案适用于所有支持脚本化选项的图表类型（pie、doughnut、bar、radar 等）及多数视觉属性（hoverBackgroundColor、borderColor 等同理）；
- 若需兼容旧版 Chart.js（
通过这一机制，你不仅能实现颜色动态绑定，还可扩展至图标、工具提示文本、边框样式等多维度个性化渲染，大幅提升数据可视化表现力与语义表达能力。
