©SMSDataTechCorporation.
ホーム
やってみた
【学習アプリ開発記】Vue.jsとChart.jsを使ってグラフ描画してみた。

【学習アプリ開発記】Vue.jsとChart.jsを使ってグラフ描画してみた。

やってみた

はじめに

こんにちは！マーケターから未経験のエンジニアに転職した社員Tです。再びブログを執筆できる機会をいただき、とても嬉しく思います。
前回のブログから半年が経ちましたが、その間に学んだことや身につけた技術を引き続き皆さんと共有できたらと思っています。

今回は、Vue.jsと、Chart.jsを組み合わせて視覚的にデータを表現する方法にチャレンジしてみました！

本記事の対象の方

このブログ記事は、JavaScriptのフレームワークであるVue.jsを学びたい初学者や、実際にアプリケーションを開発したい方を対象にしています。
また、グラフやチャートを使ってデータを視覚化したい方に向けて、Chart.jsの魅力や具体的な使い方をご紹介します。

vue.jsとは？

Vue.jsは、JavaScriptのフレームワークのひとつで、HTMLとJavaScriptの間でデータの連携を行う役割を果たします。
詳しい説明については、過去のブログ記事をご参照ください。

vue.js環境構築

Vue.jsを使うための環境構築についても、過去のブログを参考にしてください。
具体的な手順を詳しく解説していますので、導入方法や初期設定の詳細を確認できます。

メリット

Chart.jsを使用することで、データを視覚的に表現することが可能になります。
そのメリットをいくつかご紹介します。

1. 簡単な導入と使いやすさ

シンプルなAPIで、初心者でもすぐに利用できるのが魅力です。

2. 豊富なチャートタイプ

折れ線グラフや円グラフなど、多彩なグラフを簡単に作成できます。

3. カスタマイズ性

デザインを統一しやすく、自由にカスタマイズが可能です。
そして、Vue.jsと組み合わせることで、さらに次のような利点があります。

4. リアクティブデータの自動反映

Vue.jsのリアクティブシステムを活用することで、データが更新されるたびにグラフも自動で再描画されます。
これにより、動的なデータ表示が簡単に実現します。

5. コンポーネントベースでの再利用性

Vue.jsでは、グラフをコンポーネントとして再利用できるため、プロジェクト全体で効率的にグラフ描画が行えます。

これらの組み合わせによって、ユーザーにとっては視覚的にわかりやすいデータ表示が可能になり、開発者にとっては効率的な実装が実現します！

Chart.js環境構築

Chart.jsを使用するには、以下の方法があります。

  • scriptタグを埋め込む
  • NPMを利用してインストール
  • CLIを利用してインストール(単一ファイルコンポーネントが利用可)

今回は、<body>終了タグの直後にscriptタグを挿入しました！

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1"></script>

この方法なら、すぐに使い始められるので、手軽にグラフを表示したい場合に便利です。

描画領域の準備

Chart.jsは、HTMLの<canvas>要素にグラフを描画します。まずは<canvas>要素をHTMLに追加します。ここでは、idとして”learningTimeChart”を指定しています。

<canvas id="learningTimeChart" class="chart"></canvas>

次に、canvas要素のコンテキストを取得して、描画のための準備をセットしていきます。

let canvas = document.getElementById('learningTimeChart');

グラフ描画エリア設定

Vue.jsでChart.jsを使用して、チャートを作成します。サンプルコードは以下の通りです。

var myLineChart = new Chart(ctx, {
  type: 'doughnut', // グラフの種類
  data: data,       // データ
  options: options // オプション設定
});

それぞれの設定項目の詳細を表形式でまとめました。

設定項目 設定内容
type 描画するグラフの種類
data ラベルとデータセット
options オプション設定

先ほど紹介したHTMLをもとに、scriptを記述してグラフを描いていきます。

グラフ描画の実践

円グラフを表示するサンプルを示します。

createChart(labels, data) {
  let canvas = document.getElementById('learningTimeChart');
  if (canvas) {
    let ctx2 = canvas.getContext('2d');
    if (ctx2) {
      if (this.learningTimeChart) {
        this.learningTimeChart.destroy();
      }

      this.learningTimeChart = new Chart(ctx2, {
        type: 'doughnut',
        data: {
          labels: labels,
          datasets: [{
            data: data,
            backgroundColor: ['#36A2EB', '#FF6384'],
            hoverBackgroundColor: ['#36A2EB', '#FF6384']
          }]
        },
        options: {
          cutout: '0%',
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              enabled: false
            },
            datalabels: {
              display: false
            }
          }
        }
      });

      this.isLoading = false;
    }
  }
},

以下のようなグラフが描画されます。

今回は、円グラフを使って目標時間と総学習時間を表示しています。

グラフのタイプとデータ設定

上記の表でもご説明した通り、グラフのタイプは、typeプロパティで指定します。今回の円グラフを描く際は、’doughnut’を指定します。
データはdataプロパティで設定し、Vue.jsのコンポーネントとしてグラフを作成することで、データが変更されるたびに自動的にグラフも再描画されます。

既存のグラフがある場合は、destroyメソッドを呼び出して破棄し、Chartコンストラクタを使用して新しいグラフを生成します。

今回の実装では、Axiosを使用してJSONファイルからデータを取得し、モックデータとして活用しています。

"learning_time_data": {
  "labels": ["学習時間", "残りの時間"],
  "data": [200, 120]
},

この方法により、リアルなAPIレスポンスを模倣でき、データがない状態でもスムーズに開発やテストが可能です。

実際の開発時には、学習時間を表示するグラフをコンポーネント化することで、異なるページで再利用が容易になり、プロパティを通じて異なるデータを渡すことで開発効率が向上します！

オプションの設定

options オブジェクトを使うことで、グラフの見た目や動作をカスタマイズできます。

  • cutout: 円グラフの中心の空間のサイズを指定
  • legend: 凡例の表示
  • tooltip: ツールチップの表示
  • datalabels: データラベルの表示

そのほかにも、スタイルの設定で背景色を変更したり、アニメーションを加えたりと、色々と楽しむことができます。

まとめ

プロジェクトで使う機会があったので、Chart.jsの使い方をまとめてみました。
これ一つで色々なグラフが生成できるのは本当に便利ですね！

今後もさまざまなグラフを作成していきたいと思います。
最後までお読みいただき、ありがとうございました！

参考サイト(公式)

筆者イメージ

筆者：K・T（20代）

所属：ハイブリット・マルチクラウド部

マーケターとしてWEB広告運用やアパレルブランドの運営に携わってきたが、エンジニアとしての新たな挑戦を決意した転職組。
好奇心が旺盛で、新しいことに挑戦する姿勢が彼女の魅力。
マーケター×エンジニアの強みを生かし、UI/UXの提案から実装まで幅広く対応し、彼女自身がブランドを育てているのだろうと思わせてくれる、そんな20代の乙女。

まずはお気軽にご相談ください
お問い合わせフォーム

その他のイベント・セミナー 一覧へ

CATEGORY