要在Angular中集成Tableau,需要遵循以下步骤:
安装Tableau JavaScript API
首先,你需要在Angular项目中安装Tableau JavaScript API。可以通过以下命令来安装:
npm install --save tableau-api
创建一个Tableau服务
在Angular项目中,你可以创建一个Tableau服务来管理Tableau相关的逻辑。可以通过以下命令来创建服务:
ng generate service tableau
这将在src/app
目录下创建一个名为tableau.service.ts
的文件。
在Tableau服务中添加集成代码
打开tableau.service.ts
文件,并导入Tableau JavaScript API:
import { Injectable } from '@angular/core';
// 导入Tableau JavaScript API
declare const tableau: any;
@Injectable({
providedIn: 'root'
})
export class TableauService {
constructor() { }
// 添加集成代码
initTableau() {
// 创建Tableau视图
const viz = new tableau.Viz(document.getElementById('tableauViz'), 'URL to your Tableau dashboard');
}
}
在组件中使用Tableau服务
打开要使用Tableau的组件,并在其中注入Tableau服务:
import { Component, OnInit } from '@angular/core';
import { TableauService } from '../tableau.service';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
constructor(private tableauService: TableauService) { }
ngOnInit(): void {
// 在组件初始化时调用Tableau服务的方法
this.tableauService.initTableau();
}
}
在HTML模板中添加容器
在组件的HTML模板中,添加一个容器来放置Tableau视图:
这将是Tableau视图的位置。
运行应用程序
最后,运行你的Angular应用程序,并查看Tableau集成是否起作用。
请确保你的Tableau服务器和Tableau仪表板URL正确,并且你对Tableau JavaScript API有必要的了解。