ALOHA.qrunch.io読者になる1Laravel6+Vue.jsの環境でvue-chart.jsを使うLaravelVue.js投稿日:2020-01-24最終更新:2020-02-08筆者のブログで記事をみるLaravelでグラフやチャートを作りたかったので調べてみたところ、chart.jsがアツいという記事が多かったので使ってみることにしました。ちなみにvue.jsはLaravel環境に入れて動作確認した程度で、実質1度も使ったことない素人ですが、せっかくなので勉強も兼ねてvue-chart.js(公式説明によると、chart.jsをvueで使えるようにしたラッパー)を使うことにしました。2.6.11※全部Docker上で構築してますが、Dockerじゃなくても手順は同じだと思います。(導入時点ではv3.5)vue-chartの前に。devを実行することでlaravelでvueを使う準備が整います。--saveを実行する。vueファイルを作るLaravelのresources/js/components配下にvueファイルを作成する。LineChart.vueという名前で作成する。(自分は最終的に線グラフを作る予定だったのでこの名前で作成しました。dataのサンプルコードの上下に<script>と</script>を加えるだけ。require('./components/ExampleComponent.vue').default);の記述がありますが、手順2で作成したLineChart.vueを追記して下記のようにします。welcome.blade.phpでもなんでも良いですが、チャートを表示したいところに下記のコードを追加します。id="app">としています。その中に、手順3で追加したvue.jsのコンポーネントタグを書きます。}}"></script>を追加します。id="app"としたところよりも後にこのコードを書く必要があるので、bodyの終端タグの前が良いと思います。devこれを実行しないと反映されないです。ブラウザで表示を確認するブラウザで確認してみると下記の通りに表示されました。チャートをカスタマイズするチャートの設定値はchart.js(Chart)で確認可能です。設定値と入力データを変えて下記のようにしたりできます。初心者なので、間違ってたら教えてください。Qrunch.netサーバー提供フィードバックを送信する。