jQuery에서 JQPlot을 인식하지 못합니다.

Question

웹 응용 프로그램을 작성 중이며 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 함수를 인식 할 수 없도록하는 일종의 충돌이 있어야합니다. 이 문제를 해결할 수있는 방법이 있습니까?

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

내가 프로젝트를 실행할 때 얻을 정확한 오류는 다음과 같습니다 : : 이 "catch되지 않은 형식 오류 정의의 속성을 읽을 수 없습니다 '설정'이 '를 트리거 라인입니다 : 여기 내 HTML 코드는 $.jqplot.config.enablePlugins = true; "$"라고 쓸 때. Visual Studio에서 jqplot은 옵션이 아닙니다. 스레드 목록을 검색했지만 관련성이있는 항목을 찾을 수 없습니다. jqplot과 knockout (표준 jquery 파일을 사용하는 다른 것들)을 모두 사용할 수있는 방법이 있는지 알고 싶습니다. 미리 감사드립니다.

Answer 1

나는 동일한 문제가있었습니다. 내가 jquery.jqplot.js 파일의 처리를 추적하고 이 실행되면 은 이 정의되었고이 지정되었고 파일 처리가 끝날 때까지 모든 것이 올바로 지정되었습니다 (즉, 변수가 올바르게 지정되었습니다). jQuery 변수와 $ 별칭). 그러나 $(document).ready() 콜백 $.jqplot에 도달 할 때까지는 정의되지 않았습니다 ...

동일한 문제가 확장 프로그램 'noty'에서 발생하는 것으로 나타났습니다 ... 결국에는 Layout.cshtml (MVC 4에서 구현 중입니다.) @RenderSection("scripts", required: false)이 있었고 JQuery 번들에 대한 참조가있었습니다.

요약 : jQuery 번들은 HTML의 head 섹션에 포함되어 있으며 footer에는 html <head>에 포함 된 모든 확장자를 덮어 씁니다. 이것은 MVC 4 템플릿의 기능이었습니다.