BETA

Laravel6+Vue.jsの環境でvue-chart.jsを使う

投稿日:2020-01-24
最終更新:2020-02-08

Laravelでグラフやチャートを作りたかったので調べてみたところ、chart.jsがアツいという記事が多かったので使ってみることにしました。
ちなみにvue.jsはLaravel環境に入れて動作確認した程度で、実質1度も使ったことない素人ですが、せっかくなので勉強も兼ねてvue-chart.js(公式説明によると、chart.jsをvueで使えるようにしたラッパー)を使うことにしました。

環境

●既に構築済み
PHP 7.3
nginx 1.17
Laravel 6
Vue.js 2.6.11
※全部Docker上で構築してますが、Dockerじゃなくても手順は同じだと思います。

●これから入れる
vue-chart.js (導入時点ではv3.5)

vue-chartの前に。(追記)

Vue.jsを導入していない場合の手順ですが、
Laravel6ではデフォルトでpackage.jsonにvueが記述されてないので、
composer require larval/ui

php artisan ui vue
を実行してから
npm install

npm run dev
を実行することでlaravelでvueを使う準備が整います。

導入

1. vue-chartjsをインストールする

vue-chart.js(Getting Started)に従って、

npm install vue-chartjs chart.js --save  

を実行する。

2. vueファイルを作る

Laravelのresources/js/components配下にvueファイルを作成する。
例えば、LineChart.vueという名前で作成する。(自分は最終的に線グラフを作る予定だったのでこの名前で作成しました。)
内容は手順1で示したガイドの下の方にあるChart with local dataのサンプルコードの上下に<script></script>を加えるだけ。

<script>  
import { Bar } from 'vue-chartjs'  

export default {  
  extends: Bar,  
  data: () => ({  
    chartdata: {  
      labels: ['January', 'February'],  
      datasets: [  
        {  
          label: 'Data One',  
          backgroundColor: '#f87979',  
          data: [40, 20]  
        }  
      ]  
    },  
    options: {  
      responsive: true,  
      maintainAspectRatio: false  
    }  
  }),  

  mounted () {  
    this.renderChart(this.chartdata, this.options)  
  }  
}  
</script>  

3. resources/js/app.jsに、作成したvueを追記する

デフォルトのapp.jsには

Vue.component('example-component', require('./components/ExampleComponent.vue').default);  

の記述がありますが、手順2で作成したLineChart.vueを追記して下記のようにします。

Vue.component('example-component', require('./components/ExampleComponent.vue').default);  
Vue.component('line-chart', require('./components/LineChart.vue').default);  

4. xxxx.blade.phpにvue.jsのコンポーネントタグとスクリプトタグを追加する

(1). welcome.blade.phpでもなんでも良いですが、チャートを表示したいところに下記のコードを追加します。

<div id="app">  
    <line-chart></line-chart>  
</div>  

デフォルトのLaravelなら、vue.jsのコンポーネントはid="app"を設定したところに組み込まれるので<div id="app">としています。
その中に、手順3で追加したvue.jsのコンポーネントタグを書きます。

(2). (1)と同じxxxx.blade.phpにスクリプトタグを追加する
下記のイメージで、終端のbodyタグの前に、スクリプトを読み込ませるための<script src="{{ mix('js/app.js') }}"></script>を追加します。

    <script src="{{ mix('js/app.js') }}"></script>  
</body>  

div id="app"としたところよりも後にこのコードを書く必要があるので、bodyの終端タグの前が良いと思います。

5. npm run devを実行する。

npm run dev  

これを実行しないと反映されないです。

6. ブラウザで表示を確認する

ブラウザで確認してみると下記の通りに表示されました。

7. チャートをカスタマイズする

チャートの設定値はchart.js(Chart)で確認可能です。
設定値と入力データを変えて下記のようにしたりできます。

初心者なので、間違ってたら教えてください。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

あろはの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう