我正在开发一个网络应用程序,我非常喜欢 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>
我在运行项目时得到的确切错误是:“未捕获的类型错误:无法读取未定义的属性 'config'” 这是触发它的行:
$.jqplot.config.enablePlugins = true;
当我写“$”时。在 Visual Studio 中,jqplot 甚至不是一个选项。我搜索了一堆线程,但似乎找不到任何相关的东西。我想知道是否有某种方法可以同时使用 jqplot 和敲除(以及使用标准 jquery 文件的其他方法)。提前致谢!