• /
  • EnglishEspañolFrançais日本語한국어Português
  • Se connecterDémarrer

Cette traduction automatique est fournie pour votre commodité.

En cas d'incohérence entre la version anglaise et la version traduite, la version anglaise prévaudra. Veuillez visiter cette page pour plus d'informations.

Créer un problème

HeatmapChart

Crée un graphique de carte thermique. 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 { HeatmapChart } from 'nr1'

Exemples

Basique

<HeatmapChart accountIds={[1]} query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago FACET countryCode" />

Avec plusieurs comptes

<HeatmapChart accountIds={[1, 1067061]} query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago FACET countryCode" />

Remplir le conteneur

<HeatmapChart
  accountIds={[1]}
  query="SELECT histogram(duration, width:10, buckets:20) FROM PageView SINCE 1 month ago FACET countryCode"
  fullWidth
  fullHeight
/>

Avec des données personnalisées

function render() {
  const data = [
     {
       metadata: {
         id: 'series-1',
         name: 'Serie 1',
         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,
         },
       ],
     },
     {
       metadata: {
         id: 'series-2',
         name: 'Serie 2',
         viz: 'main',
       },
       data: [
         {
           x0: 0,
           x1: 1,
           y: 119,
         },
         {
           x0: 1,
           x1: 2,
           y: 1525,
         },
         {
           x0: 2,
           x1: 3,
           y: 1860,
         },
         {
           x0: 3,
           x1: 4,
           y: 2070,
         },
         {
           x0: 4,
           x1: 5,
           y: 1280,
         },
         {
           x0: 5,
           x1: 6,
           y: 1320,
         },
         {
           x0: 6,
           x1: 7,
           y: 888,
         },
         {
           x0: 7,
           x1: 8,
           y: 729,
         },
         {
           x0: 8,
           x1: 9,
           y: 432,
         },
         {
           x0: 9,
           x1: 310,
           y: 401,
         },
       ],
     },
   ];;




  return <HeatmapChart 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 = [
  {
    metadata: {
      id: 'series-1',
      name: 'Serie 1',
      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,
      },
    ],
  },
  {
    metadata: {
      id: 'series-2',
      name: 'Serie 2',
      viz: 'main',
    },
    data: [
      {
        x0: 0,
        x1: 1,
        y: 119,
      },
      {
        x0: 1,
        x1: 2,
        y: 1525,
      },
      {
        x0: 2,
        x1: 3,
        y: 1860,
      },
      {
        x0: 3,
        x1: 4,
        y: 2070,
      },
      {
        x0: 4,
        x1: 5,
        y: 1280,
      },
      {
        x0: 5,
        x1: 6,
        y: 1320,
      },
      {
        x0: 6,
        x1: 7,
        y: 888,
      },
      {
        x0: 7,
        x1: 8,
        y: 729,
      },
      {
        x0: 8,
        x1: 9,
        y: 432,
      },
      {
        x0: 9,
        x1: 310,
        y: 401,
      },
    ],
  },
];

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

onClickHeatmap

fonction

Ajoute un écouteur de clic qui se déclenche lorsque l'utilisateur clique sur la carte thermique correspondante.

onHoverHeatmap

fonction

Ajoute un écouteur de survol qui se déclenche lorsque le curseur passe sur la carte thermique correspondante.

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é.

Droits d'auteur © 2025 New Relic Inc.
RecrutementConditions de servicePolitique DMCAAvis de confidentialitéCookiesLoi britannique sur l'esclavage

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.