質問: new Chart(ctx).Bar(barChartData, { responsive : true, // アニメーションを停止させる場合は下記を追加 /* animation : false */ }); } ### 試したこと エラー文で検索して出てきたところに記載されていたように修正してみましたが、なにも表示されませんでした。 https://laracasts.com/discuss/channels/vue/chartjs-intermediate-valueline-is-not-a-function new Chart(this.$els.canvas.getContext('2d') , { type: "line", data: data, }); ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
回答: Chart.jsのバージョン違いによるものです。 サンプルで使われているものは1.0.2ですが、最新のバージョンは2.8.0です。 同じコードでは動かないようです。 こういうときは公式のドキュメントを読みましょう。 必ず最新の正確な情報が書いてあります。 英語ですが、そんなに難しいことは書いていませんよ。 Chart.js · Chart.js documentation おまけ: サンプルサイトのコードの最新版にあわせた書き換え ``` ``` 注意点: canvasタグの width, height 指定は効かないようです。親要素でのサイズ調整が推奨されています。 ``` const ctx = document.getElementById('chart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['田中', '山田', '奥谷', 'ザビエル', 'おそ松', 'ピカチュウ', 'あひる',], datasets: [ { label: '女子力', backgroundColor: 'rgba(214,133,176,0.7)', data: [20, 45, 1, 20, 19, 33, 96], }, { label: '男子力', backgroundColor: 'rgba(127,194,239,0.7)', data: [2, 54, 77, 32, 9, 78, 95], }, ], }, }); ```