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

Pocket

Vuejs × TypeScriptな環境でchartjsを使う

Vuejs × TypeScriptな環境でchartjsを使ってグラフを描画してみる

完成イメージはこちら

chartjs

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

プロジェクトの作成

インストール

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

プロジェクトの作成

次にプロジェクトの作成

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

vueプロジェクト作成

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

vueプロジェクト作成

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

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

プロジェクトの起動

上記コマンド実行後、「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」を渡してあげればグラフの描画が可能。

完成

chartjs