Tableau JavaScript API góc cạnh

Thành phần để hiển thị bảng điều khiển Tableau ở góc cạnh, trình bao bọc của API JavaScript Tableau chính thức

Đặc trưng

• [x] Tải trang tổng quan
• [x] Làm mới dữ liệu
• [x] Hiển thị hộp thoại hoạt cảnh
• [ ] Áp dụng các bộ lọc

Cách sử dụng/Ví dụ

Sử dụng cơ bản

ứng dụng. mô-đun. ts

import { AngularTableauModule } from "angular-tableau";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AngularTableauModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

ứng dụng. thành phần. html

<angular-tableau
  src="https://public.tableau.com/views/PRIDE_16229892973240/PRIDE"
>angular-tableau>

Máy chủ hoạt cảnh riêng

ứng dụng. mô-đun. ts

import { AngularTableauModule, TABLEAU_API } from "angular-tableau";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AngularTableauModule],
  providers: [
    {
      provide: TABLEAU_API,
      useValue:
        "https://private.tableau.com/javascripts/api/tableau-2.8.0.min.js",
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Chức năng

ứng dụng. thành phần. html

<angular-tableau
  #dashboard1
  src="https://public.tableau.com/views/PRIDE_16229892973240/PRIDE"
>angular-tableau>
<button type="button" (click)="handleRefreshButtonClick()">Refresh Databutton>

ứng dụng. thành phần. ts

import { AngularTableauComponent } from "angular-tableau";

export class AppComponent {
  @ViewChild("dashboard1") Dashboard1: AngularTableauCompoment;

  async handleRefreshButtonClick() {
    console.log("Refresh data started");
    await this.Dashboard1.refreshDataAsync();
    console.log("Data refreshed");
  }
}

Sự kiện

ứng dụng. thành phần. html

<angular-tableau
  #dashboard1
  (loaded)="handleLoaded()"
  src="https://public.tableau.com/views/PRIDE_16229892973240/PRIDE"
>angular-tableau>

ứng dụng. thành phần. ts

import { AngularTableauComponent } from "angular-tableau";

export class AppComponent {
  @ViewChild("dashboard1") Dashboard1: AngularTableauCompoment;

  async handleLoaded() {
    console.log("Refresh data started");
    await this.Dashboard1.refreshDataAsync();
    console.log("Data refreshed");
  }
}

Tham chiếu API

Thuộc tính

AttributeTypeDefaultDescriptionsrcstring''Required. Url của bảng điều khiểnheightstring'100%'Chiều cao của vùng chứa_______1_______1string'100%'Chiều rộng của vùng chứa

<angular-tableau
  src="https://public.tableau.com/views/PRIDE_16229892973240/PRIDE"
>angular-tableau>

3

<angular-tableau
  src="https://public.tableau.com/views/PRIDE_16229892973240/PRIDE"
>angular-tableau>

4falseHide tab

<angular-tableau
  src="https://public.tableau.com/views/PRIDE_16229892973240/PRIDE"
>angular-tableau>

5

<angular-tableau
  src="https://public.tableau.com/views/PRIDE_16229892973240/PRIDE"
>angular-tableau>

4falseHide toolbar

Sự kiện

EventDescription

<angular-tableau
  src="https://public.tableau.com/views/PRIDE_16229892973240/PRIDE"
>angular-tableau>

7Phát ra khi bảng điều khiển được tải lần đầu (onFirstInteractive)

Chúng ta có thể tích hợp Tableau với góc cạnh không?

Làm cách nào để sử dụng API JavaScript trong Tableau?

Bạn có thể sử dụng JavaScript trong Tableau không?

Tableau REST API là gì?