Vue3

本記事には以下の アップデート版があります。TypeScript を用いた、より網羅的な内容になっています。 https://www.harubears.com/series/vue3-charts-typescript/ Vue3 で "折れ線グラフ" 、 "棒グラフ" などの "チャート" を描画したいときに Vue3-Charts を使うことで簡単に実装することができます。今回は、 Vue CLI で作成した Vue3 プロジェクトで Vue3-Charts を用いて折れ線グラフ, 棒グラフ を作成する方法を紹介します。 Vue CLI プロジェクトの作成と Vue3 Charts のインストール Vue CLI プロジェクトの作成 まずは、ベースとなる Vue CLI プロジェクトを作成していきます。 vue create コマンドを使って以下のように Vue 3 のプロジェクトを作成します。 % vue create ? Please pick a preset: Default ( babel, eslint) ❯ Default (Vue 3 Preview) ( babel, eslint) Manually select features Vue3 Charts のインストール 公式サイトの情報に基づいて以下のようにインストールしていきます。 % npm install vue3-charts --save package.json の dependencies が以下のように更新されました。 事前準備は以上で終了です。それでは早速グラフを作成していきましょう。 折れ線グラフ, 棒グラフ の作成準備 グラフ表示用コンポーネントの作成 グラフを作成する前に、グラフを表示するためのコンポーネントを用意します。 components ディレクトリ配下に Charts.vue を新規作成し、それに合わせて App.vue の内容を変更します。 components / Charts.vue Charts App.vue import Charts from './components/Charts.vue' export default { name: 'App', components: { Charts } } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } ここまでの状態で npm run serve コマンドで起動してみます。 それではここにグラフを追加していきます。まずは折れ線グラフを追加してみます。 折れ線グラフ の実装 Getting Started どおりの実装 折れ線グラフ ( Line Chart ) については、こちらを参考に作成していきます。まずは何も考えずに Getting Started の内容で作成してみます。 components / Charts.vue import { defineComponent, ref } from 'vue' import { Chart, Grid, Line } from 'vue3-charts' import { plByMonth } from '@/data' export default defineComponent({ name: 'LineChart', components: { Chart, Grid, Line }, setup() { const data ref(plByMonth) const direction ref('horizontal') const margin ref({ left: 0, top: 20, right: 20, bottom: 0 }) return { data, direction, margin } } }) #app { color: #2ecc71 } data src ディレクトリ直下に data ファイルを忘れずに作成します。 export const plByMonth [ { name: 'Jan', pl: 1000, avg: 500, inc: 300 }, { name: 'Feb', pl: 2000, avg: 900, inc: 400 }, { name: 'Apr', pl: 400, avg: 400, inc: 500 }, { name: 'Mar', pl: 3100, avg: 1300, inc: 700 }, { name: 'May', pl: 200, avg: 100, inc: 200 }, { name: 'Jun', pl: 600, avg: 400, inc: 300 }, { name: 'Jul', pl: 500, avg: 90, inc: 100 } ] プロジェクトの構成は以下のようになっています。 折れ線グラフ の表示 この状態で起動してみます。ほんの少しのコード量ながらとてもきれいなグラフが描画されています。 理解を深めるために、このグラフを基にカスタマイズしてみます。 系列（折れ線）の追加 data には先程表示した折れ線のデータ以外にも系列として使えるデータがありますので、系列を追加してみます。 Charts.vue data から avg のデータを赤色で追加してみます。あわせて折れ線のタイプを natural として指定してみます。 折れ線グラフ の表示 緩やかなカーブで表現された赤色の折れ線グラフが追加されました。 色々なプロパティを試してみる こちらに記載されているプロパティを色々試してみます。先程追加した赤い折れ線を残し、新しい折れ線を追加してみます。 Charts.vue 折れ線グラフ の表示 ここでのポイントを整理します データの最大値に合わせて、グラフの最大値も調整される strokeWidth, strokeDasharray は数値（小数点）で指定 monotone は、2点間をなだらかにつなぎ、natural は系列全部をなだらかにつなぐ 棒グラフ の実装 公式ドキュメント通りの実装 棒グラフも公式ドキュメントで紹介されている通りに実装してみます。 Charts.vue Charts.vue の template 部分を以下のコードで差し替えてみます。 公式ドキュメントには誤記があるようですが、 script について、 “Line” とある部分は “Bar” に差し替えます。 import { defineComponent, ref } from "vue"; import { Chart, Grid, Bar } from "vue3-charts"; import { plByMonth } from "@/data"; export default defineComponent({ name: "LineChart", components: { Chart, Grid, Bar }, setup() { const data ref(plByMonth); const direction ref("horizontal"); const margin ref({ left: 0, top: 20, right: 20, bottom: 0, }); return { data, direction, margin }; }, }); 棒グラフ の表示 この状態で起動すると、以下のような棒グラフが描画されます。 棒グラフにもプロパティとして設定できるパラメータがあり、カスタマイズすることが可能です。 まとめ Vue.js を使ってグラフを作成できるといいなと思っていたところ、見つけた Vue3 Charts ですが、想像以上に簡単かつきれいなグラフを描画できました。今回紹介した "折れ線グラフ", "棒グラフ" 以外にも Area Graph （面グラフ）も作成できるようです。 Vue3-Charts を用いることで、Vue3 で各種グラフを作成することが可能 グラフ表示領域自体は Chart でパラメータを指定することでカスタマイズ可能 グラフそのものは Line, Bar, Area でパラメータを指定することでカスタマイズ可能 関連記事 https://www.harubears.com/tech/vue-js/bootstratp-with-vuecli-of-vue3/ 参照情報 Vue3-Charts

[Vue3] Vue3-Charts を使って、”折れ線グラフ” や “棒グラフ” といった “チャート” を作成する方法