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 を x に使います。
  • rangeX/rangeY は数値の範囲です。ラベルを消しても軸線は残り、stroke="clear" で別に消します。重ならないラベルを選ぶため、表示を有効にしても全部出るとは限りません。
  • contentAnimation は文字、画像、構造データの遷移です。interpolate には Polyline の点数と closed、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

レイアウトを変えず全体を変形。移動はポイント、回転・傾きは度、倍率 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

兄弟 View の重なり順。大きい値ほど手前。

例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