Ошибка Javascript $ (...). DxChart не является функцией

Question

Я пытаюсь показать dxChart с привязкой jQuery в проекте ASP.NET MVC (с 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 Version: 15.2.5 и JQuery 2.1.4 & 2.2.0. Проблема привела меня к этому. Как было предложено, я повторно указал свои теги < < на следующий 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 

Что для меня решило, так это разместить диаграммы после сценариев 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> 

Надеюсь, что это поможет!