Chart.jsによるグラフ作成

前提・実現したいこと

jspとjavascriptを用いてグラフを作りたいと考えています。
こちらのサイト→http://vdeep.net/chart-jsを
まるまるコピーしながら実行してみたところ、
下記のエラーが発生しました。

発生している問題・エラーメッセージ

上記のサイト様の縦軸グラフのプログラムをコピーし、実行したところ、
.Bar(barChartData, {
のところでエラーが出ているようです。

Uncaught TypeError: (intermediate value).Bar is not a function
    at window.onload (test3.jsp:41)

該当のソースコード

window.onload = function(){
var ctx = document.getElementById("chart").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true,
// アニメーションを停止させる場合は下記を追加
/* animation : false */
});
}
</script>

試したこと

エラー文で検索して出てきたところに記載されていたように修正してみましたが、なにも表示されませんでした。
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/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

Chart.jsのバージョン違いによるものです。
サンプルで使われているものは1.0.2ですが、最新のバージョンは2.8.0です。

同じコードでは動かないようです。

こういうときは公式のドキュメントを読みましょう。
必ず最新の正確な情報が書いてあります。
英語ですが、そんなに難しいことは書いていませんよ。

Chart.js · Chart.js documentation

おまけ: サンプルサイトのコードの最新版にあわせた書き換え

html
1<div style="width: 30%">
2  <canvas id="myChart" width="400" height="400"></canvas>
3</div>

注意点: canvasタグの width, height 指定は効かないようです。親要素でのサイズ調整が推奨されています。

js
1const ctx = document.getElementById('chart').getContext('2d');
2const myChart = new Chart(ctx, {
3  type: 'bar',
4  data: {
5    labels: ['田中', '山田', '奥谷', 'ザビエル', 'おそ松', 'ピカチュウ', 'あひる',],
6    datasets: [
7      {
8        label: '女子力',
9        backgroundColor: 'rgba(214,133,176,0.7)',
10        data: [20, 45, 1, 20, 19, 33, 96],
11      },
12      {
13        label: '男子力',
14        backgroundColor: 'rgba(127,194,239,0.7)',
15        data: [2, 54, 77, 32, 9, 78, 95],
16      },
17    ],
18  },
19});
20