Angular - SVG 作为模板

SVG 提供了一个使用声明式编程创建丰富图形的框架。Angular 模板可以应用于 SVG，以最小的努力创建动态图形。

在本节中，让我们学习如何使用 Angular 模板在 SVG 中创建动态图表。

动态条形图

让我们在 SVG 格式中创建一个简单的条形图，并在我们的模板中使用它，然后通过模板输入变量动态更新条形图。

步骤 1： 使用 Angular CLI 创建一个新应用程序，如下所示 -

$ ng new my-app

步骤 2： 使用 Angular CLI 创建一个名为 chart 的组件，如下所示 -

$ ng generate component chart 
CREATE src/app/chart/chart.component.css (0 bytes)
CREATE src/app/chart/chart.component.html (20 bytes)
CREATE src/app/chart/chart.component.spec.ts (552 bytes)
CREATE src/app/chart/chart.component.ts (198 bytes)
UPDATE src/app/app.module.ts (835 bytes)

步骤 3： 接下来，打开组件模板文件 chart.component.html 并添加一个静态条形图到 SVG 中。

<svg class="chart" width="420" height="150">
   <title id="title">Bar chart</title>
   <desc id="desc">Fruits count</desc>
   <g class="bar">
      <rect width="50" height="19"></rect>
      <text x="55" y="9.5" dy=".35em">5 Apples</text>
   </g>
   <g class="bar">
      <rect width="100" height="19" y="20"></rect>
      <text x="105" y="28" dy=".35em">10 Orange</text>
   </g>
   <g class="bar">
      <rect width="40" height="19" y="40"></rect>
      <text x="45" y="48" dy=".35em">2 Lemons</text>
  </g>
</svg>

步骤 4： 接下来，打开组件的样式文件 chart.component.css 并添加以下 CSS 来设置 SVG 条形图的样式。

.bar {
   fill: red;
   height: 21px;
   transition: fill .3s ease;
   cursor: pointer;
   font-family: Helvetica, sans-serif;
}
.bar text {
   color: black;
}
.bar:hover,
.bar:focus {
   fill: black;
}
.bar:hover text,
.bar:focus text {
   fill: red;

步骤 5： 接下来，打开应用程序组件模板 app.component.html 并添加我们的 chart 组件

<app-chart />

步骤 6： 运行应用程序并检查图表是否已正确渲染

步骤 7： 接下来，创建一个名为 Fruit 的接口来保存图表数据

$ ng generate interface Fruit
CREATE src/app/fruit.ts (27 bytes)

步骤 8： 使用名称和数量值更新接口

export interface Fruit {
   name: string;
   count: number;
}

步骤 9： 在 chart 组件中导入 Fruit 接口

import { Fruit } from '../fruit'

步骤 10： 在 chart 组件中添加示例水果数据

fruits : Fruit[] = [
   {
      name: 'Apple',
      count: 10
   },
   {
      name: 'Orange',
      count: 20
   },
   {
      name: 'Lemon',
      count: 5
   }
]

步骤 11： 组件的完整列表如下 -

import { Component } from '@angular/core';
import { Fruit } from '../fruit'

@Component({
   selector: 'app-chart',
   templateUrl: './chart.component.html',
   styleUrls: ['./chart.component.css']
})
export class ChartComponent {
   fruits : Fruit[] = [
   {
      name: 'Apple',
      count: 10
   },
   {
      name: 'Orange',
      count: 20
   },
   {
      name: 'Lemon',
      count: 5
   }
   ]
}

步骤 12： 接下来，打开组件的模板文件并更新条形图以使用来自组件的 fruit 模板变量，如下所示 -

<svg class="chart" width="420" height="150">
   <g class="bar" *ngFor="let fruit of fruits; let i = index;">
      <rect [attr.width]="fruit.count * 10" height="19" [attr.y]="0 + (i * 20)"></rect>
      <text [attr.x]="fruit.count * 10 + 5" [attr.y]="10 + (i * 20)" dy=".35em">
         {{ fruit.count }} {{ fruit.name }}
      </text>
   </g>
</svg>

这里，

ngFor（结构指令）用于循环遍历 fruits
属性绑定（[attr.width]、[attr.x] 和 [attr-y]）与模板语句一起使用，根据 fruits 模板变量动态添加图表中的每个条形。
fruit.count * 10 是一个模板语句，它根据水果数量设置条形的宽度。
0 + (i * 20) 是另一个模板语句，它设置图表中条形的位置。
fruit.count * 10 + 5 是另一个模板语句，它设置图表中条形末端文本的 x 坐标。
10 + (i * 20) 是另一个模板语句，它设置图表中条形末端文本的 y 坐标。

步骤 13： 运行应用程序并检查图表是否已正确渲染

总结

SVG 图形可以通过 Angular 模板轻松完成。我们可以将其与表单编程结合起来，动态设置条形图的样式，并扩展条形图以支持其他类型的图表。SVG 图表只是一个示例，说明如何在 Angular 模板中创建/操作 SVG。它可以用来创建高级 SVG 图形，如地图、基于 SVG 的动画等。

打印页面