Angular 2中基于指定JSON数据填充堆叠条形图barChartData

To create a stacked bar chart from your bug status data in Angular, you’ll typically use ng2-charts (a wrapper for Chart.js). Here’s a step-by-step implementation to transform your JSON data into the required barChartData format:

Step 1: Install Dependencies #

First, install the necessary packages if you haven’t already:

npm install ng2-charts chart.js

Step 2: Configure Your App Module #

Add ChartModule to your app module imports to enable chart functionality:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'ng2-charts';

import { AppComponent } from './app.component';
import { BugChartComponent } from './bug-chart/bug-chart.component';

@NgModule({
  declarations: [AppComponent, BugChartComponent],
  imports: [BrowserModule, ChartModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Component Implementation #

Create a component (e.g., BugChartComponent) that processes your JSON data and sets up the chart:

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataset } from 'chart.js';
import { Label } from 'ng2-charts';

@Component({
  selector: 'app-bug-chart',
  templateUrl: './bug-chart.component.html',
  styleUrls: ['./bug-chart.component.css']
})
export class BugChartComponent implements OnInit {
  // Your raw bug status data
  private bugData = [
    {
      "BugStatus": "Closed",
      "BugsSeverities": [
        { "Severity": "Blocking", "Count": 2 },
        { "Severity": "Major Inconvenience", "Count": 3 }
      ]
    },
    {
      "BugStatus": "Needs Verification",
      "BugsSeverities": [
        { "Severity": "Blocking", "Count": 1 },
        { "Severity": "Major Inconvenience", "Count": 1 }
      ]
    }
  ];

  // Chart configuration
  barChartOptions: ChartOptions = {
    responsive: true,
    scales: {
      y: {
        stacked: true,
        beginAtZero: true,
        title: { display: true, text: 'Total Bug Count' }
      },
      x: {
        stacked: true,
        title: { display: true, text: 'Bug Status' }
      }
    }
  };
  barChartLabels: Label[] = [];
  barChartType: ChartType = 'bar';
  barChartLegend = true;
  barChartData: ChartDataset[] = [];

  ngOnInit(): void {
    this.processBugData();
  }

  /**
   * Transforms raw bug data into chart-compatible format
   */
  private processBugData(): void {
    // Extract X-axis labels from BugStatus values
    this.barChartLabels = this.bugData.map(item => item.BugStatus);

    // Collect all unique severity types to create individual datasets
    const uniqueSeverities = new Set<string>();
    this.bugData.forEach(statusItem => {
      statusItem.BugsSeverities.forEach(severity => uniqueSeverities.add(severity.Severity));
    });

    // Build a dataset for each severity
    this.barChartData = Array.from(uniqueSeverities).map(severity => {
      // For each bug status, get the count of the current severity (0 if missing)
      const dataPoints = this.bugData.map(statusItem => {
        const severityEntry = statusItem.BugsSeverities.find(s => s.Severity === severity);
        return severityEntry ? severityEntry.Count : 0;
      });

      return {
        label: severity,
        data: dataPoints,
        backgroundColor: this.generateRandomColor() // Assign unique color to each dataset
      };
    });
  }

  /**
   * Helper to generate random hex colors for chart datasets
   */
  private generateRandomColor(): string {
    const hexChars = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += hexChars[Math.floor(Math.random() * 16)];
    }
    return color;
  }
}

Step 4: Template Markup #

Add the chart canvas to your component’s template (bug-chart.component.html):

<div style="width: 80%; margin: 2rem auto;">
  <canvas baseChart
          [data]="barChartData"
          [labels]="barChartLabels"
          [options]="barChartOptions"
          [legend]="barChartLegend"
          [chartType]="barChartType">
  </canvas>
</div>

Key Explanations: #

• Stacked Configuration: The stacked: true property in both X and Y scales enables the stacked bar behavior, so each bar’s segments add up to the total bug count for that status.
• Data Transformation: We first extract all unique severities, then create a dataset for each. Each dataset’s data points correspond to the count of that severity in each bug status (defaulting to 0 if the severity isn’t present for a status).
• Color Generation: The generateRandomColor function ensures each severity has a distinct color, making the stacked segments easy to distinguish.

This implementation will render a clean stacked bar chart where each X-axis bar represents a bug status, and the segments of each bar show the breakdown of bugs by severity.

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