jQuery Sparkline无法正常运行，请问我哪里操作有误？

我想在项目中使用jQuery Sparklines，参照官方示例做了尝试，但显示效果不符合预期，当前显示效果如下：

我已经从官网下载了jquery.sparkline.js文件并在代码中引用，jquery.js则是通过npm安装后放到项目文件夹中的。

我的代码 #

<!DOCTYPE html>
<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.sparkline.js"></script>

    <script type="text/javascript">
    $(function() {
        /** 页面加载完成后执行 */
        // 内联sparkline从标签内容获取数据
        $('.inlinesparkline').sparkline();

        // sparkline也可以从sparkline()函数的第一个参数获取数据
        var myvalues = [10,8,5,7,4,4,1];
        $('.dynamicsparkline').sparkline(myvalues);

        // 第二个参数设置图表类型等选项
        $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );

        // 用'html'代替数值数组，给标签内有数据的sparkline传递选项
        $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );
    });
    </script>
</head>
<body>
    <p>Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.</p>
    <p>Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span></p>
    <p>Bar chart with dynamic data: <span class="dynamicbar">Loading..</span></p>
    <p>Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span></p>
</body>
</html>

请问我哪里操作出错了？

内容的提问来源于stack exchange，提问作者ooz