GIS教程之将 Plotly.js 与 Angular 一起使用

在本课中，我们将完成将 Plotly.js 与 Angular 集成的步骤。Plotly.js 是一个开源图形库。在课程结束时，您应该能够使用 Plotly.js 做一个简单的绘图。

先决条件

必须熟悉 Angular

1. 创建一个名为angular-plotly的新 Angular 项目。在命令终端中键入以下内容。

ng new angular-plotly

当提示“你想添加 Angular 路由吗？(y/N) ”，您可以键入y或N，然后在键盘上按 Enter。当提示“您想使用哪种样式表格式？”，您可以选择 CSS。

2. 导航到angular-plotly目录。在命令终端中键入以下内容。

cd angular-plotly

3. 创建一个名为plotly-component的新组件。在命令终端中键入以下内容。

ng generate component plotly-component

4. 打开app.component.html，删除所有内容并添加以下行

<app-plotly-component></app-plotly-component>

5. 到Plotly.js。将有 3 个选项：

• 从 NPM 安装
• 使用 CDN 链接
• 下载 Plotly.js

6. 对于这个演示，下载 Plotly.js。

7. 将下载的文件复制到