Chart.jsで円グラフを描画したい

実現したいこと

chart.jsを使用して円グラフをブラウザーに表示したい。

前提

Webデザインの勉強をしています。Webページの中に円グラフを表示したいと思い
chart.jsを使用したのですが、何も表示されず困っています。

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

ありません

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3 <head>
4   <meta charset="utf-8">
5   <title>WCB Web</title>
6   <meta name="description" content="Web制作会社のリクルートサイト">
7<!-- CSS -->
8    　<link rel="stylesheet" href="https://unpkg.com/destyle.css@1.0.5/destyle.css">
9　 　 <link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
10     <link href="css/style.css" rel="stylesheet">
11</head>
12
13<body>
14
15<div class="home-chart">
16    <div class="pie-chart ct-perfect-fourth"></div>
17 </div>
18
19
20
21 <!-- Chartist-->
22<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
23<script scr="js/script.js"></script>
24</body>
25
26</html>
27

JavaScript
1/*
2PIE CHART
3================================================ */
4var pieData = {
5  labels: ['Webデザイナー', 'マーケティング', '人事', '営業'],
6  series: [15, 10, 7, 8]
7};
8
9var pieOptions = {
10  width: '100%',
11  height: '440px'
12};
13
14new Chartist.Pie('.pie-chart', pieData, pieOptions);
15

CSS
1@charset "UTF-8";
2/*　-----共通部分-----　*/
3html{font-size: 100%;} 
4body{font-family: "Yu Gothic","遊ゴシック Medium",Yugothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif; }
5
6/*
7Chatrist
8 ================================================ */
9.ct-label{font-size: 1rem;
10          color:#fff;}
11
12.ct-series-a .ct-slice-pie {fill:#2d3374;}
13.ct-series-b .ct-slice-pie{fill:#3a7edf;}
14.ct-series-c .ct-slice-pie{fill:#9bcbf8;}
15.ct-series-d .ct-slice-pie{fill:#bbb;}