Statistic 統計数値

LhStatistic は統計数値の表示に使用します。精度、桁区切り、プレフィックス・サフィックスに対応しています。

基本的な使い方

タイトル + 数値

年間アクセス数

2,384,712

<script setup lang="ts">
</script>

<template>
  <LhStatistic title="年間アクセス数" :value="2384712" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="年間アクセス数" :value="2384712" />
</template>

精度と区切り文字

precision で小数桁を、separator で桁区切りを制御（空文字でグループ化を無効化）

評価

4.85

番号

8899001

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="評価" :value="4.8471" :precision="2" />
    <LhStatistic title="番号" :value="8899001" separator="" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="評価" :value="4.8471" :precision="2" />
    <LhStatistic title="番号" :value="8899001" separator="" />
  </div>
</template>

プレフィックスとサフィックス

prefix / suffix または同名スロット

取引額

¥128,600元

成長率

12.6%

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="取引額" :value="128600" prefix="¥" suffix="元" />
    <LhStatistic title="成長率" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="取引額" :value="128600" prefix="¥" suffix="元" />
    <LhStatistic title="成長率" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

数値以外のテキスト

value に解析できない文字列を渡すとそのまま表示されます。巨大な数値や特殊なテキストに利用できます。

文字列 value

星

数え切れない

<script setup lang="ts">
</script>

<template>
  <LhStatistic title="星" value="数え切れない" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="星" value="数え切れない" />
</template>

API

Props

プロパティ名	説明	型	デフォルト値
title	数値のタイトル	string	—
value	統計数値。文字列形式なら巨大な数値や記号付きテキストも扱える	string | number	0
precision	小数精度	number	0
separator	桁区切り文字。空文字でグループ化を無効化	string	','
prefix	数値のプレフィックス（通貨記号など）	string	—
suffix	数値のサフィックス（単位など）	string	—
sx	sx クイックレイアウトプロパティ	LhSxProps	—

Slots

スロット名	説明
title	タイトルをカスタマイズ
prefix	プレフィックスをカスタマイズ
suffix	サフィックスをカスタマイズ

アクセシビリティ

• 数値部分に aria-live="polite" があり、value が変化するとスクリーンリーダーが新しい値を穏やかに読み上げる
• タイトル、プレフィックス、サフィックスはすべて通常テキストでそのまま読み上げ可能

型定義

本コンポーネントが外部にエクスポートする TypeScript 型構造は以下のとおりです（packages/components/statistic/src/types.ts および @lh-ui/share/core/* ソースから自動抽出。各エントリをクリックすると完全な定義を確認できます。プロパティの説明は上記の Props 表を参照してください）：

LhStatisticProps

export interface LhStatisticProps {
  /** 数値のタイトル（数値の上に表示） */
  title?: string
  /** 統計数値。文字列形式なら巨大な数値や記号付きテキストも扱える */
  value: number | string
  /** 小数精度 */
  precision?: number
  /** 桁区切り文字。空文字でグループ化を無効化 */
  separator?: string
  /** 数値のプレフィックス（通貨記号など） */
  prefix?: string
  /** 数値のサフィックス（単位など） */
  suffix?: string
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}