Angular Charts

## 在 Angular 中使用 ApexCharts
[ng-ApexCharts](https://github.com/apexcharts/ng-apexcharts "ng-ApexCharts")是 ApexCharts 的 Angular 包装器组件，可以集成到您的 Angular 应用程序中以创建令人惊叹的图表。在本文中，您将学习如何使用 ng-ApexCharts 在您的 Web 应用程序中轻松创建各种图表。

## 下载安装
1. 使用npm安装

```shell
npm install apexcharts ng-apexcharts --save 
```

2. 打开 angular.json 并在脚本下添加：
```javascript
"scripts": [
  "node_modules/apexcharts/dist/apexcharts.min.js"
]
```

3. 将 ng-apexcharts-module 添加到导入中
```javascript
imports: [
  BrowserModule,
  FormsModule,
  ReactiveFormsModule,
  NgApexchartsModule,
  ...
]
```
 
## 用法
在任何组件中，您都可以使用图表
```html
<apx-chart [series]="series" [chart]="chart" [title]="title"></apx-chart>
```
您至少需要提供 series 和 chart 属性以确保可以创建图表。

## 创建你的第一个角度图表
一旦你安装了这个库，你就可以在 Angular 中创建一个基本的条形图了。那么，让我们开始吧。我们从 `app.component.ts`

```javascript
import { Component, ViewChild } from "@angular/core";

import {
  ChartComponent,
  ApexAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexTitleSubtitle
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  title: ApexTitleSubtitle;
};

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

constructor() {
    this.chartOptions = {
      series: [
        {
          name: "My-series",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }
      ],
      chart: {
        height: 350,
        type: "bar"
      },
      title: {
        text: "My First Angular Chart"
      },
      xaxis: {
        categories: ["Jan", "Feb",  "Mar",  "Apr",  "May",  "Jun",  "Jul",  "Aug", "Sep"]
      }
    };
  }
}
```

在 `app.component.html` 中

```html
  <div style="text-align:center">
  <apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [xaxis]="chartOptions.xaxis"
    [title]="chartOptions.title"
  ></apx-chart>
</div>
```

正如您在上面的模板中看到的，Angular ApexCharts 组件 `<apx-chart>` 有 4 个属性。下面列出了所有其他选项，这些选项可以作为组件的属性提供。

## 所有选项
可以使用属性插入 ng-chart 的所有选项。这是所有可用属性的列表：

```javascript
@Input() chart: ApexChart;
@Input() annotations: ApexAnnotations;
@Input() colors: string[];
@Input() dataLabels: ApexDataLabels;
@Input() series: ApexAxisChartSeries | ApexNonAxisChartSeries;
@Input() stroke: ApexStroke;
@Input() labels: string[];
@Input() legend: ApexLegend;
@Input() fill: ApexFill;
@Input() tooltip: ApexTooltip;
@Input() plotOptions: ApexPlotOptions;
@Input() responsive: ApexResponsive[];
@Input() xaxis: ApexXAxis;
@Input() yaxis: ApexYAxis | ApexYAxis[];
@Input() grid: ApexGrid;
@Input() states: ApexStates;
@Input() title: ApexTitleSubtitle;
@Input() subtitle: ApexTitleSubtitle;
@Input() theme: ApexTheme;
```

这将呈现以下图表。要阅读有关您可以在条形图中配置的选项的更多信息，请查看此 [plotOptions.bar](http://www.bixiaguangnian.com/manual/apexcharts/315.html "plotOptions.bar") 配置。

![](/uploads/images/20221226/fc9de2e94396e3b8f30de8efe3ba29c6.png)

### 完整示例
可以在 [CodeSandbox](https://codesandbox.io/s/first-ng-apexcharts-j8zue "CodeSandbox") 上实时访问上面的示例在下一节中，我们将看到如何动态更新呈现的图表

## 更新 Angular 图表数据

更新 Angular 图表数据很简单。您只需更新系列属性，它就会自动触发事件来更新图表。我们将在下面看到一个用一些随机序列更新图表数据的例子来说明这一点。

```javascript
export class AppComponent {
  @ViewChild("chart", { static: false }) chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

constructor() {
    this.chartOptions = {
      series: [{
        name: 'series-1',
        data: [44, 55, 13, 33]
      }],
    };
  }

public updateSeries() {
    this.chartOptions.series = [{
      data: [23, 44, 1, 22]
    }];
  }
}
```
正如你在上面的例子中看到的，通过改变道具，我们触发了 ApexCharts 的更新事件。

## 更多图表示例？
通过更改几个选项可以创建其他几个图表。在 [Angular Chart Demos](https://apexcharts.com/angular-chart-demos/ "Angular Chart Demos") 页面上可以找到 80 多个示例。

## 需要高级图表功能？
我们与 Infragistics 合作，让您可以访问他们全面的[Angular 图表](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-overview "Angular 图表")库。它包括 65 种以上的实时图表，包括饼图、折线图、条形图、圆环图、树状图，甚至[股票图](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart "股票图")，它们提供与您在 Google 财经和雅虎财经图表中遇到的图表相同的功能。在处理项目时使用 Ignite UI for Angular 图表，您可以应用深度分析，在几毫秒内呈现数百万个数据点，并为最终用户提供出色的用户体验。

借助动画、注释、轴网格线、图表叠加、图表突出显示等许多有用的 [Angular 图表功能](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/chart-features "Angular 图表功能")，您可以在 Angular 中构建更好的数据驱动、关键任务 Web 和移动应用程序。Infragistics 的 Angular Charts 组件提供了令人惊叹的仪表板，使您能够制作交互式图表和图形，这些图表和图形专为在每个现代浏览器上的速度、功能和无缝性能而设计。