如何显示JQPLOT图，而长文本 [英] How to display the JQPLOT graph rather a long text
问题描述
我在控制器类中的方法，它返回JSON数据：
I have a method in controller class which returns JSON data:
public ActionResult ChartDataJSON()
{
Chart chart = new Chart();
DataSet ds = dbLayer.GetChartData();
DataTable dtChartData = ds.Tables[0];
List<jqplotModel> chartData = new List<jqplotModel>();
if (dtChartData .Rows.Count != 0)
{
foreach (DataRow row in dtChartData .Rows)
{
chartData.Add(new jqplotModel{ Date = DateTime.Parse(@row["Date"].ToString()), Demand= Convert.ToDouble(@row["Demand"].ToString()), Supply= Convert.ToDouble(@row["Supply"].ToString()) });
}
}
return Json(chartData, JsonRequestBehavior.AllowGet);
}
是否有人知道我可以在我的脚本中使用它。我试着用这些线，但它没有显示在图表
Does anybody know how I can use it in my script. I tried with these lines but it is not showing the chart
<script type="text/javascript">
$(document).ready(function () {
var types = ['Demand', 'Supply'];
var rawData = function (url, plot, options) {
var ret = null;
$.ajax({
// have to use synchronous here, else the function
// will return before the data is fetched
async: false,
url: url,
dataType: "json",
success: function (data) {
ret = data;
}
});
return ret;
};
// The url for our json data
var jsonurl = "/ChartController/ChartDataJSON";
var plotData = []
for (var i = 0; i < rawData.length; i++) {
//Parse the date.
var date = new Date(+rawData[i].Date.match(/\d+/));
plotData[i] = [date, rawData[i].Demand];
}
var plotData2 = []
for (var i = 0; i < rawData.length; i++) {
//Parse the date.
var date = new Date(+rawData[i].Date.match(/\d+/));
plotData2[i] = [date, rawData[i].Supply];
}
var plot1 = $.jqplot('chart1', [plotData, plotData2], {
height: 300,
width: 300,
title: 'Demand Supply',
dataRenderer: rawData,
dataRendererOptions: {
unusedOptionalUrl: jsonurl
},
series: [
{},
{ yaxis: 'y2axis' }
],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%#I %p' },
label: "Date",
tickInterval: '4 hour'
},
yaxis: {
label: "Demand",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
y2axis: {
label: "Supply",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
highlighter: {
show: true,
sizeAdjust: 1
},
cursor: {
show: false
},
legend: {
show: true,
labels: types,
location: 'ne'
}
});
$(window).bind('resize', function (event, ui) {
if (plot1) {
plot1.replot();
}
});
});
</script>
当我运行这个我没有看到图表，页面会显示一个长文本是这样的：
When I run this I don't see the chart, and the page displays a long text like this:
[{需求：4422.45，供应：17660，日期：/日期（1236504600000）/，DateString：15:00}，{需求：5019.27，供应 ：20699，日期：/日期（1236508200000）/，DateString：下午4点}，{需求：5030.35，供应：19917，日期：/日期（1236511800000）/ ，DateString：下午5点}，{需求：5172.35，供应：23597，日期：/日期（1236515400000）/，DateString：下午6点}，{需求：5656.51，供应：21572，日期：/日（12365.19亿）/，DateString：7点}，{需求：4622.88，供应：7794，日期 ：/日期（1236522600000）/，DateString：晚上8点}，{需求：3116.21，供应：3427，日期：/日期（1236526200000）/，DateString： 晚上9点}，{需求：1588.83，供应：1883年，日期：/日期（1236529800000）/，DateString：10点}，{需求：1394.15，供应：1403，日期：/日期（1236533400000）/，DateString：11点}，{需求：1321.76，供应：3755，日期：/日期（12365.37亿）/，DateString：12点}，{需求：1130.98，供应：3474，日期：/日期（1236540600000）/，DateString：凌晨1点}， {需求：1277.1，供应：1072，日期：/日期（1236544200000）/，DateString：凌晨2点}，{需求：1214.68，供应：1025日期：/日期（1236547800000）/，DateString：凌晨3点}，{需求：2117.91，供应：1198，日期：/日期（1236551400000）/，DateString ：凌晨四点}，{需求：1658.97，供应：1485，日期：/日（12365.55亿）/，DateString：5点}，{需求：1997.36 供应：3126，日期：/日期（1236558600000）/，DateString：6. AM}，{需求：2147.37，供应：4785，日期：/日期（1236562200000）/，DateString：上午7点}，{需求：2114.13，供应：5268，日期：/日期（1236565800000）/，DateString：上午8点 }，{需求：2389.84，供应：5264，日期：/日期（1236569400000）/，DateString：9点}，{需求：2240.77，供应：5526 ，日期：/日（12365.73亿）/，DateString：上午10点}，{需求：1802.43，供应：4530，日期：/日期（1236576600000）/ DateString：11:00}，{需求：1929.71，供应：6618，日期：/日期（1236580200000）/，DateString：12点}，{需求 ：545.65，供应：2767，日期：/日期（1236583800000）/，DateString：下午1点}，{需求：0，供应：1，日期： /日期（1236587400000）/，DateString：14:00}]
[{"Demand":4422.45,"Supply":17660,"Date":"/Date(1236504600000)/","DateString":"3 PM"},{"Demand":5019.27,"Supply":20699,"Date":"/Date(1236508200000)/","DateString":"4 PM"},{"Demand":5030.35,"Supply":19917,"Date":"/Date(1236511800000)/","DateString":"5 PM"},{"Demand":5172.35,"Supply":23597,"Date":"/Date(1236515400000)/","DateString":"6 PM"},{"Demand":5656.51,"Supply":21572,"Date":"/Date(1236519000000)/","DateString":"7 PM"},{"Demand":4622.88,"Supply":7794,"Date":"/Date(1236522600000)/","DateString":"8 PM"},{"Demand":3116.21,"Supply":3427,"Date":"/Date(1236526200000)/","DateString":"9 PM"},{"Demand":1588.83,"Supply":1883,"Date":"/Date(1236529800000)/","DateString":"10 PM"},{"Demand":1394.15,"Supply":1403,"Date":"/Date(1236533400000)/","DateString":"11 PM"},{"Demand":1321.76,"Supply":3755,"Date":"/Date(1236537000000)/","DateString":"12 AM"},{"Demand":1130.98,"Supply":3474,"Date":"/Date(1236540600000)/","DateString":"1 AM"},{"Demand":1277.1,"Supply":1072,"Date":"/Date(1236544200000)/","DateString":"2 AM"},{"Demand":1214.68,"Supply":1025,"Date":"/Date(1236547800000)/","DateString":"3 AM"},{"Demand":2117.91,"Supply":1198,"Date":"/Date(1236551400000)/","DateString":"4 AM"},{"Demand":1658.97,"Supply":1485,"Date":"/Date(1236555000000)/","DateString":"5 AM"},{"Demand":1997.36,"Supply":3126,"Date":"/Date(1236558600000)/","DateString":"6 AM"},{"Demand":2147.37,"Supply":4785,"Date":"/Date(1236562200000)/","DateString":"7 AM"},{"Demand":2114.13,"Supply":5268,"Date":"/Date(1236565800000)/","DateString":"8 AM"},{"Demand":2389.84,"Supply":5264,"Date":"/Date(1236569400000)/","DateString":"9 AM"},{"Demand":2240.77,"Supply":5526,"Date":"/Date(1236573000000)/","DateString":"10 AM"},{"Demand":1802.43,"Supply":4530,"Date":"/Date(1236576600000)/","DateString":"11 AM"},{"Demand":1929.71,"Supply":6618,"Date":"/Date(1236580200000)/","DateString":"12 PM"},{"Demand":545.65,"Supply":2767,"Date":"/Date(1236583800000)/","DateString":"1 PM"},{"Demand":0,"Supply":1,"Date":"/Date(1236587400000)/","DateString":"2 PM"}]
任何人可以帮助我找出问题在哪里，什么我做错了？
Can anybody help me figure out the problem and where and what I am doing wrong?
编辑：
请注意，数据是动态的，它会从数据库中来，并通过在控制器类编码将被返回JSON脚本的看法。请建议如何通过/使用JSON对象（从ChartDataJSON（）方法）在jqPlot。
Please note that the data would be dynamic and it would be coming from the database and through coding in controller class it will be returning the JSON script to the view. Please suggest how to pass/use the JSON object (from ChartDataJSON() method) in jqPlot.
推荐答案
好了，这里就是我的回答。
Ok, so here is my answer.
我的控制器如下：
public class jqPlotController : Controller
{
public ActionResult ChartDataJSON()
{
var chartData = new List<jqplotModel>();
var point1 = new jqplotModel { Date = DateTime.Now.Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(1), Supply = Convert.ToDouble(3) };
var point2 = new jqplotModel { Date = DateTime.Now.AddDays(10).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(2), Supply = Convert.ToDouble(4) };
var point3 = new jqplotModel { Date = DateTime.Now.AddDays(31).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(6), Supply = Convert.ToDouble(6) };
var point4 = new jqplotModel { Date = DateTime.Now.AddDays(106).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(4), Supply = Convert.ToDouble(2) };
chartData.Add(point1);
chartData.Add(point2);
chartData.Add(point3);
chartData.Add(point4);
return Json(chartData, JsonRequestBehavior.AllowGet);
}
//
// GET: /jqPlot/
public ActionResult Index()
{
return View();
}
}
和模型：
public class jqplotModel
{
public string Date { get; set; }
public double Demand { get; set; }
public double Supply { get; set; }
}
我已经很难$ C $光盘（非常！）简单的数据集在ChartDataJSON方法。这将是pretty平凡的你重构你的code到输出数据类似的格式。
I've hard coded a (very!) simple dataset in the ChartDataJSON method. It will be pretty trivial for you to refactor your code to output data in a similar format.
由于我是新来jqPlot我花了一段时间来弄清楚如何DateTime对象传递给此JavaScript库。每次我试图jqPlot给了我pretty神秘的时间有关的错误信息。我找到的解决方案是其格式化作为jqPlot理解例如日期时间'2008-09-30 4:00 PM（见例如这里） - 我敢肯定，这将是为别人感到困惑jqPlot的处理日期的有用！
As I'm new to jqPlot it took me a while to figure out how to pass a DateTime object to this javascript library. Every time I tried jqPlot gave me pretty cryptic time related error message. The solution I found was to format it as a date time which jqPlot understands e.g. '2008-09-30 4:00PM' (see example here) - I'm sure this is going to be useful for others confused about jqPlot's handling of dates!
视图看上去如下：
<script src="@Url.Content("Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/jquery.jqplot.js")" type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.barRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.pointLabels.min.js")" type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.canvasAxisTickRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.highlighter.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// The url for our json data
var url = '@Url.Action("ChartDataJSON", "jqPlot")';
var ret = null;
$.ajax({
// have to use synchronous here, else the function
// will return before the data is fetched
async: false,
url: url,
dataType: "json",
success: function (data) {
ret = data;
}
});
var demands = [];
var supplys = [];
for (i = 0; i < ret.length; i++) {
// Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
demands.push([ret[i].Date, ret[i].Demand]);
supplys.push([ret[i].Date, ret[i].Supply]);
}
var plot1 = $.jqplot('chart1', [demands, supplys], {
title: "Demand Supply",
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%d/%m/%Y'
},
label: 'Date'
},
yaxis: {
label: 'Demand'
},
y2axis: {
label: 'Supply'
}
},
series: [
{ yaxis: 'yaxis', label: 'demands' },
{ yaxis: 'y2axis', label: 'supplys' }
],
highlighter: {
show: true,
sizeAdjust: 1
},
cursor: {
show: false
}
});
});
</script>
@{
ViewBag.Title = "jQPlot Demo";
}
<h2>@ViewBag.Title</h2>
<div id="chart1" style="height: 400px; width: 600px;"></div>
请注意，在我的解决方案我不使用datarender选项。相反，我检索使用jQuery ajax调用数据，然后我创造了需求和供给数据两个独立的数组。每个阵列具有在x轴的时间，然后在y轴各自的值（因此该日期是明显共用两个阵列）。
Note that in my solution I don't use the datarender option. Instead I retrieve the data using the jquery ajax call and then I create two separate arrays for the Demand and Supply data. Each of these arrays have the date in the x-axis, and then their respective value in the y-axis (hence the date is obviously common to both arrays).
一旦我有这个数据，那么我通过jqPlot绘制它，这会导致如下图：
Once I had this data I then plotted it via jqPlot, which results in the following graph:
工作仍然需要做的精益求精轴和标签蜱，但希望这是你想要的那种图形。如果没有，那么它的确是一个很好的学习任务对我来说，我希望其他人会发现这个有用。
Work still needs to be done to refine the ticks on the axis and the labelling, but hopefully this is the kind graph you want. If not, then it certainly has been a good learning task for me and I hope others will find this useful.
这篇关于如何显示JQPLOT图，而长文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
