HistogramChart

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

`accountId` OBSOLÈTE numéro	Date limite de soumission : 1er novembre 2022 Le `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 = [ { 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, }, ], }, ];`
`fullHeight` booléen	Étend le graphique pour occuper toute la hauteur disponible.
`fullWidth` booléen	Étend le graphique pour occuper toute la largeur disponible.
`onClick` fonction
`onClickEvent` fonction	Ajoute un écouteur de clic qui se déclenche lorsque l'utilisateur clique sur l'événement correspondant.
`onClickHistogram` fonction	Ajoute un écouteur de clic qui se déclenche lorsque l'utilisateur clique sur l'histogramme correspondant.
`onHoverEvent` fonction	Ajoute un écouteur de survol qui se déclenche lorsque le curseur survole l'événement correspondant.
`onHoverHistogram` fonction	Ajoute un écouteur de survol qui se déclenche lorsque le curseur passe sur l'histogramme correspondant.
`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

fonction

fonction

fonction

fonction

fonction

chaîne

objet

Usage