Question

我正在尝试在ASP.NET MVC项目中使用jQuery绑定显示dxChart（使用DevExpress）。所以我在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>

然后我在部分视图中添加了div标签和绑定脚本：

<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>

视图中没有显示任何内容，我收到此错误：

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

我错过了什么？

Answer 1

我也遇到过这个问题，使用Dx版本：15.2.5和JQuery 2.1.4＆amp; 2.2.0。这个问题让我想到了这个问题。正如所建议的那样，我重新指出了我的＆lt;＆lt;脚本＆gt;＆gt;标签到以下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>

希望有所帮助！

Javascript错误$（...）。dxChart不是函数

1 个答案: