はじめに
管理画面やダッシュボードを作っていると、「グラフを1つ入れたいだけなのに、チャートライブラリの選定と設定にまる1日溶けた」という経験はないでしょうか。Chart.jsやD3.jsは強力な反面、Vueのリアクティブなデータとうまく噛み合わせるにはラッパーの実装が必要になりがちです。
Vue Data Uiは、この「Vueとグラフライブラリの間の溝」をなくすために作られたVue 3専用のデータ可視化コンポーネント集です。ドーナツチャートから折れ線・棒グラフ、スパークライン、ヒートマップ、ワードクラウドまで、豊富な種類のチャートコンポーネントを<VueUiXxx />という形でそのままテンプレートに書けるのが最大の特徴です。
Vue Data Uiとは
Vue Data Uiは、"eloquent data storytelling"（雄弁なデータストーリーテリング）を掲げるオープンソースのVue 3コンポーネントライブラリです。開発元はgraphierosで、npmにはvue-data-uiとして公開されています。
ドーナツ・レーダー・XY（折れ線/棒/散布図）・ヒートマップ・ワードクラウド・ツリーマップといった本格的なチャートに加え、スパークラインなどのミニチャート、3Dバー、ダッシュボード構築用のユーティリティコンポーネントまで、非常に幅広いラインナップを1パッケージにまとめています。
主な特徴
- Vue専用設計 - すべてのコンポーネントがVue 3のコンポーネントとして提供されるため、
v-bindやv-forと組み合わせて自然にリアクティブなグラフを作れます - 豊富なチャート種別 - ドーナツ、XY（折れ線・棒・散布図の複合）、レーダー、ヒートマップ、ワードクラウド、ツリーマップなど多様な可視化表現をカバーします
dataset/configの分離設計 - データそのものはdataset、見た目や挙動はconfigに分けて渡す設計になっており、どのコンポーネントも同じ考え方で扱えます- ユニバーサルコンポーネント -
<VueDataUi component="VueUiXy" />のように、componentpropでチャート種別を動的に切り替えられる仕組みも用意されています - 豊富なカスタマイズ性 - スロットやフォーマッター、テーマ切り替えなど、見た目を細かく調整できるオプションが揃っています
インストール
npmやyarn、pnpmなど、お使いのパッケージマネージャーでインストールします。
npm install vue-data-ui
yarn add vue-data-ui
実際のプロジェクトで使う際は、コンポーネントに加えて共通スタイルシートも読み込んでおくのがおすすめです。
import { createApp } from 'vue'
import App from './App.vue'
import 'vue-data-ui/style.css'
createApp(App).mount('#app')
基本的な使い方
まずは最もシンプルな例として、VueUiDonutでドーナツチャートを描いてみましょう。datasetにはname（系列名）とvalues（数値の配列）を持つオブジェクトを並べるだけです。
datasetを書き換えるだけでグラフが即座に再描画されるので、APIから取得したデータをそのままバインドする感覚で使えます。
実践的なユースケース
折れ線・棒グラフを組み合わせた推移チャート
売上や訪問数など、時系列データを可視化したい場面ではVueUiXyが便利です。1つのdatasetの中で系列ごとにtype（bar / line / plot）を指定できるため、棒グラフと折れ線グラフを1つのチャートに重ねて表示できます。
棒グラフの系列と折れ線の系列を混在させられるので、「実績と目標を重ねて見せたい」といったダッシュボードによくある要件にそのまま対応できます。
カードに埋め込むミニ指標（スパークライン）
管理画面のKPIカードでは、数値の横に小さな推移グラフを添えたいことがよくあります。VueUiSparklineはperiodとvalueだけのシンプルなデータセットで、省スペースな推移表示を実現します。
チャート単体としてではなく、カードUIの一部品として埋め込みやすいのがスパークラインの強みです。
ユニバーサルコンポーネントでチャート種別を動的に切り替える
「ユーザーが表示形式を選べるダッシュボード」を作りたい場合、チャートごとにv-ifを並べるのは冗長になりがちです。Vue Data Uiが提供するVueDataUiコンポーネントを使えば、componentpropに文字列でチャート名を渡すだけで表示するコンポーネントを切り替えられます。
同じdatasetの形を保てるチャート同士であれば、componentの値を切り替えるだけで表示形式を変えられます。設定パネル付きのダッシュボードを作る際に、コンポーネントの出し分けロジックをシンプルに保てるのが便利なポイントです。
まとめ
Vue Data Uiは、Vue 3のコンポーネントとしてそのまま使える豊富なチャート群を提供してくれるライブラリです。datasetとconfigという一貫した設計のおかげで、ドーナツチャートも折れ線グラフもスパークラインも同じ感覚で扱えるため、チャートライブラリごとにAPIを覚え直す必要がありません。
今回紹介した例はごく一部で、レーダーチャートやヒートマップ、ワードクラウド、3Dバーなど他にも多くのコンポーネントが用意されています。Vueでダッシュボードや管理画面を作る機会があれば、まずは公式ドキュメントのコンポーネント一覧を眺めてみることをおすすめします。