flot, jquery, asp.net - TypeError: $.plot is not a function

flot, jquery, asp.net - TypeError: $.plot is not a function

我知道 Whosebug 上有一些类似的线程，但我没有在我的案例中使用 CDN。我检查了文件 ~/Scripts/flot/jquery.flot.js 和 ~/Scripts/flot/jquery.colorhelpers.js 是否存在，它们确实存在。

这是我的看法

@{
    ViewBag.Title = "FlotChart";
}

<h2>FlotChart</h2>

@Scripts.Render("~/bundles/jquery")

<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="~/Scripts/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="~/Scripts/flot/jquery.colorhelpers.js"></script>
<script type="text/javascript" src="~/Scripts/flot/jquery.flot.js"></script>

<div id="flot-placeholder1" style="width: 300px; height: 150px"></div>

<script type="text/javascript">
    var data, data1, options, chart;
    data1 = [[1, 4], [2, 5], [3, 4], [4, 7], [5, 5], [6, 7], [7, 2], [8, 2], [9, 9]];
    data = [data1];
    options = {};

    $(document).ready(function() {
        chart = $.plot($('#flot-placeholder1'), data, options);
    });
</script>

这是我的 _Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My Website</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="container body-content">
        ...
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

你的 _layout.cshtml 和你的 view.cshtml 都有 @Scripts.Render("~/bundles/jquery") 所以 jQuery 的第二次加载 "overwrites" 第一个加载 Flot 并且找不到 plot() 函数。

一般来说，您应该在页面顶部而不是页面底部加载所有外部 JavaScript。

我不仅加载了 jQuery 两次，而且我应该将我的 javascript 放入 

@Section Scripts {
}

现在它是在 jQuery 加载到 _Layout.html 之后呈现的：

@RenderSection("scripts", required: false)

正确的观点是：

@{
    ViewBag.Title = "FlotChart";
}

<h2>FlotChart</h2>

<div id="flot-placeholder1" style="width: 300px; height: 150px"></div>

@section Scripts
{
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/Scripts/flot/excanvas.min.js"></script><![endif]-->
    @Scripts.Render("~/Scripts/flot")

    <script type="text/javascript">
        var data, data1, options, chart;
        data1 = [[1, 4], [2, 5], [3, 4], [4, 7], [5, 5], [6, 7], [7, 2], [8, 2], [9, 9]];
        data = [data1];
        options = {};

        $(document).ready(function() {
            chart = $.plot($('#flot-placeholder1'), data, options);
        });
    </script>
}