1

ASP.NET MVC プロジェクト (DevExpress を使用) で jQuery バインディングを使用して 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>

次に、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

何が欠けていますか？

4

1 に答える 1

3

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

私にとってそれを解決したのは、DevExpress MVC スクリプトの後に chartjs を配置することでした。

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

それが役立つことを願っています!

于 2016-02-20T13:24:11.123 に答える