Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
Fase 3: Incorpora l'immagine URL
| Si applica a: Enterprise Edition |
| Destinatari: QuickSight sviluppatori Amazon |
Nella sezione seguente, puoi scoprire come utilizzare QuickSight Embedding SDK (JavaScript) per incorporare l'immagine del passaggio 2 nella pagina URL del tuo sito Web o dell'applicazione. ConSDK, è possibile effettuare le seguenti operazioni:
-
Posiziona l'immagine su una HTML pagina.
-
Passa i parametri all'elemento visivo.
-
Gestisci stati di errore con messaggi personalizzati per l'applicazione.
Chiama l'GenerateEmbedUrlForAnonymousUserAPIoperazione per generare il URL file che puoi incorporare nella tua app. URLÈ valido per 5 minuti e la sessione risultante è valida per 10 ore. L'APIoperazione fornisce un codice URL di autorizzazione (autenticazione) che abilita una sessione Single Sign-On.
Di seguito viene mostrata una risposta di esempio da generate-embed-url-for-anonymous-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"
}
Incorpora questa immagine nella tua pagina web utilizzando l' QuickSight incorporamento SDK o aggiungendola URL in un iframe. Se imposti un numero fisso di altezza e larghezza (in pixel), li QuickSight utilizza e non modifica la visualizzazione man mano che la finestra si ridimensiona. Se imposti un'altezza e una larghezza percentuali relative, QuickSight fornisce un layout dinamico che viene modificato al variare delle dimensioni della finestra. Utilizzando l' QuickSight incorporamentoSDK, è inoltre possibile controllare i parametri all'interno della visualizzazione e ricevere richiami in termini di completamento del caricamento visivo ed errori.
Il dominio che ospiterà gli elementi visivi incorporati deve essere incluso nell'elenco dei domini consentiti, l'elenco dei domini approvati per l'abbonamento. Amazon QuickSight Questo requisito protegge i tuoi dati impedendo ai domini non approvati di ospitare elementi visivi e pannelli di controllo incorporati. Per ulteriori informazioni sull'aggiunta di domini per gli elementi visivi e i pannelli di controllo incorporati, consulta Consenti l'inserimento di domini in fase di esecuzione con QuickSight API.
L'esempio seguente mostra come utilizzare il generatoURL. Questo codice si trova sul server delle applicazioni.
- 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>
Affinché questo esempio funzioni, assicurati di utilizzare Amazon QuickSight Embedding SDK per caricare la grafica incorporata sul tuo sito Web utilizzando JavaScript. Per ottenere la tua copia, procedi in uno dei seguenti modi:
