CapDrive
Руководство

BarChart

Отобразите каждый элемент данных в виде полосы, подходящей для сравнения категориальных значений. Его можно расположить горизонтально или вертикально, задать числовые диапазоны, метки категорий и числовые метки, а также поддерживать положительные и отрицательные значения.

Пример

function main() {
  return (
    <BarChart
      data={[
        { value: 30, label: 'A' },
        { value: 70, label: 'B' },
      ]}
      axis="vertical"
      rangeY={[0, 100]}
      showLabels={true}
      showValueLabels={true}
      background={$env.accent}
      cornerRadius={6}
      yAxis={{ stroke: $env.foreground, lineWidth: 1 }}
    />
  );
}

Использование

  • Элемент data — один столбец, категории идут по массиву, x не нужен. При horizontal диапазон значений всё равно rangeY. Автодиапазон включает ноль, отрицательные идут за базовую линию; background красит столбцы.
  • rangeX/rangeY ограничивают числа, не подписи. Скрытие подписей не скрывает оси: используйте stroke="clear". Для исключения наложений выбирается часть подписей, показ всех не гарантирован.
  • contentAnimation меняет текст, изображения и структурные данные. interpolate требует совпадения количества точек/closed Polyline, команд Path или структуры графика. При изменении структуры обновление мгновенное.

Свойства

dataReadonlyArray<BarChartDataPoint>

Категории в порядке массива. Каждый элемент содержит числовое значение и необязательную подпись.

Пример[{value: 10, label: "A"}, {value: 20, label: "B"}, {value: 30, label: "C"}]
axis?"horizontal" | "vertical"

Направление: vertical слева направо; horizontal сверху вниз.

Пример"vertical"
rangeY?ChartRange

Видимый диапазон [min, max]. Без него диапазон подбирается по данным и включает ноль.

Пример[0, 100]
showLabels?boolean

Показывать подписи категорий. Отсутствующие остаются пустыми; нативная компоновка предотвращает наложения.

Примерtrue
showValueLabels?boolean

Показывать автоматически созданные числовые подписи оси.

Примерtrue
barThickness?number | "auto"

Толщина столбцов в точках или auto по расстоянию между категориями.

Пример"auto"
xAxis?ChartAxisStyle

Горизонтальная ось внизу графика. По умолчанию основной цвет, ширина 1pt; stroke: clear скрывает линию.

Пример{stroke: HDR($env.foreground), lineWidth: 1}
yAxis?ChartAxisStyle

Вертикальная ось слева графика. По умолчанию основной цвет, ширина 1pt; stroke: clear скрывает линию.

Пример{stroke: HDR($env.foreground), lineWidth: 1}
background?Paint

Заливка каждого столбца. По умолчанию используется основной цвет темы.

ПримерHDR($env.dark ? "white" : "black")
cornerRadius?number

Радиус углов каждого столбца, ограниченный его размером.

Пример0
stroke?Paint

Цвет или градиент обводки; clear скрывает её.

Пример"clear"
lineWidth?number

Толщина линии в пунктах; 0 не рисует линию.

Пример2
strokePosition?"inside" | "center" | "outside"

Положение обводки относительно каждого столбца. По умолчанию inside.

Пример"inside"
dash?number[]

Чередующиеся длины штрихов и пробелов в пунктах; пустой массив даёт сплошную линию.

Пример[]
dashPhase?number

Смещение штрихового узора в пунктах.

Пример0
contentAnimation?ContentAnimation

Необязательный переход. interpolate требует одинакового числа категорий и направления; иначе обновляет сразу.

Пример{type: "interpolate", duration: 0.25}
Общие свойства
width?number | "auto" | "fill"

Ширина в пунктах, автоматический размер или заполнение родителя.

Пример"fill"
height?number | "auto" | "fill"

Высота в пунктах, автоматический размер или заполнение родителя.

Пример"fill"
x?number

Визуальное смещение в пунктах: x вправо, y вниз. Место в раскладке не меняется.

Пример0
y?number

Визуальное смещение в пунктах: x вправо, y вниз. Место в раскладке не меняется.

Пример0
transform?ViewTransform

Преобразование всего View без изменения раскладки. Сдвиг в пунктах, поворот/наклон в градусах, масштаб 1 без изменений, якоря 0–1.

Пример{rotation: 0}
opacity?number

Непрозрачность всего View: 0 прозрачно, 1 непрозрачно.

Пример1
clipped?boolean

Обрезать рисунок за границами View.

Примерfalse
clip?"rectangle" | "ellipse"

Форма обрезки rectangle или ellipse; Material также принимает false для отключения.

Пример"rectangle"
mask?View | null

View альфа-маски. По центру без влияния на компоновку; null отключает маску.

Пример<Circle width="fill" height="fill" background="white"/>
zIndex?number

Порядок среди соседей; большее значение выводится впереди.

Пример0
blur?number

Радиус размытия в пунктах; 0 отключает его.

Пример4
innerShadow?DrawingEffect

Цвет, непрозрачность, радиус размытия и смещение x/y эффекта; расстояния в пунктах.

Пример{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Цвет, непрозрачность, радиус размытия и смещение x/y эффекта; расстояния в пунктах.

Пример{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Цвет внешней тени.

ПримерHDR("black")
shadowOpacity?number

Непрозрачность тени 0–1; 0 скрывает её.

Пример0
shadowRadius?number

Радиус размытия внешней тени в пунктах.

Пример4
shadowX?number

Смещение тени в пунктах: x вправо, y вниз.

Пример0
shadowY?number

Смещение тени в пунктах: x вправо, y вниз.

Пример2
animations?BarChartAnimation[]

Анимация изменения свойства. duration/delay в секундах; from/to — границы; repeat/autoreverse — повторы, wrap — период.

Пример[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Стабильный идентификатор среди соседних элементов.

Практический пример

function main() {
  return (
    <BarChart
      width={260}
      height={160}
      axis="horizontal"
      rangeY={[-50, 100]}
      data={[
        { value: 80, label: 'A' },
        { value: -25, label: 'B' },
        { value: 45, label: 'C' },
      ]}
      showLabels={true}
      showValueLabels={true}
      background={$env.accent}
      cornerRadius={4}
      xAxis={{ stroke: $env.foreground, dash: [4, 3] }}
      yAxis={{ stroke: 'clear' }}
    />
  );
}

Анимация

Анимация

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYbarThicknessstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeY.0rangeY.1xAxis.lineWidthxAxis.dashPhaseyAxis.lineWidthyAxis.dashPhasexAxis.strokeyAxis.stroke

При пропуске

Таблица описывает проверенное поведение без свойства. Примеры не являются значениями по умолчанию. Фиксированный результат требует явных значений; размеры и цвета темы зависят от контекста.

СвойстваПри пропуске
data[]
axis"vertical"
showLabelstrue
showValueLabelstrue
cornerRadius0
strokePosition"inside"
backgroundHDR($env.dark ? 'white' : 'black')
xAxis{ stroke: HDR($env.foreground), lineWidth: 1 }
yAxis{ stroke: HDR($env.foreground), lineWidth: 1 }

LineChart

Color / Gradient

Path

Предыдущее

LineChart

Следующий шаг

На этой странице

ПримерИспользованиеСвойстваПрактический примерАнимацияПри пропускеСвязанные API