PrimeNG Chart 组件实战指南基于 Chart.js 的 Angular 图表集成与深度配置【免费下载链接】primengThe Most Complete Angular UI Component Library项目地址: https://gitcode.com/GitHub_Trending/pr/primengChart 是 PrimeNG 基于开源图表库 Chart.js 封装的 Angular 图表组件通过p-chart指令即可在 Angular 应用中快速接入柱状图、折线图、饼图、雷达图等十余种图表形态。本文以 PrimeNG 官方 LLM 文档为核心骨架结合仓库内 chart.ts 组件源码与 showcase 演示文档 展开覆盖从安装 Chart.js、三类核心属性配置到方法调用、Pass Through 定制与主题设置的完整链路读完即可在你的 Angular 项目中独立落地一套风格统一、可交互、可主题化的图表方案。组件与依赖概览PrimeNG 的 Chart 组件基于Chart.js 3.3.2当前 showcase 工程锁定为 chart.js 4.4.2见 apps/showcase/package.json该库是一个开源的 HTML5 Canvas 图表绘制库。在组件内部UIChart直接以import Chart from chart.js/auto方式创建图表实例见 chart.ts因此 Chart.js 自身的全部能力缩放、动画、事件、插件体系都可以透传到 PrimeNG 组件中使用。安装 Chart.js在 Angular CLI 工程中使用图表前需要先用 npm 安装 charts.js 包并将其加入项目的构建脚本。典型的 CLI 安装命令为npm install chart.js安装完成后在angular.json的scripts数组中引入showcase 工程正是如此见 apps/showcase/angular.jsonscripts: [ chart.js ]引入 ChartModule在组件中导入ChartModule即可使用p-chart指令参考 import-doc.tsimport { ChartModule } from primeng/chart;核心配置模型type、data、options 三要素一个图表由三个输入属性共同描述属性作用type定义图表类型接受pie、doughnut、line、bar、radar、polarArea等取值data定义图表展示的数据集labels datasetsoptions提供大量定制项用于定制图表的外观与行为从源码看chart.tstype的完整取值还包括scatter与bubbleInput() type: bar | line | scatter | bubble | pie | doughnut | polarArea | radar | undefined;data与options都是 setter 型输入一旦绑定值发生变化组件会自动执行reinit()先销毁旧图表再重建保证数据更新实时反映到画布上。基础柱状图从零开始的完整示例基础图表演示了一个最简单的柱状图对应 basic-doc.ts。模板中通过typebar指定类型并绑定[data]与[options]div classcard p-chart typebar [data]basicData [options]basicOptions / /div组件逻辑中basicData定义了季度标签与销售数据并给每个柱子指定背景色、边框色与边框宽度import { Component, OnInit, inject } from angular/core; import { ChartModule } from primeng/chart; Component({ template: div classcard p-chart typebar [data]basicData [options]basicOptions / /div , standalone: true, imports: [ChartModule] }) export class ChartBasicDemo implements OnInit { basicData: any; basicOptions: any; platformId inject(PLATFORM_ID); configService inject(AppConfigService); designerService inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle getComputedStyle(document.documentElement); const textColor documentStyle.getPropertyValue(--p-text-color); const textColorSecondary documentStyle.getPropertyValue(--p-text-muted-color); const surfaceBorder documentStyle.getPropertyValue(--p-content-border-color); this.basicData { labels: [Q1, Q2, Q3, Q4], datasets: [ { label: Sales, data: [540, 325, 702, 620], backgroundColor: [rgba(249, 115, 22, 0.2), rgba(6, 182, 212, 0.2), rgb(107, 114, 128, 0.2), rgba(139, 92, 246, 0.2)], borderColor: [rgb(249, 115, 22), rgb(6, 182, 212), rgb(107, 114, 128), rgb(139, 92, 246)], borderWidth: 1 } ] }; this.basicOptions { maintainAspectRatio: false, aspectRatio: 0.8, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } }, y: { beginAtZero: true, ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } } } }; this.cd.markForCheck(); } } }这里有几个值得注意的细节示例中通过getComputedStyle读取页面级 CSS 变量--p-text-color、--p-text-muted-color、--p-content-border-color将 PrimeNG 主题色注入图表的文字、刻度与网格颜色使图表与应用主题保持一致maintainAspectRatio: false配合aspectRatio: 0.8允许图表随容器自适应高度图表创建被包裹在isPlatformBrowser(this.platformId)判断内避免服务端渲染SSR时访问document报错——这与源码中initChart()使用isPlatformBrowser守卫的逻辑一致chart.ts。常用图表类型实战柱状图垂直与水平垂直柱状图对应 verticalbar-doc.ts以长度与数值成比例的矩形条呈现分组数据适合对比多个分类的量级。模板为typebar每个 dataset 通过backgroundColor与borderColor着色div classcard p-chart typebar [data]data [options]options classh-[30rem] / /divimport { Component, OnInit, inject } from angular/core; import { ChartModule } from primeng/chart; Component({ template: div classcard p-chart typebar [data]data [options]options classh-[30rem] / /div , standalone: true, imports: [ChartModule] }) export class ChartVerticalbarDemo implements OnInit { data: any; options: any; platformId inject(PLATFORM_ID); configService inject(AppConfigService); designerService inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle getComputedStyle(document.documentElement); const textColor documentStyle.getPropertyValue(--p-text-color); const textColorSecondary documentStyle.getPropertyValue(--p-text-muted-color); const surfaceBorder documentStyle.getPropertyValue(--p-content-border-color); this.data { labels: [January, February, March, April, May, June, July], datasets: [ { label: My First dataset, backgroundColor: documentStyle.getPropertyValue(--p-cyan-500), borderColor: documentStyle.getPropertyValue(--p-cyan-500), data: [65, 59, 80, 81, 56, 55, 40] }, { label: My Second dataset, backgroundColor: documentStyle.getPropertyValue(--p-gray-500), borderColor: documentStyle.getPropertyValue(--p-gray-500), data: [28, 48, 40, 19, 86, 27, 90] } ] }; this.options { maintainAspectRatio: false, aspectRatio: 0.8, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary, font: { weight: 500 } }, grid: { color: surfaceBorder, drawBorder: false } }, y: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } } } }; this.cd.markForCheck(); } } }水平柱状图对应 horizontalbar-doc.ts与垂直版几乎一致唯一关键差异是在options中设置indexAxis: y将类别轴切换为纵轴条形便横向延伸this.options { indexAxis: y, maintainAspectRatio: false, aspectRatio: 0.8, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary, font: { weight: 500 } }, grid: { color: surfaceBorder, drawBorder: false } }, y: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } } } };堆叠柱状图对应 stackedbar-doc.ts则在scales.x与scales.y上同时开启stacked: true使多个数据集在同一分类上纵向叠加this.options { maintainAspectRatio: false, aspectRatio: 0.8, plugins: { tooltip: { mode: index, intersect: false }, legend: { labels: { color: textColor } } }, scales: { x: { stacked: true, ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } }, y: { stacked: true, ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } } } };其数据部分为三个type: bar的 dataset分别使用--p-cyan-500、--p-gray-500、--p-orange-500着色配合tooltip.mode: index实现按索引聚合的提示框。折线图基础与样式定制基础折线图对应 line-doc.ts将数据点以直线段相连适合展示随时间变化的趋势。通过tension: 0.4开启曲线平滑fill: false关闭面积填充div classcard p-chart typeline [data]data [options]options classh-[30rem] / /divimport { Component, OnInit, inject } from angular/core; import { ChartModule } from primeng/chart; Component({ template: div classcard p-chart typeline [data]data [options]options classh-[30rem] / /div , standalone: true, imports: [ChartModule] }) export class ChartLineDemo implements OnInit { data: any; options: any; platformId inject(PLATFORM_ID); configService inject(AppConfigService); designerService inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle getComputedStyle(document.documentElement); const textColor documentStyle.getPropertyValue(--p-text-color); const textColorSecondary documentStyle.getPropertyValue(--p-text-muted-color); const surfaceBorder documentStyle.getPropertyValue(--p-content-border-color); this.data { labels: [January, February, March, April, May, June, July], datasets: [ { label: First Dataset, data: [65, 59, 80, 81, 56, 55, 40], fill: false, borderColor: documentStyle.getPropertyValue(--p-cyan-500), tension: 0.4 }, { label: Second Dataset, data: [28, 48, 40, 19, 86, 27, 90], fill: false, borderColor: documentStyle.getPropertyValue(--p-gray-500), tension: 0.4 } ] }; this.options { maintainAspectRatio: false, aspectRatio: 0.6, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } }, y: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder, drawBorder: false } } } }; this.cd.markForCheck(); } } }折线样式定制对应 linestyle-doc.ts展示了同一坐标系下三种差异化的线型可组合出面积图等效果第一条线fill: false实线青色--p-cyan-500第二条线borderDash: [5, 5]生成虚线橙色--p-orange-500第三条线fill: true配合半透明背景色rgba(107, 114, 128, 0.2)呈现面积图效果。this.data { labels: [January, February, March, April, May, June, July], datasets: [ { label: First Dataset, data: [65, 59, 80, 81, 56, 55, 40], fill: false, tension: 0.4, borderColor: documentStyle.getPropertyValue(--p-cyan-500) }, { label: Second Dataset, data: [28, 48, 40, 19, 86, 27, 90], fill: false, borderDash: [5, 5], tension: 0.4, borderColor: documentStyle.getPropertyValue(--p-orange-500) }, { label: Third Dataset, data: [12, 51, 62, 33, 21, 62, 45], fill: true, borderColor: documentStyle.getPropertyValue(--p-gray-500), tension: 0.4, backgroundColor: rgba(107, 114, 128, 0.2) } ] };饼图与环形图占比展示饼图对应 pie-doc.ts以圆形扇区划分数值比例适合展示整体中各部分的占比。backgroundColor与hoverBackgroundColor以数组形式为每个扇区指定普通态与悬停态颜色div classcard flex justify-center p-chart typepie [data]data [options]options classw-full md:w-[30rem] / /divimport { Component, OnInit, inject } from angular/core; import { ChartModule } from primeng/chart; Component({ template: div classcard flex justify-center p-chart typepie [data]data [options]options classw-full md:w-[30rem] / /div , standalone: true, imports: [ChartModule] }) export class ChartPieDemo implements OnInit { data: any; options: any; platformId inject(PLATFORM_ID); configService inject(AppConfigService); designerService inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle getComputedStyle(document.documentElement); const textColor documentStyle.getPropertyValue(--text-color); this.data { labels: [A, B, C], datasets: [ { data: [540, 325, 702], backgroundColor: [documentStyle.getPropertyValue(--p-cyan-500), documentStyle.getPropertyValue(--p-orange-500), documentStyle.getPropertyValue(--p-gray-500)], hoverBackgroundColor: [documentStyle.getPropertyValue(--p-cyan-400), documentStyle.getPropertyValue(--p-orange-400), documentStyle.getPropertyValue(--p-gray-400)] } ] }; this.options { plugins: { legend: { labels: { usePointStyle: true, color: textColor } } } }; this.cd.markForCheck(); } } }注意饼图示例的options中通过legend.labels.usePointStyle: true将图例标记渲染为圆点风格更现代。环形图对应 doughnut-doc.ts是饼图的变体中心留白区域可以承载对整体数据的补充信息。其数据结构与饼图相同关键差异是options.cutout: 60%指定中心挖空比例this.options { cutout: 60%, plugins: { legend: { labels: { color: textColor } } } };雷达图多维变量对比雷达图对应 radar-doc.ts以同一原点出发的多条轴线展示三维及以上定量变量的数值非常适合能力画像、多维评分等场景。模板中typeradar数据部分通过pointBackgroundColor、pointBorderColor、pointHoverBackgroundColor等属性精细控制数据点外观div classcard flex justify-center p-chart typeradar [data]data [options]options classw-full md:w-[30rem] / /divimport { Component, OnInit, inject } from angular/core; import { ChartModule } from primeng/chart; Component({ template: div classcard flex justify-center p-chart typeradar [data]data [options]options classw-full md:w-[30rem] / /div , standalone: true, imports: [ChartModule] }) export class ChartRadarDemo implements OnInit { data: any; options: any; platformId inject(PLATFORM_ID); configService inject(AppConfigService); designerService inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle getComputedStyle(document.documentElement); const textColor documentStyle.getPropertyValue(--p-text-color); const textColorSecondary documentStyle.getPropertyValue(--p-text-muted-color); this.data { labels: [Eating, Drinking, Sleeping, Designing, Coding, Cycling, Running], datasets: [ { label: My First dataset, borderColor: documentStyle.getPropertyValue(--p-gray-400), pointBackgroundColor: documentStyle.getPropertyValue(--p-gray-400), pointBorderColor: documentStyle.getPropertyValue(--p-gray-400), pointHoverBackgroundColor: textColor, pointHoverBorderColor: documentStyle.getPropertyValue(--p-gray-400), data: [65, 59, 90, 81, 56, 55, 40] }, { label: My Second dataset, borderColor: documentStyle.getPropertyValue(--p-cyan-400), pointBackgroundColor: documentStyle.getPropertyValue(--p-cyan-400), pointBorderColor: documentStyle.getPropertyValue(--p-cyan-400), pointHoverBackgroundColor: textColor, pointHoverBorderColor: documentStyle.getPropertyValue(--p-cyan-400), data: [28, 48, 40, 19, 96, 27, 100] } ] }; this.options { plugins: { legend: { labels: { color: textColor } } }, scales: { r: { grid: { color: textColorSecondary } } } }; } this.cd.markForCheck(); } }极地区域图Polar Area极地区域图对应 polararea-doc.ts与饼图相似但每个扇区角度相同通过半径长短反映数值大小。模板使用typepolarArea其径向轴scales.r的网格颜色同样支持主题化div classcard flex justify-center p-chart typepolarArea [data]data [options]options classw-full md:w-[30rem] / /divimport { Component, OnInit, inject } from angular/core; import { ChartModule } from primeng/chart; Component({ template: div classcard flex justify-center p-chart typepolarArea [data]data [options]options classw-full md:w-[30rem] / /div , standalone: true, imports: [ChartModule] }) export class ChartPolarareaDemo implements OnInit { data: any; options: any; platformId inject(PLATFORM_ID); configService inject(AppConfigService); designerService inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle getComputedStyle(document.documentElement); const textColor documentStyle.getPropertyValue(--p-text-color); const surfaceBorder documentStyle.getPropertyValue(--p-content-border-color); this.data { datasets: [ { data: [11, 16, 7, 3, 14], backgroundColor: [ documentStyle.getPropertyValue(--p-pink-500), documentStyle.getPropertyValue(--p-gray-500), documentStyle.getPropertyValue(--p-orange-500), documentStyle.getPropertyValue(--p-purple-500), documentStyle.getPropertyValue(--p-cyan-500) ], label: My dataset } ], labels: [Pink, Gray, Orange, Purple, Cyan] }; this.options { plugins: { legend: { labels: { color: textColor } } }, scales: { r: { grid: { color: surfaceBorder } } } }; this.cd.markForCheck(); } } }高级组合混合类型与多轴组合图Combo组合图对应 combo-doc.ts允许在同一张图中混合多种图表类型实现方式是在 dataset 级别设置type属性。下面的示例在同一个line图上混合了折线type: line与两根柱子type: bar并各自指定了独立的数据与颜色div classcard p-chart typeline [data]data [options]options classh-[30rem] / /divimport { Component, OnInit, inject } from angular/core; import { ChartModule } from primeng/chart; Component({ template: div classcard p-chart typeline [data]data [options]options classh-[30rem] / /div , standalone: true, imports: [ChartModule] }) export class ChartComboDemo implements OnInit { data: any; options: any; platformId inject(PLATFORM_ID); configService inject(AppConfigService); designerService inject(DesignerService); ngOnInit() { this.initChart(); } initChart() { if (isPlatformBrowser(this.platformId)) { const documentStyle getComputedStyle(document.documentElement); const textColor documentStyle.getPropertyValue(--p-text-color); const textColorSecondary documentStyle.getPropertyValue(--p-text-muted-color); const surfaceBorder documentStyle.getPropertyValue(--p-content-border-color); this.data { labels: [January, February, March, April, May, June, July], datasets: [ { type: line, label: Dataset 1, borderColor: documentStyle.getPropertyValue(--p-orange-500), borderWidth: 2, fill: false, tension: 0.4, data: [50, 25, 12, 48, 56, 76, 42] }, { type: bar, label: Dataset 2, backgroundColor: documentStyle.getPropertyValue(--p-gray-500), data: [21, 84, 24, 75, 37, 65, 34], borderColor: white, borderWidth: 2 }, { type: bar, label: Dataset 3, backgroundColor: documentStyle.getPropertyValue(--p-cyan-500), data: [41, 52, 24, 74, 23, 21, 32] } ] }; this.options { maintainAspectRatio: false, aspectRatio: 0.6, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } }, y: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } } } }; this.cd.markForCheck(); } } }多轴图表MultiAxis多轴图表对应 multiaxis-doc.ts通过scales选项添加多个坐标轴。示例在y左侧与y1右侧各配置一条线性轴两个 dataset 通过yAxisID分别关联到对应轴适合展示量纲差异较大的两组数据this.data { labels: [January, February, March, April, May, June, July], datasets: [ { label: Dataset 1, fill: false, borderColor: documentStyle.getPropertyValue(--p-cyan-500), yAxisID: y, tension: 0.4, data: [65, 59, 80, 81, 56, 55, 10] }, { label: Dataset 2, fill: false, borderColor: documentStyle.getPropertyValue(--p-gray-500), yAxisID: y1, tension: 0.4, data: [28, 48, 40, 19, 86, 27, 90] } ] }; this.options { stacked: false, maintainAspectRatio: false, aspectRatio: 0.6, plugins: { legend: { labels: { color: textColor } } }, scales: { x: { ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } }, y: { type: linear, display: true, position: left, ticks: { color: textColorSecondary }, grid: { color: surfaceBorder } }, y1: { type: linear, display: true, position: right, ticks: { color: textColorSecondary }, grid: { drawOnChartArea: false, color: surfaceBorder } } } };关键参数说明yAxisID: y/yAxisID: y1将数据集绑定到指定轴scales.y1.position: right将第二根轴置于图表右侧scales.y1.grid.drawOnChartArea: false禁止右侧轴的网格线绘制在绘图区避免与左侧轴网格线重叠。组件 API 详解Props输入属性以下是p-chart支持的全部输入属性同时可对照 props-doc.ts 与 chart.ts 源码中的Input声明名称类型默认值描述typestringnull图表的类型bar、line、scatter、bubble、pie、doughnut、polarArea、radar 等dataanynull要展示的数据optionsanynull用于定制图表的选项pluginsany[]null按图表定制的插件数组用于扩展图表行为widthstringnull图表的宽度heightstringnull图表的高度responsivebooleantrue屏幕尺寸变化时是否重绘图表onDataSelectfunctionnull点击图表元素时执行的回调源码中值得关注的实现细节data与options均定义了 setter赋值后会立刻触发reinit()因此运行时动态更新数据即可自动重建图表chart.tsresponsive使用booleanAttribute转换在initChart()中opts.responsive this.responsive会把该值写入 Chart.js 配置且当responsive为真并显式设置了width/height时会自动强制maintainAspectRatio false保证图表能随容器自由缩放根元素的内联样式由 chartstyle.ts 提供display: block; position: relative; width: width; height: height使width/height输入属性最终作用于根容器而非 canvas。Methods方法通过ViewChild(UIChart)获取组件实例后可调用以下方法见 methods-doc.ts 与 chart.ts名称参数描述refresh-使用新数据重绘图表reinit-先销毁图表再重新创建generateLegend-返回该图表的图例 HTML 字符串图例由 options 中的 legendCallback 生成此外源码还提供了两个未写入原文档表格的实用方法getCanvas()返回底层 canvas 元素getBase64Image()调用 Chart.js 的toBase64Image()导出图表为 Base64 图片可用于下载或上传场景。Events事件组件通过onDataSelect输出点击事件回调携带{ originalEvent, element, dataset }结构。底层实现中组件用 Chart.js 的getElementsAtEventForMode分别按nearest与dataset两种命中模式解析点击位置只有同时命中元素与数据集时才触发事件chart.ts。无障碍AccessibilityChart 组件内部使用 canvas 元素绘制图形这决定了其无障碍表现依赖底层 Canvas 的语义化处理。请参考Chart.js 官方无障碍指南了解如何为 canvas 补充替代文本与键盘支持同时 PrimeNG 组件本身在模板中为 canvas 注入了roleimg并暴露ariaLabel与ariaLabelledBy两个输入属性见 chart.ts允许开发者提供可被屏幕阅读器朗读的图表描述p-chart typebar [data]data [options]options ariaLabel2024 年各季度销售额柱状图 /Pass Through 定制与主题Pass Through OptionsChart 组件暴露了三个 Pass Through 层级用于向对应 DOM 元素传递属性或样式见 chart.ts 模板中的ptm(canvas)与hostDirectives: [Bind]机制名称类型描述hostPassThroughOptionHTMLElement, I向宿主 DOM 元素传递属性rootPassThroughOptionHTMLElement, I向根 DOM 元素传递属性canvasPassThroughOptionHTMLCanvasElement, I向 canvas DOM 元素传递属性Theming 与 CSS 类图表的根元素使用统一的样式类p-chart类名定义位于 chartstyle.ts 的ChartClasses枚举中类名描述p-chart根元素的类名由于图表配色大量取自 CSS 变量如--p-text-color、--p-content-border-color、--p-cyan-500等当你切换 PrimeNG 主题或通过 Designer 调整设计令牌时图表会随之自动换肤无需改动任何 TS 代码。源码视角组件运行机制把上面所有用法串起来UIChart的生命周期可以归纳为chart.ts创建onAfterViewInit时调用initChart()在浏览器环境下Chart.js 实例被创建在NgZone 之外this.zone.runOutsideAngular避免图表动画、悬停等高频回调反复触发 Angular 变更检测这是该组件在性能上的关键设计更新data/options输入变化触发reinit()——先chart.destroy()再重建交互canvas 的click事件解析命中元素并向上派发onDataSelect销毁onDestroy中销毁 Chart.js 实例并清空引用防止内存泄漏。组件自身采用ChangeDetectionStrategy.OnPush与ViewEncapsulation.None并继承BaseComponentChartPassThrough这正是它能够统一接入 PrimeNG 主题系统与 Pass Through 定制体系的根基。如果你需要为图表扩展自定义插件只需在模板中传入[plugins]myPluginsChart.js 生态中丰富的插件如缩放、标注、数据标签都能以 Angular 输入的形式无缝接入。【免费下载链接】primengThe Most Complete Angular UI Component Library项目地址: https://gitcode.com/GitHub_Trending/pr/primeng创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考