Vue-cli(webpack)環境にChart.js(vue-chartjs)をインストールしてグラフを実装する方法

 着実にユーザーを増やし、今ではangular、Reactを凌ぐ存在になったと言っても過言ではないvus.jsですが。今回は簡単にグラフチャートを実装できるプラグイン「Chart.js」のvue用にラッピングされた「vue-chartjs」をvue-cli(webpack)環境にインストールして実装してみたいと思います。

環境

 環境は下記の通り。

今回の環境

  • Webpack環境(v4.29.6)
  • vue v2.9.6
  • Node.js v10.12.0

 なお、Webpackのインストール、構築方法は下記記事で紹介しています。

vue-chartjsのインストール

 インストールは、プロジェクトディレクトリ配下で下記コマンドを実行することでインストールできます。

 インストールが完了したら、「node_modules」ディレクトリに以下2つのディレクトリが出来ていると思うので、念の為確認しておきましょう。

利用したいグラフチャートのjsを作成する

 問題なくインストールが完了したら、利用したいグラフチャートのjsファイルを作成する。

 今回は、Lineチャートを利用してみたいと思います。

 まずは、Componentディレクトリに「LineChart.js」というファイルを作成して、下記のように記述します。

 インストールしたvue-chartjsをインポートしてextendしています。そして、mounted内でrenderChartメソッドを実行して、その中に諸々の値を設定しています。それぞれの設定値に関してはこちらのページを参照すると分かるかと思います。

コンポーネントを作成

 つづて、グラフチャートを実際に利用するコンポーネントファイルを作成します。

 今回は適当に「LineSample.vue」というコンポーネントファイルを作成し、下記のように記述します。

 見ての通りですが、先ほど作成した「LineChart.js」を読み込み、コンポーネント化して表示したい位置にLineChartタグを挿入するだけです。

 これだけで下記のようなグラフチャートを実装することができます。

まとめ

 ということで、今回はvue-cli(webpack)環境にvue-chartjsをインストールして実際に実装する方法を紹介しました。

 今回紹介したように、とても簡単にグラフチャートを使えるのでデータ処理系のサイト等では有効的に使えるのではないでしょうか。

 てことで、今回はここまで!また!

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です