求助：使用Angular库创建指定图表（Angular HighCharts尝试失败）

I’ve checked the target chart example you referenced, and adapting it to Angular Highcharts is straightforward once you map the vanilla Highcharts config to the Angular component structure. Here’s a step-by-step implementation:

1. Ensure Dependencies are Installed #

First, confirm you have the required packages installed. If not, run this command in your project directory:

npm install highcharts @highcharts/angular-official

2. Component Setup #

In your Angular component (e.g., target-chart.component.ts), import Highcharts and configure the chart options to match your target chart requirements:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import ScatterModule from 'highcharts/modules/scatter';

// Load the scatter module (required for target line markers)
ScatterModule(Highcharts);

@Component({
  selector: 'app-target-chart',
  templateUrl: './target-chart.component.html'
})
export class TargetChartComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Actual vs Target Values'
    },
    xAxis: {
      categories: ['Q1', 'Q2', 'Q3', 'Q4'],
      crosshair: true
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Value'
      }
    },
    tooltip: {
      shared: true,
      formatter: function() {
        let tooltipText = `<b>${this.x}</b><br/>`;
        // Show both actual and target values in tooltip
        this.points.forEach(point => {
          tooltipText += `${point.series.name}: ${point.y}<br/>`;
        });
        return tooltipText;
      }
    },
    series: [
      {
        name: 'Actual',
        type: 'column',
        data: [4500, 5200, 4800, 6100],
        color: '#7cb5ec'
      },
      {
        name: 'Target',
        type: 'scatter',
        data: [5000, 5500, 5000, 6500],
        marker: {
          symbol: 'line',
          lineWidth: 2,
          lineColor: '#ff0000',
          radius: 0
        },
        tooltip: {
          pointFormat: '{series.name}: {point.y}'
        }
      }
    ]
  };
}

3. Template Setup #

In your component’s template (target-chart.component.html), add the Highcharts component to render the chart:

<highcharts-chart 
  [Highcharts]="Highcharts" 
  [options]="chartOptions" 
  style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

Key Implementation Details: #

• Target Line Rendering: The target values use a scatter series with a line-style marker (instead of a dot) to create horizontal target lines above each column—this matches the approach from your reference example.
• Tooltip Customization: The shared tooltip is configured to display both actual and target values clearly for each category.
• Module Loading: The scatter module is loaded explicitly because the target series relies on scatter-type rendering; without this, the line markers won’t display correctly.

If you need to update data dynamically (e.g., from an API), you can modify the chartOptions.series array and trigger a refresh using the chart’s reference object. For static data, the above setup works out of the box.

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