Изучение различных методов создания диаграмм с областями с помощью повторных диаграмм - Fcodenotes

Диаграммы с областями – это мощные инструменты визуализации данных, которые позволяют нам представлять данные с течением времени или по различным категориям. В этой статье блога мы рассмотрим различные методы создания диаграмм с областями с помощью Recharts, популярной библиотеки диаграмм для React. Мы рассмотрим различные подходы и предоставим примеры кода, которые помогут вам начать создавать потрясающие диаграммы с областями в ваших веб-приложениях.

Методы:

Базовая диаграмма с областями:
Базовая диаграмма с областями отображает одну область, представляющую данные. Вот пример того, как создать базовую диаграмму с областями с помощью Recharts:

import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  { name: 'Mar', value: 600 },
  // ... add more data points
];
const AreaChartExample = () => (
  <AreaChart width={400} height={300} data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Area type="monotone" dataKey="value" fill="#8884d8" stroke="#8884d8" />
  </AreaChart>
);

Диаграмма с областями с накоплением.
Диаграмма с областями с накоплением отображает несколько областей, расположенных друг над другом. Это полезно для визуализации вклада отдельных рядов данных в общую тенденцию. Вот пример создания составной диаграммы с областями:

import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
const data = [
  { name: 'Jan', series1: 400, series2: 300, series3: 200 },
  { name: 'Feb', series1: 300, series2: 500, series3: 100 },
  { name: 'Mar', series1: 600, series2: 400, series3: 300 },
  // ... add more data points
];
const StackedAreaChartExample = () => (
  <AreaChart width={400} height={300} data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Area type="monotone" dataKey="series1" stackId="1" fill="#8884d8" stroke="#8884d8" />
    <Area type="monotone" dataKey="series2" stackId="1" fill="#83a6ed" stroke="#83a6ed" />
    <Area type="monotone" dataKey="series3" stackId="1" fill="#8dd1e1" stroke="#8dd1e1" />
  </AreaChart>
);

Диаграмма с гладкими областями.
Диаграмма с гладкими областями применяет алгоритмы сглаживания для создания более плавной кривой. Он может быть визуально привлекательным и полезным для отображения тенденций. Вот пример:

import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  { name: 'Mar', value: 600 },
  // ... add more data points
];
const SmoothAreaChartExample = () => (
  <AreaChart width={400} height={300} data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Area type="monotone" dataKey="value" fill="#8884d8" stroke="#8884d8" isAnimationActive={false} />
  </AreaChart>
);

Диаграмма с составными процентами площадей.
Сложенная процентная диаграмма с площадями нормализует данные, чтобы показать относительный вклад каждой серии в процентах от целого. Это полезно для сравнения пропорционального распределения различных категорий. Вот пример:

import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
const data = [
  { name: 'Jan', series1: 400, series2: 300, series3: 200 },
  { name: 'Feb', series1: 300, series2: 500, series3: 100 },
  { name: 'Mar', series1: 600, series2: 400, series3: 300 },
  // ... add more data points
];
const StackedPercentAreaChartExample = () => (
  <AreaChart width={400} height={300} data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis tickFormatter={(value) => `${value}%`} />
    <Tooltip formatter={(value) => `${value}%`} />
    <Legend />
    <Area type="monotone" dataKey="series1" stackId="1" fill="#8884d8" stroke="#8884d8" />
    <Area type="monotone" dataKey="series2" stackId="1" fill="#83a6ed" stroke="#83a6ed" />
    <Area type="monotone" dataKey="series3" stackId="1" fill="#8dd1e1" stroke="#8dd1e1" />
  </AreaChart>
);

Recharts предоставляет универсальный набор инструментов для создания различных типов диаграмм с областями. В этой статье мы рассмотрели различные методы, в том числе базовые диаграммы с областями, диаграммы с областями с накоплением, диаграммы с гладкими областями и диаграммы с процентами площадей с накоплением. Используя эти методы, вы можете эффективно визуализировать тенденции и сравнения данных в своих веб-приложениях.