ChartGroup

ChartGroup

Regroupe différents types de graphiques afin qu'ils puissent effectuer des actions tous ensemble, comme déplacer l'aiguille en fonction de leurs axes x, afficher l'info-bulle de la série correspondante ou griser la zone sélectionnée dans tous les graphiques en même temps.

Le composant agit comme un fragment React ; il ne rendra pas de tag supplémentaire dans le DOM (il permet uniquement le regroupement de tous les graphiques qu'il contient). Cela signifie que ce composant, contrairement à d'autres, n'accepte pas les balises className ou style.

Usage

import { ChartGroup } from 'nr1'

Exemples

Basique

function render() {
  const query =
    'SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType';
  const chartStyle = { height: 200 };

  return (
    <ChartGroup>
      <AreaChart style={chartStyle} accountIds={[1]} query={query} />
      <LineChart style={chartStyle} accountIds={[1, 1067061]} query={query} />
      <ScatterChart style={chartStyle} accountIds={[1]} query={query} />
    </ChartGroup>
  );
}

Remplir le conteneur

function render() {
  const query =
    'SELECT count(*) FROM `Synthetics` SINCE 1 DAY AGO TIMESERIES AUTO FACET jobType';
  const chartStyle = { height: 200 };

  return (
    <ChartGroup>
      <AreaChart
        style={chartStyle}
        accountIds={[1]}
        query={query}
        fullWidth
        fullHeight
      />
      <LineChart
        style={chartStyle}
        accountIds={[1, 1067061]}
        query={query}
        fullWidth
        fullHeight
      />
      <ScatterChart
        style={chartStyle}
        accountIds={[1]}
        query={query}
        fullWidth
        fullHeight
      />
    </ChartGroup>
  );
}

Accessoires

children

OBLIGATOIRE

nœud

Contenu arbitraire. Tous les graphiques à l'intérieur de ChartGroup communiquent entre eux.

Cette traduction automatique est fournie pour votre commodité.