Angular中能否创建单条主柱包含多条子柱的图表？

问题原因 #

图表为空的核心原因是Chart.js v4+不再自动注册图表控制器，原代码缺少必要的Chart.js模块注册步骤，同时模块中未正确声明目标组件。

修正后的完整实现步骤 #

1. 安装指定版本依赖

npm install ng2-charts@4.1.1 chart.js@4.3.0

2. 配置AppModule

确保将目标组件添加到declarations数组，同时导入NgChartsModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgChartsModule } from 'ng2-charts';
import { ErrorChartComponent } from './error-chart/error-chart.component'; // 替换为你的组件实际路径
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    ErrorChartComponent // 必须声明该组件
  ],
  imports: [
    BrowserModule,
    NgChartsModule 
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 组件代码（添加Chart.js模块注册）

显式注册Chart.js的必要模块，确保图表能正常渲染：

import { Component } from '@angular/core';
import { Chart, registerables } from 'chart.js';

// 注册Chart.js所有核心模块
Chart.register(...registerables);

@Component({
  selector: 'app-error-chart',
  templateUrl: './error-chart.component.html',
  styleUrls: ['./error-chart.component.css']
})
export class ErrorChartComponent {
  public barChartOptions = {
    responsive: true,
    scales: {
      x: {
        stacked: true, // 开启X轴堆叠，让所有子柱归到同一主柱下
        grid: { display: false } // 可选：隐藏X轴网格线，优化单主柱视觉效果
      },
      y: {
        stacked: true, // 开启Y轴堆叠，子柱高度累加
        beginAtZero: true,
        title: { display: true, text: '数值' } // 可选：添加Y轴标题
      }
    }
  };

  public barChartLabels = ['Release X'];
  public barChartData = [
    { label: 'Market 1', data: [20], backgroundColor: '#ff4444' },
    { label: 'Market 2', data: [15], backgroundColor: '#ffaa33' },
    { label: 'Market 3', data: [10], backgroundColor: '#ffdd33' },
    { label: 'Market 4', data: [5], backgroundColor: '#33b5e5' }
  ];
  public barChartType = 'bar';
  public barChartLegend = true; // 显式配置图例显示
}

4. 模板代码

保持模板绑定正确，可添加固定宽度让图表显示更稳定：

<div style="width: 600px; margin: 20px auto;">
  <canvas
    baseChart
    [data]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [type]="barChartType"
    [legend]="barChartLegend">
  </canvas>
</div>

关键修复点 #

• Chart.js模块注册：Chart.js v4+需要手动注册控制器、元素等核心模块，通过Chart.register(...registerables)完成全局注册
• 组件声明：必须在AppModule的declarations中添加目标组件，否则Angular无法识别并渲染该组件
• 堆叠配置验证：确保scales.x.stacked和scales.y.stacked均设为true，保证所有系列柱子在同一X轴标签下堆叠
• 图例显式配置：显式绑定[legend]属性，确保图例正常显示

内容的提问来源于stack exchange，提问作者Pramod