Utilizzo di Highcharts

Usa gli elementi visivi Highcharts per creare tipi di grafici ed elementi visivi personalizzati che utilizzano la libreria Highcharts Core. Gli elementi visivi Highcharts forniscono agli autori di QuickSight l'accesso diretto all'API Highcharts.

Per configurare un elemento visivo Highcharts, gli autori di QuickSight devono aggiungere uno schema JSON Highcharts all'elemento visivo in QuickSight. Gli autori possono utilizzare le espressioni QuickSight per fare riferimento ai campi QuickSight e alle opzioni di formattazione nello schema JSON utilizzato per generare l'elemento visivo Highcharts. L'editor Codice del grafico JSON fornisce assistenza contestuale per il completamento automatico e la convalida in tempo reale per garantire che gli schemi JSON di input siano configurati correttamente. Per mantenere la sicurezza, l'editor di elementi visivi Highcharts non accetta l'immissione di codice CSS, JavaScript o HTML.

Per ulteriori informazioni sugli elementi visivi Highcharts in Amazon QuickSight, consulta la Guida rapida per gli elementi visivi Highcharts in DemoCentral.

L'immagine seguente mostra l'icona Highcharts in QuickSight.

L'immagine seguente mostra un grafico a rossetti configurato nell'editor Codice del grafico JSON di un elemento visivo Highcharts in QuickSight.

Per altri esempi di elementi visivi che è possibile creare con l'elemento visivo Highcharts in QuickSight, consulta le demo di Highcharts.

Considerazioni

Prima di iniziare a creare elementi visivi Highcharts in Amazon QuickSight, esamina le seguenti limitazioni che si applicano a tali elementi.

Creazione di un elemento visivo Highcharts

Utilizza la procedura seguente per creare un elemento visivo Highcharts in Amazon QuickSight.

Quando sei soddisfatto dell'elemento visivo renderizzato, chiudi il riquadro delle proprietà. Per ulteriori informazioni sulle espressioni specifiche di QuickSight che possono essere utilizzate per configurare un elemento visivo Highcharts, vedere Linguaggio di espressione JSON di Amazon QuickSight per elementi visivi Highcharts.

Funzionalità interattive di Highchart

Le visualizzazioni Highchart in Amazon QuickSight supportano azioni personalizzate, evidenziazione e coerenze cromatiche di campo personalizzate, consentendoti di creare grafici interattivi e visivamente coerenti che si integrano perfettamente con altri elementi visivi QuickSight.

Operazioni personalizzate

Con le azioni personalizzate, puoi definire comportamenti specifici per qualsiasi punto dati nelle visualizzazioni Highchart. Questa funzionalità si integra perfettamente con il framework di azioni esistente di QuickSight, consentendoti di creare grafici interattivi che rispondono ai clic degli utenti. Il sistema attualmente supporta la selezione di un singolo punto dati, offrendo un controllo preciso sulle interazioni degli utenti. Le azioni personalizzate possono essere implementate su vari tipi di grafici, tra cui grafici a linee, grafici a barre e grafici a barre in pila, tra gli altri.

Per implementare azioni personalizzate, dovrai modificare la configurazione JSON di Highcharts. Aggiungi un blocco di eventi alla configurazione della tua serie, specificando l'evento di clic e l'azione corrispondente. Per esempio:

{
  "series": [{
    "type": "line",
    "data": ["getColumn", 1],
    "name": "value",
    "events": {
      "click": [
        "triggerClick", { "rowIndex": "point.index" }
      ]
    }
}]

Questa configurazione abilita gli eventi di clic sui punti dati del grafico, permettendo a QuickSight di gestire azioni personalizzate in base ai dati selezionati.

Evidenziazione tra elementi visivi

L'evidenziazione tra elementi visivi migliora l'interattività dei pannelli di controllo creando connessioni visive tra diversi grafici. Quando un utente seleziona elementi in un grafico, gli elementi correlati in altri elementi visivi vengono evidenziati automaticamente, mentre gli elementi non correlati sono oscurati. Questa funzionalità consente agli utenti di identificare rapidamente relazioni e modelli tra più visualizzazioni, migliorando la comprensione e l'analisi dei dati.

Per abilitare l'evidenziazione tra elementi visivi e mantenere la coerenza dei colori dei campi, utilizza la clausola quicksight nella configurazione JSON di Highcharts. Questa clausola funge da ponte tra il rendering di Highcharts e il sistema di interazione visiva di QuickSight. Di seguito è riportato un esempio di come configurarla:

{
  "quicksight": {
    "pointRender": ["updatePointAttributes", {
      "opacity": ["case", 
        ["dataMarkMatch", ["getColumnName", 0], "series.name"],
        1,  // Full opacity for matching elements
        0.1 // Dim non-matching elements
      ],
      "color": ["getColumnColorOverrides", ["getColumnName", 0], "series.name"]
    }]
  }
}

Questa configurazione utilizza il linguaggio di espressione JSON di QuickSight per modificare dinamicamente proprietà visive come opacità e colore in base alle interazioni dell'utente e agli schemi di colori predefiniti.

Per scenari più complessi, puoi impostare l'evidenziazione sulla base di più condizioni. Ciò consente un'interattività più sfumata nelle visualizzazioni. L'esempio seguente evidenzia gli elementi in base al trimestre o al giorno della settimana:

{
  "quicksight": {
    "pointRender": ["updatePointAttributes", {
      "opacity": ["case",
        ["||",
          ["dataMarkMatch", "quarter", "series.name"],
          ["dataMarkMatch", "day_of_week", "point.name"]
        ],
        1,  // Full opacity for matching elements
        0.1 // Dim non-matching elements
      ],
    }]
  }
}

Coerenza cromatica a livello di campo

Mantenere la coerenza visiva in tutto il pannello di controllo è fondamentale per un'interpretazione efficace dei dati. La funzionalità di coerenza cromatica a livello di campo garantisce che i colori assegnati a dimensioni specifiche persistano in tutti gli elementi visivi del pannello di controllo. Questa coerenza aiuta gli utenti a riconoscere e tenere traccia rapidamente di particolari categorie di dati su diversi tipi e visualizzazioni di grafici, migliorando l'esperienza utente complessiva e la comprensione dei dati.