1

私は Web アプリに取り組んでおり、JQPlot が提供するドラッグ グラフがとても気に入っています。私は彼らのサイトでこの例を参照しています: http://www.jqplot.com/deploy/dist/examples/customHighlighterCursorTrendline.html

私が理解しているように、JQPlot を機能させるには、jQuery、jQuery jqplot 関数、およびいくつかのスタイリング ファイルを含める必要があります。JQPlot のダウンロードでは、独自の jquery.js と jquery.jqplot.js が提供されます。

さらに、このプロジェクトの一部として Knockout.js も使用しており、それを機能させるために標準の jquery-1.9.1.js ファイルを含めています。

ただし、「$」の定義ファイルは jquery-1.9.1.js であり、JQPlot は独自の jQuery ファイルを提供するため、何らかの競合が発生して jqplot 関数が認識されないはずです。これに対する回避策はありますか? ここに私のHTMLコードがあります:

@model FluidBedSimulation.Models.BedState
@using Newtonsoft.Json

@{
    ViewBag.Title = "Index";
}



<script type="text/javascript" src="../Scripts/jqPlot/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/jquery.jqplot.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.dragable.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.trendline.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Scripts/jqPlot/jquery.jqplot.min.css" />

<h2>Index</h2>

@if (false)
{
    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout-2.2.0.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>

}
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.2.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>







<script type ="text/javascript">
    $(document).ready(function () {


        $.jqplot.config.enablePlugins = true;

        s1 = [['23-May-08', 1], ['24-May-08', 4], ['25-May-08', 2], ['26-May-08', 6]];

        plot1 = $.jqplot('chartdiv', [s1], {
            title: 'Highlighting, Dragging, Cursor and Trend Line',
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: {
                        formatString: '%#m/%#d/%y'
                    },
                    numberTicks: 4
                },
                yaxis: {
                    tickOptions: {
                        formatString: '$%.2f'
                    }
                }
            },
            highlighter: {
                sizeAdjust: 10,
                tooltipLocation: 'n',
                tooltipAxes: 'y',
                tooltipFormatString: '<b><i><span style="color:red;">hello</span></i></b> %.2f',
                useAxesFormatters: false
            },
            cursor: {
                show: true
            }
        });
    });
</script>


@*grab values from the view model directly*@

<p>Bed Weight: <strong data-bind="text: BedMass" id="BedMass"></strong></p>
<p>H2O Bed Weight: <strong data-bind="text: BedWaterMass" id="BedWaterMass"></strong></p>
<p>Fraction of Binder in Spray Solution: <strong data-bind="text: binderFraction" id="binderFraction"></strong></p>

<p>
    Enter the Bed Mass: 
            <input data-bind="value: BedMass" />

            @*Html.TextBoxFor(model => model.BedMass, new { data_bind = "value: BedMass" })*@
</p>
<p>
    Enter the H2O Mass in the Bed: 
            @Html.TextBoxFor(model => model.BedWaterMass, new { data_bind = "value: BedWaterMass" })
</p>
<p>
    Enter the Fraction of Binder in the Spray Solution: 
            @Html.TextBoxFor(model => model.binderFraction, new { data_bind = "value: binderFraction" })
</p>

<button data-bind="click: Simulate">Simulate</button>


@*to be used later as controls for the simulation*@
<div id="chartdiv" style="height:400px;width:300px; "></div>

<script type="text/javascript">

    this.BedMass = ko.observable(1);
    this.BedWaterMass = ko.observable(1);
    this.binderFraction = ko.observable(1);

    (function () {
        var model = '@Html.Raw(Json.Encode(Model))';
        var viewModel = ko.mapping.fromJS(model);
        ko.applyBindings(viewModel);

    })();

</script>

プロジェクトを実行したときに発生する正確なエラーは、「Uncaught TypeError: Cannot read property 'config' of undefined」 $.jqplot.config.enablePlugins = true; です。Visual Studio では、jqplot はオプションではありません。たくさんのスレッドを検索しましたが、関連するものが見つからないようです。jqplot とノックアウトの両方を使用する方法があるかどうかを知りたいです (特に、標準の jquery ファイルを使用します)。前もって感謝します！

4

1 に答える 1

8

私も同じ問題を抱えていました。jquery.jqplot.jsファイルの処理を追跡したところ、ファイルが実行され、構成が定義され、ファイルの処理の最後までにすべてが整ったように見えました (つまり、変数が jQuery 変数に正しく割り当てられ、 $ エイリアス)。ただし、$(document).ready()コールバックに到達するまでに$.jqplotは未定義だったようです...

拡張機能「noty」で同じ問題が発生することがわかりました...最終的に、Layout.cshtml@RenderSection("scripts", required: false) (MVC 4 内で実装しています) の最後に、への参照が先行していることがわかりました。 JQuery バンドル。

要約すると、jQuery バンドルは HTML のヘッド セクション (私が作成) に含まれ、次にフッター ( html に含まれていたすべての拡張機能を上書きします<head>) に含まれていました。これは MVC 4 テンプレートの機能でした。私はあまり夢中になりません。

于 2013-10-03T16:59:36.500 に答える