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 には Polyline の点数と closed、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

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