Crée un graphique à barres. 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.
Usage
import { BarChart } from 'nr1'Exemples
Basique
<BarChart accountIds={[1]} query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType" />Avec plusieurs comptes
<BarChart accountIds={[1, 1067061]} query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType" />Remplir le conteneur
<BarChart accountIds={[1]} query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType" fullWidth fullHeight/>Avec des données personnalisées
function render() { const data = [ { metadata: { id: 'series-1', name: 'Serie 1', color: '#a35ebf', viz: 'main', units_data: { y: 'BYTES', } }, data: [{ y: 128 }], }, { metadata: { id: 'series-2', name: 'Serie 2', color: '#85c956', viz: 'main', units_data: { y: 'BYTES', } }, data: [{ y: 256 }], }, { metadata: { id: 'series-3', name: 'Serie 3', color: '#f86e40', viz: 'main', units_data: { y: 'BYTES', } }, data: [{ y: 300 }], }, { metadata: { id: 'series-4', name: 'Serie 4', color: '#c21684', viz: 'main', units_data: { y: 'BYTES', } }, data: [{ y: 450 }], }, { metadata: { id: 'series-5', name: 'Serie 5', color: '#51c9b7', viz: 'main', units_data: { y: 'BYTES', } }, data: [{ y: 170 }], }, { metadata: { id: 'series-6', name: 'Serie 6', color: '#48d2f0', viz: 'main', units_data: { y: 'BYTES', } }, data: [{ y: 200 }], }, ];;
return <BarChart 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 la barre correspondante. |
fonction | Ajoute un écouteur de survol qui se déclenche lorsque le curseur passe sur la barre correspondante. |
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é. |