本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。
重要
Amazon QuickSight 有內嵌分析的新API操作: GenerateEmbedUrlForAnonymousUser
和 GenerateEmbedUrlForRegisteredUser
。
您仍然可以使用 GetDashboardEmbedUrl
和 GetSessionEmbedUrl
API操作來內嵌儀表板和 QuickSight 主控台,但它們不包含最新的內嵌功能。如需使用舊API操作內嵌的詳細資訊,請參閱 使用 GetDashboardEmbedURL 和 GetSessionEmbedURL API 操作內嵌分析。
適用於:企業版 |
目標對象:Amazon QuickSight 開發人員 |
在下列各節中,您可以找到如何為 Amazon 註冊使用者設定內嵌 Amazon QuickSight 儀表板的詳細資訊 QuickSight。
步驟 1:設定許可
在以下章節中,您可以了解如何為後端應用程式或 Web 伺服器設定許可。此任務需要 的管理存取權IAM。
每個存取儀表板的使用者都會擔任一個角色,該角色會授予他們儀表板的 Amazon QuickSight 存取權和許可。若要實現此目標,請在 中建立 IAM角色 AWS 帳戶。將IAM政策與 角色建立關聯,以提供許可給任何擔任該角色的使用者。此IAM角色需要提供擷取特定使用者集區的內嵌URLs許可。透過萬用字元 * 的協助,您可以授予許可,為特定命名空間中的所有URL使用者或特定命名空間中的使用者子集產生 。對於這一點,您新增 quicksight:GenerateEmbedUrlForRegisteredUser
。
您可以在IAM政策中建立條件,以限制開發人員可以在GenerateEmbedUrlForRegisteredUser
API操作AllowedDomains
參數中列出的網域。AllowedDomains
參數是選用參數。它會授予您作為開發人員覆寫管理 QuickSight功能表中設定的靜態網域的選項。反之,您最多可以列出三個可存取所產生 的網域或子網域URL。這接著URL會內嵌在您建立的網站中。只有參數中列出的域可以存取內嵌視覺效果。如果沒有這種情況,您可以在 AllowedDomains
參數中列出網際網路上的任何域。
若要限制開發人員可搭配此參數使用的網域,請將 AllowedEmbeddingDomains
條件新增至您的IAM政策。如需 AllowedDomains
參數的詳細資訊,請參閱《Amazon QuickSight API 參考GenerateEmbedUrlForRegisteredUser》中的 。
下列範例政策提供這些許可。
{ "Version": "2012-10-17", "Statement": [ { "Effect": "Allow", "Action": [ "quicksight:GenerateEmbedUrlForRegisteredUser" ], "Resource": "arn:
partition
:quicksight:region
:accountId
:user/namespace
/userName
", "Condition": { "ForAllValues:StringEquals": { "quicksight:AllowedEmbeddingDomains": [ "https://my.static.domain1.com", "https://*.my.static.domain2.com" ] } } } ] }
此外,如果您要建立將成為 Amazon QuickSight 讀者的第一次使用者,請務必在政策中新增 quicksight:RegisterUser
許可。
下列範例政策提供許可,以擷取URL初次作為 QuickSight 讀者的使用者內嵌。
{
"Version": "2012-10-17",
"Statement": [
{
"Action": "quicksight:RegisterUser",
"Resource": "*",
"Effect": "Allow"
},
{
"Effect": "Allow",
"Action": [
"quicksight:GenerateEmbedUrlForRegisteredUser"
],
"Resource": [
"arn:{{partition}}:quicksight:{{region}}:{{accountId}}:namespace/{{namespace}}",
"arn:{{partition}}:quicksight:{{region}}:{{accountId}}:dashboard/{{dashboardId-1}}",
"arn:{{partition}}:quicksight:{{region}}:{{accountId}}:dashboard/{{dashboardId-2}}"
],
"Condition": {
"ForAllValues:StringEquals": {
"quicksight:AllowedEmbeddingDomains": [
"https://my.static.domain1.com",
"https://*.my.static.domain2.com"
]
}
}
}
]
}
最後,您應用程式的IAM身分必須具有與其相關聯的信任政策,以允許存取您剛建立的角色。這表示當使用者存取您的應用程式時,您的應用程式可以代表使用者擔任該角色,並在其中佈建使用者 QuickSight。範例信任政策如下所示。
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowLambdaFunctionsToAssumeThisRole",
"Effect": "Allow",
"Principal": {
"Service": "lambda.amazonaws.com"
},
"Action": "sts:AssumeRole"
},
{
"Sid": "AllowEC2InstancesToAssumeThisRole",
"Effect": "Allow",
"Principal": {
"Service": "ec2.amazonaws.com"
},
"Action": "sts:AssumeRole"
}
]
}
如需 OpenID Connect 或SAML身分驗證信任政策的詳細資訊,請參閱 IAM 使用者指南的下列章節:
步驟 2:產生URL已連接驗證碼的
在下一節中,您可以了解如何驗證您的使用者,並取得URL應用程式伺服器上的可內嵌儀表板。如果您計劃內嵌 IAM或 QuickSight 身分類型的儀表板,請與使用者共用儀表板。
當使用者存取您的應用程式時,應用程式會代表使用者擔任該IAM角色。然後,如果使用者尚未存在 QuickSight,它會將使用者新增至 。接著,它傳遞識別符當作唯一的角色工作階段 ID。
執行這些步驟可確保儀表板的每個檢視器都是以唯一的方式佈建 QuickSight。它還會強制執行個別使用者設定,例如資料列層級的安全性和參數的動態預設值。
下列範例代表使用者執行IAM身分驗證。此代碼在您的應用程式伺服器上運行。
import com.amazonaws.auth.AWSCredentials;
import com.amazonaws.auth.BasicAWSCredentials;
import com.amazonaws.auth.AWSCredentialsProvider;
import com.amazonaws.regions.Regions;
import com.amazonaws.services.quicksight.AmazonQuickSight;
import com.amazonaws.services.quicksight.AmazonQuickSightClientBuilder;
import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForRegisteredUserRequest;
import com.amazonaws.services.quicksight.model.GenerateEmbedUrlForRegisteredUserResult;
import com.amazonaws.services.quicksight.model.RegisteredUserEmbeddingExperienceConfiguration;
import com.amazonaws.services.quicksight.model.RegisteredUserDashboardEmbeddingConfiguration;
/**
* Class to call QuickSight AWS SDK to get url for dashboard embedding.
*/
public class GetQuicksightEmbedUrlRegisteredUserDashboardEmbedding {
private final AmazonQuickSight quickSightClient;
public GetQuicksightEmbedUrlRegisteredUserDashboardEmbedding() {
this.quickSightClient = AmazonQuickSightClientBuilder
.standard()
.withRegion(Regions.US_EAST_1.getName())
.withCredentials(new AWSCredentialsProvider() {
@Override
public AWSCredentials getCredentials() {
// provide actual IAM access key and secret key here
return new BasicAWSCredentials("access-key", "secret-key");
}
@Override
public void refresh() {}
}
)
.build();
}
public String getQuicksightEmbedUrl(
final String accountId, // AWS Account ID
final String dashboardId, // Dashboard ID to embed
final List<String> allowedDomains, // Runtime allowed domain for embedding
final String userArn // Registered user arn to use for embedding. Refer to Get Embed Url section in developer portal to find out how to get user arn for a QuickSight user.
) throws Exception {
final RegisteredUserEmbeddingExperienceConfiguration experienceConfiguration = new RegisteredUserEmbeddingExperienceConfiguration()
.withDashboard(new RegisteredUserDashboardEmbeddingConfiguration().withInitialDashboardId(dashboardId));
final GenerateEmbedUrlForRegisteredUserRequest generateEmbedUrlForRegisteredUserRequest = new GenerateEmbedUrlForRegisteredUserRequest();
generateEmbedUrlForRegisteredUserRequest.setAwsAccountId(accountId);
generateEmbedUrlForRegisteredUserRequest.setUserArn(userArn);
generateEmbedUrlForRegisteredUserRequest.setAllowedDomains(allowedDomains);
generateEmbedUrlForRegisteredUserRequest.setExperienceConfiguration(experienceConfiguration);
final GenerateEmbedUrlForRegisteredUserResult generateEmbedUrlForRegisteredUserResult = quickSightClient.generateEmbedUrlForRegisteredUser(generateEmbedUrlForRegisteredUserRequest);
return generateEmbedUrlForRegisteredUserResult.getEmbedUrl();
}
}
global.fetch = require('node-fetch');
const AWS = require('aws-sdk');
function generateEmbedUrlForRegisteredUser(
accountId,
dashboardId,
openIdToken, // Cognito-based token
userArn, // registered user arn
roleArn, // IAM user role to use for embedding
sessionName, // Session name for the roleArn assume role
allowedDomains, // Runtime allowed domain for embedding
getEmbedUrlCallback, // GetEmbedUrl success callback method
errorCallback // GetEmbedUrl error callback method
) {
const stsClient = new AWS.STS();
let stsParams = {
RoleSessionName: sessionName,
WebIdentityToken: openIdToken,
RoleArn: roleArn
}
stsClient.assumeRoleWithWebIdentity(stsParams, function(err, data) {
if (err) {
console.log('Error assuming role');
console.log(err, err.stack);
errorCallback(err);
} else {
const getDashboardParams = {
"AwsAccountId": accountId,
"ExperienceConfiguration": {
"Dashboard": {
"InitialDashboardId": dashboardId
}
},
"UserArn": userArn,
"AllowedDomains": allowedDomains,
"SessionLifetimeInMinutes": 600
};
const quicksightClient = new AWS.QuickSight({
region: process.env.AWS_REGION,
credentials: {
accessKeyId: data.Credentials.AccessKeyId,
secretAccessKey: data.Credentials.SecretAccessKey,
sessionToken: data.Credentials.SessionToken,
expiration: data.Credentials.Expiration
}
});
quicksightClient.generateEmbedUrlForRegisteredUser(getDashboardParams, function(err, data) {
if (err) {
console.log(err, err.stack);
errorCallback(err);
} else {
const result = {
"statusCode": 200,
"headers": {
"Access-Control-Allow-Origin": "*", // Use your website domain to secure access to GetEmbedUrl API
"Access-Control-Allow-Headers": "Content-Type"
},
"body": JSON.stringify(data),
"isBase64Encoded": false
}
getEmbedUrlCallback(result);
}
});
}
});
}
import json
import boto3
from botocore.exceptions import ClientError
sts = boto3.client('sts')
# Function to generate embedded URL
# accountId: AWS account ID
# dashboardId: Dashboard ID to embed
# userArn: arn of registered user
# allowedDomains: Runtime allowed domain for embedding
# roleArn: IAM user role to use for embedding
# sessionName: session name for the roleArn assume role
def getEmbeddingURL(accountId, dashboardId, userArn, allowedDomains, roleArn, sessionName):
try:
assumedRole = sts.assume_role(
RoleArn = roleArn,
RoleSessionName = sessionName,
)
except ClientError as e:
return "Error assuming role: " + str(e)
else:
assumedRoleSession = boto3.Session(
aws_access_key_id = assumedRole['Credentials']['AccessKeyId'],
aws_secret_access_key = assumedRole['Credentials']['SecretAccessKey'],
aws_session_token = assumedRole['Credentials']['SessionToken'],
)
try:
quicksightClient = assumedRoleSession.client('quicksight', region_name='us-west-2')
response = quicksightClient.generate_embed_url_for_registered_user(
AwsAccountId=accountId,
ExperienceConfiguration = {
"Dashboard": {
"InitialDashboardId": dashboardId
}
},
UserArn = userArn,
AllowedDomains = allowedDomains,
SessionLifetimeInMinutes = 600
)
return {
'statusCode': 200,
'headers': {"Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type"},
'body': json.dumps(response),
'isBase64Encoded': bool('false')
}
except ClientError as e:
return "Error generating embedding url: " + str(e)
下列範例顯示您可以在應用程式伺服器上使用的 JavaScript (Node.js),以URL為內嵌儀表板產生 。您可以在URL網站或應用程式中使用此項目來顯示儀表板。
const AWS = require('aws-sdk');
const https = require('https');
var quicksightClient = new AWS.Service({
apiConfig: require('./quicksight-2018-04-01.min.json'),
region: 'us-east-1',
});
quicksightClient.generateEmbedUrlForRegisteredUser({
'AwsAccountId': '111122223333',
'ExperienceConfiguration': {
'Dashboard': {
'InitialDashboardId': '1c1fe111-e2d2-3b30-44ef-a0e111111cde'
}
},
'UserArn': 'REGISTERED_USER_ARN',
'AllowedDomains': allowedDomains,
'SessionLifetimeInMinutes': 100
}, function(err, data) {
console.log('Errors: ');
console.log(err);
console.log('Response: ');
console.log(data);
});
//The URL returned is over 900 characters. For this example, we've shortened the string for //readability and added ellipsis to indicate that it's incomplete. { Status: 200, EmbedUrl: 'https://
quicksightdomain
/embed/12345/dashboards/67890...' RequestId: '7bee030e-f191-45c4-97fe-d9faf0e03713' }
下列範例顯示 。NET/您可以在應用程式伺服器上使用的 C# 程式碼,為內嵌儀表板產生 URL 。您可以在URL網站或應用程式中使用此項目來顯示儀表板。
using System;
using Amazon.QuickSight;
using Amazon.QuickSight.Model;
namespace GenerateDashboardEmbedUrlForRegisteredUser
{
class Program
{
static void Main(string[] args)
{
var quicksightClient = new AmazonQuickSightClient(
AccessKey,
SecretAccessKey,
SessionToken,
Amazon.RegionEndpoint.USEast1);
try
{
RegisteredUserDashboardEmbeddingConfiguration registeredUserDashboardEmbeddingConfiguration
= new RegisteredUserDashboardEmbeddingConfiguration
{
InitialDashboardId = "dashboardId"
};
RegisteredUserEmbeddingExperienceConfiguration registeredUserEmbeddingExperienceConfiguration
= new RegisteredUserEmbeddingExperienceConfiguration
{
Dashboard = registeredUserDashboardEmbeddingConfiguration
};
Console.WriteLine(
quicksightClient.GenerateEmbedUrlForRegisteredUserAsync(new GenerateEmbedUrlForRegisteredUserRequest
{
AwsAccountId = "111122223333",
ExperienceConfiguration = registeredUserEmbeddingExperienceConfiguration,
UserArn = "REGISTERED_USER_ARN",
AllowedDomains = allowedDomains,
SessionLifetimeInMinutes = 100
}).Result.EmbedUrl
);
} catch (Exception ex) {
Console.WriteLine(ex.Message);
}
}
}
}
若要擔任角色,請選擇下列其中一個 AWS Security Token Service (AWS STS) API操作:
-
AssumeRole – 當您使用IAM身分擔任角色時,請使用此操作。
-
AssumeRoleWithWebIdentity – 當您使用 Web 身分提供者來驗證使用者時,請使用此操作。
-
AssumeRoleWithSaml – 當您使用 驗證使用者時SAML,請使用此操作。
下列範例顯示 CLI命令來設定IAM角色。角色需要啟用 quicksight:GenerateEmbedUrlForRegisteredUser
的許可。如果您在使用者第一次開啟儀表板時採取 just-in-time新增使用者的方法,該角色也需要為 啟用許可quicksight:RegisterUser
。
aws sts assume-role \ --role-arn "
arn:aws:iam::111122223333:role/embedding_quicksight_dashboard_role
" \ --role-session-namejohn.doe@example.com
assume-role
操作會傳回三個輸出參數:存取金鑰、私密金鑰和工作階段字符。
注意
若您呼叫 AssumeRole
操作時收到 ExpiredToken
錯誤,原因可能是先前的 SESSION TOKEN
仍在環境變數中。設定以下變數便可清除此錯誤:
-
AWS_ACCESS_KEY_ID
-
AWS_SECRET_ACCESS_KEY
-
AWS_SESSION_TOKEN
下列範例示範如何在 中設定這三個參數CLI。如果您使用 Microsoft Windows 電腦,請使用 set
,不要使用 export
。
export AWS_ACCESS_KEY_ID = "
access_key_from_assume_role
" export AWS_SECRET_ACCESS_KEY = "secret_key_from_assume_role
" export AWS_SESSION_TOKEN = "session_token_from_assume_role
"
對於瀏覽您網站的使用者,執行這些命令可將其角色工作階段 ID 設為 embedding_quicksight_dashboard_role/john.doe@example.com
。角色工作階段 ID 由來自 role-arn
和 role-session-name
值的角色名稱所組成。對每個使用者使用唯一的角色工作階段 ID,可確保為每個使用者設定適當的許可。還能避免對使用者存取進行任何調節。調節是一種安全功能,可防止同一使用者 QuickSight 從多個位置存取 。
角色工作階段 ID 也會在 QuickSight 中變成使用者名稱。您可以使用此模式 QuickSight 提前佈建使用者,或在使用者第一次存取儀表板時佈建他們。
下列範例顯示您可以用來佈建使用者的CLI命令。如需 RegisterUser、 DescribeUser和其他 QuickSight API 操作的詳細資訊,請參閱 QuickSight API 參考。
aws quicksight register-user \ --aws-account-id
111122223333
\ --namespacedefault
\ --identity-typeIAM
\ --iam-arn "arn:aws:iam::111122223333:role/embedding_quicksight_dashboard_role
" \ --user-roleREADER
\ --user-namejhnd
\ --session-name "john.doe@example.com
" \ --emailjohn.doe@example.com
\ --regionus-east-1
\ --custom-permissions-nameTeamA1
如果使用者是透過 Microsoft AD 進行身分驗證,您就不需要使用 RegisterUser
設定他們。他們應該會在第一次存取 QuickSight 時自動訂閱。對於 Microsoft AD 使用者,您可以使用 DescribeUser
取得使用者 ARN。
使用者第一次存取時 QuickSight,您也可以將此使用者新增至儀表板共用的群組。下列範例顯示將使用者新增至 群組的 CLI 命令。
aws quicksight create-group-membership \ --aws-account-id=
111122223333
\ --namespace=default \ --group-name=financeusers
\ --member-name="embedding_quicksight_dashboard_role/john.doe@example.com
"
您現在擁有的應用程式使用者,其也是 的使用者 QuickSight,以及有權存取儀表板的使用者。
最後,若要取得儀表板URL的簽署,generate-embed-url-for-registered-user
請從應用程式伺服器呼叫 。這會傳回可內嵌的儀表板 URL。下列範例示範如何使用伺服器端呼叫URL,為透過 AWS Managed Microsoft AD 或單一登入 (IAM 身分中心) 驗證的使用者產生內嵌儀表板的 。
aws quicksight generate-embed-url-for-registered-user \ --aws-account-id
111122223333
\ --session-lifetime-in-minutes600
\ --user-arnarn:aws:quicksight:us-east-1:111122223333:user/default/embedding_quicksight_visual_role/embeddingsession
\ --allowed-domains '["domain1
","domain2
"]' \ --experience-configuration Dashboard={InitialDashboardId=1a1ac2b2-3fc3-4b44-5e5d-c6db6778df89
}
如需使用此操作的詳細資訊,請參閱 GenerateEmbedUrlForRegisteredUser。 您可以在自己的程式碼中使用此操作和其他API操作。
步驟 3:內嵌儀表板 URL
在下一節中,您可以了解如何使用 Amazon QuickSight Embedding SDK
-
將儀表板放在HTML頁面上。
-
將參數傳遞到儀表板。
-
以針對您的應用程式而訂做的訊息來處理錯誤狀態。
呼叫 GenerateEmbedUrlForRegisteredUser
API操作來產生您可以內嵌在應用程式中URL的 。這URL有效時間為 5 分鐘,而產生的工作階段有效時間最長為 10 小時。API 操作為 URL 提供啟用單一登入工作階段auth_code
的 。
以下是 generate-embed-url-for-registered-user
的回應範例。
//The URL returned is over 900 characters. For this example, we've shortened the string for //readability and added ellipsis to indicate that it's incomplete. { "Status": "200", "EmbedUrl": "https://
quicksightdomain
/embed/12345/dashboards/67890..", "RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713" }
使用內嵌或將此儀表板新增至 iframe,將此儀表板QuickSight 內嵌SDK
要託管內嵌儀表板的網域必須位於允許清單上,即 Amazon QuickSight 訂閱的核准網域清單。這項要求將使未獲核准的網域無法託管內嵌儀表板,進而保護您的資料。如需為內嵌式儀表板新增域的詳細資訊,請參閱 允許在執行時間使用 列出網域 QuickSight API。
下列範例示範如何使用產生的 URL。此代碼在您的應用程式伺服器上生成。
<!DOCTYPE html>
<html>
<head>
<title>Dashboard Embedding Example</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
const embedDashboard = async() => {
const {
createEmbeddingContext,
} = QuickSightEmbedding;
const embeddingContext = await createEmbeddingContext({
onChange: (changeEvent, metadata) => {
console.log('Context received a change', changeEvent, metadata);
},
});
const frameOptions = {
url: '<YOUR_EMBED_URL>',
container: '#experience-container',
height: "700px",
width: "1000px",
onChange: (changeEvent, metadata) => {
switch (changeEvent.eventName) {
case 'FRAME_MOUNTED': {
console.log("Do something when the experience frame is mounted.");
break;
}
case 'FRAME_LOADED': {
console.log("Do something when the experience frame is loaded.");
break;
}
}
},
};
const contentOptions = {
parameters: [
{
Name: 'country',
Values: [
'United States'
],
},
{
Name: 'states',
Values: [
'California',
'Washington'
]
}
],
locale: "en-US",
sheetOptions: {
initialSheetId: '<YOUR_SHEETID>',
singleSheet: false,
emitSizeChangedEventOnSheetChange: false,
},
toolbarOptions: {
export: false,
undoRedo: false,
reset: false
},
attributionOptions: {
overlayContent: false,
},
onMessage: async (messageEvent, experienceMetadata) => {
switch (messageEvent.eventName) {
case 'CONTENT_LOADED': {
console.log("All visuals are loaded. The title of the document:", messageEvent.message.title);
break;
}
case 'ERROR_OCCURRED': {
console.log("Error occurred while rendering the experience. Error code:", messageEvent.message.errorCode);
break;
}
case 'PARAMETERS_CHANGED': {
console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters);
break;
}
case 'SELECTED_SHEET_CHANGED': {
console.log("Selected sheet changed. Selected sheet:", messageEvent.message.selectedSheet);
break;
}
case 'SIZE_CHANGED': {
console.log("Size changed. New dimensions:", messageEvent.message);
break;
}
case 'MODAL_OPENED': {
window.scrollTo({
top: 0 // iframe top position
});
break;
}
}
},
};
const embeddedDashboardExperience = await embeddingContext.embedDashboard(frameOptions, contentOptions);
const selectCountryElement = document.getElementById('country');
selectCountryElement.addEventListener('change', (event) => {
embeddedDashboardExperience.setParameters([
{
Name: 'country',
Values: event.target.value
}
]);
});
};
</script>
</head>
<body onload="embedDashboard()">
<span>
<label for="country">Country</label>
<select id="country" name="country">
<option value="United States">United States</option>
<option value="Mexico">Mexico</option>
<option value="Canada">Canada</option>
</select>
</span>
<div id="experience-container"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Basic Embed</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.15/dist/quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
var dashboard
function onDashboardLoad(payload) {
console.log("Do something when the dashboard is fully loaded.");
}
function onError(payload) {
console.log("Do something when the dashboard fails loading");
}
function embedDashboard() {
var containerDiv = document.getElementById("embeddingContainer");
var options = {
// replace this dummy url with the one generated via embedding API
url: "https://us-east-1.quicksight.aws.amazon.com/sn/dashboards/dashboardId?isauthcode=true&identityprovider=quicksight&code=authcode",
container: containerDiv,
parameters: {
country: "United States"
},
scrolling: "no",
height: "700px",
width: "1000px",
locale: "en-US",
footerPaddingEnabled: true
};
dashboard = QuickSightEmbedding.embedDashboard(options);
dashboard.on("error", onError);
dashboard.on("load", onDashboardLoad);
}
function onCountryChange(obj) {
dashboard.setParameters({country: obj.value});
}
</script>
</head>
<body onload="embedDashboard()">
<span>
<label for="country">Country</label>
<select id="country" name="country" onchange="onCountryChange(this)">
<option value="United States">United States</option>
<option value="Mexico">Mexico</option>
<option value="Canada">Canada</option>
</select>
</span>
<div id="embeddingContainer"></div>
</body>
</html>
若要讓此範例運作,請務必使用 Amazon QuickSight Embedding SDK 來載入您網站上的內嵌儀表板 JavaScript。為獲得您的版本,請執行以下其中一項操作:
-
從 下載 Amazon QuickSight EmbeddingSDK
GitHub。此儲存庫由一組 QuickSight 開發人員維護。 -
從 下載最新的內嵌SDK版本https://www.npmjs.com/package/amazon-quicksight-embedding-sdk
。 -
如果您使用
npm
做為 JavaScript 相依性,請執行下列命令來下載並安裝它。npm install amazon-quicksight-embedding-sdk