JsonChart

JsonChart

Crée un graphique JSON. 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 { JsonChart } from 'nr1'

Exemples

Basique

<JsonChart accountIds={[1]} query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType" />

Avec plusieurs comptes

<JsonChart accountIds={[1, 1067061]} query="SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType" />

Remplir le conteneur

<JsonChart
  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 = {
     "id": 1,
     "name": "Foo",
     "price": 123,
     "tags": [
       "Bar",
       "Eek"
     ],
     "stock": {
       "warehouse": 300,
       "retail": 20
     }
   };;


  return <JsonChart data={data} fullWidth />;
}

Accessoires

`accountId` OBSOLÈTE numéro	Date limite de soumission : 1er novembre 2022 L'accountId est obsolète, utilisez plutôt accountIds Définit l'ID de compte pour effectuer la requête.
`accountIds` nombre[]	Définit les ID de compte pour effectuer la requête.
`className` chaîne	Ajoute les noms de classe au composant.
`data` 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. `const data = { id: 1, name: 'Foo', price: 123, tags: ['Bar', 'Eek'], stock: { warehouse: 300, retail: 20, }, };`
`fullHeight` booléen	Étend le graphique pour occuper toute la hauteur disponible.
`fullWidth` booléen	Étend le graphique pour occuper toute la largeur disponible.
`query` chaîne	Requête NRQL utilisée pour récupérer des données. La requête est exécutée sur le `accountIds` fourni.
`style` objet	Style en ligne pour un style personnalisé.

Cette traduction automatique est fournie pour votre commodité.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Exemples

Basique

Avec plusieurs comptes

Remplir le conteneur

Avec des données personnalisées

Accessoires

OBSOLÈTE

numéro

Date limite de soumission : 1er novembre 2022

nombre[]

chaîne

objet[]

booléen

booléen

chaîne

objet

Usage