JQPlot无法识别jQuery

Question

我正在一个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> 

确切的错误，当我运行该项目，我得到的是： ： 这个“遗漏的类型错误无法读取属性未定义‘配置’”被触发它的行： $.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的头部（由我）中，然后再一次在页脚中（它覆盖了包含在html <head>中的所有扩展）。这是MVC 4模板的一个特性 - 我不太喜欢它。