Nuxt.js ライブラリ「vue-chartjs」使用してグラフを作成する

Nuxt.js ライブラリ「vue-chartjs」使用してグラフを作成する

Nuxt.jsにChart.jsを導入できるライブラリvue-chartjsをインストールして、利用するための手順。ここでは、デザインフレームワークである「vuetify」も利用しています。

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

Nuxt.jsは下記のコマンドでインストールしてます。

vuetifyインストール

UIコンポーネントフレームワークで vuetify もインストールしておきます。

プロジェクト配下にあるnuxt.config.jsを編集します。

vue-chartjsインストール

vue-chartjsをインストールします。

ソースコード

こちらの公式を参考にソースコードを記述します。

plugins内にline-chart.jsと名前でファイルを作成して、下記のコードを気jy痛します。

プロジェクト配下のnuxt.config.jsのpluginsに下記のコードを追加します。

pages配下にchart.vueという名前でファイルを作成して、下記のコードを記述します。

起動する

ブラウザから http://プライベートIP:3000/chart にアクセスすると vue-chartjs を利用してグラフが作成されていることが確認できます。

※nuxt.js 外部IPから接続できるようにする設定はこちら