コピペでできるVuejs × TypeScriptな環境でchartjsでのグラフ描画|Vuejs TypeScript chartjs

Pocket

Vuejs × TypeScriptな環境でchartjsを使う

Vuejs × TypeScriptな環境でchartjsを使ってグラフを描画してみる。コピペで実際にグラフ描画まで行けます。使う技術はVuejs・TypeScript・chartjsです。インストールからプログラムの書き方まで記載しています。

完成イメージはこちら

chartjs

棒と折れ線の複合グラフを描画する。

vueプロジェクトの作成

vueインストール

まずはvueのインストールをする

vueプロジェクトの作成

次にプロジェクトの作成

「chart」の部分がプロジェクト名

vueプロジェクト作成

Typescript を利用するために Manually select features を選択

vueプロジェクト作成

Typeスクリプトを選択(上下キーでカーソル移動してスペースで選択)

あとはお好みで選択してプロジェクトを作成する

vueプロジェクトの起動

上記コマンド実行後、「http://localhost:8080/」でアクセスできる。

アクセス時の画面は以下

プロジェクト起動

vue-chartjsのインストール

次に以下コマンドでchartjsをインストールする

vueファイルの作成

環境は整ったのでvueファイルを修正・作成していく

まず「App.vue」の修正。不要な記述を削除し、以下のようにする

次に「App.vue」から呼ばれる「components/HelloWorld.vue」ファイルの修正

不要な記述を削除し、グラフ描画に必要な値の設定を行い、次に作成する「components/Chart.vue」へ値を渡す。

最後に「components/HelloWorld.vue」から呼ばれる「components/Chart.vue」ファイルの作成。このファイルはchartjs描画用コンポーネントで、他のvue(例えばhoge.vue)からでも必要な値「chartOptions」「chartStyles」「chartData」を渡してあげればグラフの描画が可能。

完成! Vue・TypeScript・chartjsを使用したグラフ

chartjs