Crée un histogramme. Les données peuvent être obtenues en effectuant une requête NRQL sur un compte particulier ou elles peuvent être transmises via la propriété data.
Le format data est une série d'objets, chacun contenant metadata et data. Chaque data contient à la fois les valeurs de ce point et les clés x et y utilisées pour tracer le graphique.
Si vous souhaitez afficher un histogramme avec plusieurs séries, pensez à utiliser HeatmapChart.
Usage
import { HistogramChart } from 'nr1'Exemples
Basique
<HistogramChart accountIds={[1]} query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago" />Avec plusieurs comptes
<HistogramChart accountIds={[1, 1067061]} query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago" />Remplir le conteneur
<HistogramChart accountIds={[1]} query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago" fullWidth fullHeight/>Avec des données personnalisées
function render() { const data = [ { metadata: { id: 'series-1', name: 'Serie 1', color: '#a35ebf', viz: 'main', }, data: [ { x0: 0, x1: 1, y: 221, }, { x0: 1, x1: 2, y: 581, }, { x0: 2, x1: 3, y: 1330, }, { x0: 3, x1: 4, y: 2220, }, { x0: 4, x1: 5, y: 1810, }, { x0: 5, x1: 6, y: 1290, }, { x0: 6, x1: 7, y: 895, }, { x0: 7, x1: 8, y: 755, }, { x0: 8, x1: 9, y: 460, }, { x0: 9, x1: 310, y: 414, }, ], }, ];;
return <HistogramChart data={data} fullWidth />;}Accessoires
OBSOLÈTEnuméro | Date limite de soumission : 1er novembre 2022L'accountId est obsolète, utilisez plutôt accountIds Définit l'ID de compte pour effectuer la requête. |
nombre[] | Définit les ID de compte pour effectuer la requête. |
chaîne | Ajoute les noms de classe au composant. |
objet[] | Les données sont un ensemble d'objets où chaque objet représente une série à dessiner. Chaque série comprend des métadonnées de visualisation et un éventail de points de données. |
booléen | Étend le graphique pour occuper toute la hauteur disponible. |
booléen | Étend le graphique pour occuper toute la largeur disponible. |
fonction | |
fonction | Ajoute un écouteur de clic qui se déclenche lorsque l'utilisateur clique sur l'événement correspondant. |
fonction | Ajoute un écouteur de clic qui se déclenche lorsque l'utilisateur clique sur l'histogramme correspondant. |
fonction | Ajoute un écouteur de survol qui se déclenche lorsque le curseur survole l'événement correspondant. |
fonction | Ajoute un écouteur de survol qui se déclenche lorsque le curseur passe sur l'histogramme correspondant. |
chaîne | Requête NRQL utilisée pour récupérer des données. La requête est exécutée sur le |
objet | Style en ligne pour un style personnalisé. |