JavaScript错误$（...）。dxChart不是一个函数 [英] Javascript Error $(...).dxChart is not a function

问题描述

我试图显示与jQuery在ASP.NET MVC项目绑定dxChart（与DevEx preSS）。所以，我包括在rootLayout必要的脚本：结果

I'm trying to display a dxChart with jQuery binding in an ASP.NET MVC project (with DevExpress). So I included the necessary scripts in the 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标签和绑定脚本：结果

Then I added the div tag and the binding script in a partial view:

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

没有显示视图中，我得到这个错误：

Nothing shows in the view and I get this error:

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

我是什么失踪？

推荐答案

我遇到过这个问题还用霉素版本：15.2.5和JQuery 2.1.4＆安培; 2.2.0。这个问题使我这个左右。正如有人建议，我重新指着我和LT;＆LT;脚本>>标签下面的CDN。

I encountered this issue also, using Dx Version: 15.2.5 and JQuery 2.1.4 & 2.2.0. The issue led me to this SO. As has been suggested, I re-pointed my << script >> tags to the following 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版本取代我的本地文件的内容后，我又试了一次，发现错误到现在还present。

This did appear to work, so I manually downloaded the CDN files and used Beyond Compare to diff. Surprisingly, BC showed differences in jquery. After replacing the contents of my local files with the CDN versions, I tried again and found the error to be still present.

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

什么解决了对我来说是放置DevEx preSS后的chartjs MVC脚本。

What solved it for me was to place the the chartjs after the DevExpress MVC scripts.

    <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不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！