jquery - Javascript 错误 $(...).dxChart 不是函数

Question

我正在尝试在 ASP.NET MVC 项目(使用 DevExpress)中显示带有 jQ​​uery 绑定(bind)的 dxChart。所以我在 rootLayout 中包含了必要的脚本:

<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-3.0.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/dx.chartjs.js")" type="text/javascript"></script>

然后我在部分 View 中添加了 div 标签和绑定(bind)脚本:

<div id='chartContainer'></div>
<script>
    $(function() {
    var dataSource = @Html.Raw(Model.RepartitionDesRdvs);
        $("#chartContainer").dxChart({
            size: {
                width: 300
            },
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'Statut',
                type: 'pie'
            },
            series: [
                {
                    argumentField: "Statut",
                    valueField: "Total",
                    label: {
                        visible: true,
                        connector: {
                            visible: true,
                            width: 1
                        }
                    }
                }
            ],
            title: "Répartition des Rendez Vous",
            onPointClick: function (e) {
                var point = e.target;
                point.isVisible() ? point.hide() : point.show();
            }
        });
    });
</script>

View 中没有显示任何内容，我收到此错误:

TypeError: $(...).dxChart is not a function

我错过了什么？

Answer 1

我也遇到了这个问题，使用 Dx 版本:15.2.5 和 JQuery 2.1.4 & 2.2.0。这个问题让我想到了这个SO。正如所建议的，我将我的 << script >> 标签重新指向以下 CDN。

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script type="text/javascript" src="http://cdn3.devexpress.com/jslib/15.2.5/js/dx.chartjs.js"></script>

这似乎确实有效，因此我手动下载了 CDN 文件并使用 Beyond Compare 进行比较。令人惊讶的是，BC 在 jquery 中表现出了差异。将本地文件内容替换为CDN版本后，再次尝试，发现错误依然存在。

TypeError: $(...).dxChart is not a function

对我来说解决这个问题的方法是将 Chartjs 放在 DevExpress MVC 脚本之后。

    <link href="@Url.Content("~/Content/dx.common.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/dx.light.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-2.1.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/globalize.min.js")"></script>
    <script src="@Url.Content("~/Scripts/angular.js")"></script>
    <script src="@Url.Content("~/Scripts/angular-sanitize.js")"></script>
    @Html.DevExpress().GetStyleSheets(
...
    )
    @Html.DevExpress().GetScripts(
...
    )

    <script src="@Url.Content("~/Scripts/dx.chartjs.js")"></script>
    <script src="@Url.Content("~/Scripts/custom.js")" type="text/javascript"></script>

希望有帮助!