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

LineChart

Постройте ряд данных с фактическими значениями x/y в виде кривой. Подходит для таких тенденций, как скорость и время, поддерживает диапазоны координат, оси и метки; недостающие значения y приведут к разрыву сегментов линий.

Пример

function main() {
  return (
    <LineChart
      data={[
        { value: { x: 0, y: 20 }, label: { x: '0s', y: '20' } },
        { value: { x: 10, y: 60 }, label: { x: '10s', y: '60' } },
      ]}
      rangeX={[0, 10]}
      rangeY={[0, 100]}
      showXLabels={true}
      showYLabels={true}
      stroke={$env.accent}
      xAxis={{ stroke: $env.foreground, lineWidth: 1 }}
    />
  );
}

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

  • value.x/y задаёт позиции, label.x/y — только текст. Сортировки по x нет; y=null разрывает линию. Скользящий график обновляет data и rangeX, например [текущиеСекунды−30,текущиеСекунды].
  • $data.history — последние 30 секунд от старых к новым, возможны пустота и пропуски. timestamp в миллисекундах, elapsed в секундах. Сохраняйте null-разрывы и берите elapsed.value, не индекс, для времени.
  • rangeX/rangeY ограничивают числа, не подписи. Скрытие подписей не скрывает оси: используйте stroke="clear". Для исключения наложений выбирается часть подписей, показ всех не гарантирован.
  • contentAnimation меняет текст, изображения и структурные данные. interpolate требует совпадения количества точек/closed Polyline, команд Path или структуры графика. При изменении структуры обновление мгновенное.

Свойства

dataReadonlyArray<ChartDataPoint>

Данные графика. value.x/y задаёт координаты, label.x/y — текст; y равное null разрывает линию.

Пример[{value: {x: 0, y: 12}, label: {x: "0s", y: "12"}}, {value: {x: 10, y: 24}, label: {x: "10s", y: "24"}}]
rangeX?ChartRange

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

Пример[0, 30]
rangeY?ChartRange

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

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

Показывать подписи оси. Нативная компоновка выбирает неперекрывающиеся подписи.

Примерtrue
showYLabels?boolean

Показывать подписи оси. Нативная компоновка выбирает неперекрывающиеся подписи.

Примерtrue
xAxis?ChartAxisStyle

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

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

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

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

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

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

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

Пример2
lineCap?"round" | "butt" | "square"

Конец линии: butt обрезает, square продлевает квадратом, round закругляет.

Пример"round"
lineJoin?"round" | "miter" | "bevel"

Форма стыков: miter, round или bevel.

Пример"round"
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?LineChartAnimation[]

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

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

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

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

function main() {
  const now = $data.current.elapsed?.value ?? 0;
  const data = $data.history
    .filter((sample) => sample.elapsed?.value != null)
    .map((sample) => ({
      value: { x: sample.elapsed.value, y: sample.speed?.value ?? null },
      label: {
        x: sample.elapsed.value.toFixed(0) + 's',
        y: sample.speed?.value == null ? '' : sample.speed.value.toFixed(0),
      },
    }));
  return (
    <LineChart
      data={data}
      rangeX={[now - 30, now]}
      rangeY={[0, 160]}
      stroke={$env.accent}
      xAxis={{ stroke: $env.foreground, lineWidth: 1 }}
      yAxis={{ stroke: 'clear' }}
    />
  );
}

Анимация

Анимация

widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeX.0rangeX.1rangeY.0rangeY.1xAxis.lineWidthxAxis.dashPhaseyAxis.lineWidthyAxis.dashPhasexAxis.strokeyAxis.stroke

При пропуске

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

СвойстваПри пропуске
data[]
showXLabelstrue
showYLabelstrue
lineWidth2
strokeHDR($env.dark ? 'white' : 'black')
xAxis{ stroke: HDR($env.foreground), lineWidth: 1 }
yAxis{ stroke: HDR($env.foreground), lineWidth: 1 }

$data · Данные о вождении

Анимация

BarChart

Color / Gradient

BarChart

Предыдущее

Общие типы

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

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

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