本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。
步驟 3：嵌入視覺效果 URL
在以下部分中，您可以了解如何使用 Amazon QuickSight 嵌入 SDK (JavaScript) 在您的網站或應用程式頁面中嵌入步驟 3 的視覺效URL果。使用SDK，您可以執行下列動作：
-
將視覺效果置於HTML頁面上。
-
將參數傳遞到視覺效果中。
-
以針對您的應用程式而訂做的訊息來處理錯誤狀態。
調用該GenerateEmbedUrlForRegisteredUserAPI操作以生成可以嵌入到應用程序中的操作。URL這個URL有效時間為 5 分鐘，產生的工作階段有效期最長為 10 小時。auth_code此API作業提供了啟URL用單一登入工作階段的。
以下是 generate-embed-url-for-registered-user 的回應範例。此範例quicksightdomain
//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/sheets/12345/visuals/67890...",
"RequestId": "7bee030e-f191-45c4-97fe-d9faf0e03713"
}
通過使用嵌QuickSight 入SDK或將其添加到 iframe 中URL將此視覺效果嵌入到您的網頁中。如果您設置了固定的高度和寬度數字（以像素為單位），請 QuickSight 使用這些數字，並且在窗口調整大小時不會更改視覺效果。如果您設定了相對百分比高度和寬度，則會 QuickSight 提供隨視窗大小變更而修改的自適應版面配置。透過使用 Amazon QuickSight 嵌入SDK，您也可以在視覺效果中控制參數，並在頁面載入完成和錯誤方面接收回呼。
要託管內嵌視覺效果和儀表板的網域必須位於允許清單中，也就是您 Amazon QuickSight 訂閱的核准網域清單。這項要求將使未獲核准的域無法託管內嵌視覺效果和儀表板，進而保護您的資料。如需為內嵌視覺效果和儀表板新增域的詳細資訊，請參閱 允許在執行階段列出網域 QuickSight API。
下面的例子演示了如何使用生成的URL。此代碼在您的應用程式伺服器上生成。
- SDK 2.0
-
<!DOCTYPE html>
<html>
<head>
<title>Visual 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 embedVisual = 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>", // replace this value with the url generated via embedding API
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",
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 occured while rendering the experience. Error code:", messageEvent.message.errorCode);
break;
}
case 'PARAMETERS_CHANGED': {
console.log("Parameters changed. Changed parameters:", messageEvent.message.changedParameters);
break;
}
case 'SIZE_CHANGED': {
console.log("Size changed. New dimensions:", messageEvent.message);
break;
}
}
},
};
const embeddedVisualExperience = await embeddingContext.embedVisual(frameOptions, contentOptions);
const selectCountryElement = document.getElementById('country');
selectCountryElement.addEventListener('change', (event) => {
embeddedVisualExperience.setParameters([
{
Name: 'country',
Values: event.target.value
}
]);
});
};
</script>
</head>
<body onload="embedVisual()">
<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>
- SDK 1.0
-
<!DOCTYPE html>
<html>
<head>
<title>Visual Embedding Example</title>
<!-- You can download the latest QuickSight embedding SDK version from https://www.npmjs.com/package/amazon-quicksight-embedding-sdk -->
<!-- Or you can do "npm install amazon-quicksight-embedding-sdk", if you use npm for javascript dependencies -->
<script src="./quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
let embeddedVisualExperience;
function onVisualLoad(payload) {
console.log("Do something when the visual is fully loaded.");
}
function onError(payload) {
console.log("Do something when the visual fails loading");
}
function embedVisual() {
const containerDiv = document.getElementById("embeddingContainer");
const options = {
url: "<YOUR_EMBED_URL>", // replace this value with the url generated via embedding API
container: containerDiv,
parameters: {
country: "United States"
},
height: "700px",
width: "1000px",
locale: "en-US"
};
embeddedVisualExperience = QuickSightEmbedding.embedVisual(options);
embeddedVisualExperience.on("error", onError);
embeddedVisualExperience.on("load", onVisualLoad);
}
function onCountryChange(obj) {
embeddedVisualExperience.setParameters({country: obj.value});
}
</script>
</head>
<body onload="embedVisual()">
<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 嵌入將內嵌視覺效果載入SDK到您的網站上 JavaScript。為獲得您的版本，請執行以下其中一項操作：
