$(...).sparkline不是一个函数（jQuery Sparklines）

Question

我目前在使用Gareth Watts的jQuery Sparklines包时遇到了问题。有人熟悉这个包吗？它似乎已经过时，但一些人仍在使用它。

我正在使用常规的脚本标签通过Flask视图导入该包：

<script src="/custom/css/JS/jquery-sparklines.js"></script>

并检查控制台以确保在加载上面的脚本标签之前安装和加载了jQuery。

我注意到这个问题是当我尝试模拟文档中的jFiddle示例时发现的：

我能够创建一个工作版本的fiddle，但只有在扩展下拉列表中添加了jQuery 1.9.1，并在JS部分切换“迁移1.1.0”滑块后才成功。 pic here

即使我的示例有点工作，并且在我的HTML中导入了相同的内容，HTML也无法在外部代码中捕获自定义jQuery函数并产生:

$(...).sparkline is not a function

有人熟悉这个库吗？我已经按照文档的说明操作了，但是还是显然错过了什么。

求助 : ( 或者推荐其他sparkline包？ : (

非常感谢你的时间！

更新：

使用CDN而不是下载的文件仍无法识别sparkline代码 :(

- Kevin Dasilva

---

当您的页面中没有包含Sparkline时，就会出现错误。请观察网络请求并确保其成功加载。 - 31piy

你是否在使用script标签之前创建它？ - Hearner

通常情况下，如果您加载了2个版本的jQuery，就会发生这种情况... - epascarello

@Hearner 是的，实际上调用该函数的脚本是页面中的最后一个脚本标签。 - Kevin Dasilva

@epascarello 我只有一个脚本标签，它看起来像这样： <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>它是 body 标签底部的第一个脚本标签。 - Kevin Dasilva

@31piy 是的.. 所有200个文件都已成功加载，但我会尝试使用下面建议的CDN再次加载。 - Kevin Dasilva

Answer 1

不知道为什么，但当我将Sparkline引用放在使用它的位置之前时，问题就解决了。

代码如下：

<script src="~/Scripts/sparkline/jquery.sparkline.js"></script>
<script type="text/javascript">
    var $jq = jQuery.noConflict();
    $jq(document).ready(function() {
        $jq(".sparkline_bar").sparkline([5,6,7,2,0,-4,-2,4], {
            type: 'bar'});
        //Some other things.

- cheny

Answer 2

已解决：

我的JS代码与sparklines代码冲突，这些代码位于标签中用于初始化线条。

通过在任何其他JS内容之前简单地首先初始化线条来修复问题。

- Kevin Dasilva

Answer 3

确保在 Sparkline 之后没有导入 jQuery。

这是正确的：

<script src="jquery.min.js"></script>
<script src="jquery.sparkline.min.js"></script>

这是错误的：

<script src="jquery.min.js"></script>
<script src="jquery.sparkline.min.js"></script>
...
<script src="jquery.min.js"></script>

- profimedica