为什么在将动态数据传递给jquery图表时数据没有绑定？ [英] Why data is not binding while passing dynamic data to jquery chart?
本文介绍了为什么在将动态数据传递给jquery图表时数据没有绑定？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好我正在尝试传递jquery图表的动态数据。但我无法根据数据绘制图表没有绑定到图表...它显示为[对象] ..
任何人请帮助我...
我试过这个..
Hi I am trying to pass the dynamic data for jquery charts. But am not able to plot the chart by that data is not binding to the chart...it is showing like [Object object]..
Any one help me please...
I have tried this..
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples: AJAX</title>
<link href="scripts/examples.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="scripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="scripts/jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
var source = {};
$.ajax({
type: 'POST',
//data:'format=json',
dataType: 'jsonp',
async: false,
url: 'http://localhost:30082/restfrchrst.svc/GetChartdetails',
//cache: false,
contentType: 'application/json',
data: "",
success: function (data) {
alert(data);
source = data;
//source = $.parseJSON(data);
},
error: function (err) {
alert(err);
}
});
function fn()
{
var retdata;
var arr1 = [];
retdata = source;
arr1.push(retdata);
}
var plot = $.plot("#placeholder", [
//{ data: sin, label: "sin(x)"},
//{ data: cos, label: "cos(x)"}
{ data: arr1}
], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
yaxis: {
min: 200,
max: 600
}
});
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");
$("#placeholder").bind("plothover", function (event, pos, item) {
if ($("#enablePosition:checked").length > 0) {
var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
$("#hoverdata").text(str);
}
if ($("#enableTooltip:checked").length > 0) {
if (item) {
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
$("#tooltip").html(item.series.label + " of " + x + " = " + y)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
}
else {
$("#tooltip").hide();
}
}
});
$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
$("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
plot.highlight(item.series, item.datapoint);
}
});
// Add the Flot version string to the footer
$("#footer").prepend("Flot " + $.plot.version + " – ");
});
</script>
</head>
<body>
<div id="header">
<h2>Interactivity</h2>
</div>
<div id="content">
<div class="demo-container">
<div id="placeholder" class="demo-placeholder"></div>
</div>
<p>One of the goals of Flot is to support user interactions. Try pointing and clicking on the points.</p>
<p>
<label><input id="enablePosition" type="checkbox" checked="checked"></input>Show mouse position</label>
<span id="hoverdata"></span>
<span id="clickdata"></span>
</p>
<p>A tooltip is easy to build with a bit of jQuery code and the data returned from the plot.</p>
<p><label><input id="enableTooltip" type="checkbox" checked="checked"></input>Enable tooltip</label></p>
</div>
<div id="footer">
Copyright © 2007 - 2013 IOLA and Ole Laursen
</div>
</body>
</html>
public class restfrchrst : Irestfrchrst
{
SqlConnection con = new SqlConnection("Data Source=10.90.90.100;Initial Catalog=SGT_Test;User ID=sgtuser;Password=sgtuser");
List c = new List();
public List GetChartdetails()
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from charts",con);
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
while (dr.Read())
{
c.Add(new chart { marks = Convert.ToInt32(dr[0]), progress = Convert.ToDecimal(dr[1]) });
}
}
con.Close();
return c;
}
svc.cs
isvc is:
public interface Irestfrchrst
{
[OperationContract]
[WebGet(UriTemplate = "GetChartdetails", ResponseFormat = WebMessageFormat.Json)]
List GetChartdetails();
}
[DataContract]
public class chart
{
[DataMember]
public int marks { get; set; }
[DataMember]
public decimal progress { get; set; }
}
}
推荐答案
（ function （）{
var source = {};
(function() { var source = {};
.ajax（{
类型：' POST'，
/ / data：'format = json'，
dataType：' jsonp'，
async： false ，
url：' http：// localhost：30082 / restfrchrst.svc / GetChartdetails'，
// cache：false，
contentType：' application / json'，
data： ，
成功：功能 （数据）{
alert（data）;
source = data;
// source =
.ajax({ type: 'POST', //data:'format=json', dataType: 'jsonp', async: false, url: 'http://localhost:30082/restfrchrst.svc/GetChartdetails', //cache: false, contentType: 'application/json', data: "", success: function (data) { alert(data); source = data; //source =
.parseJSON（data）;
}，
错误： function （错误）{
alert（err）;
}
}）;
function fn（）
{
var retdata;
var arr1 = [];
retdata = source;
arr1.push（retdata）;
}
var plot =
.parseJSON(data); }, error: function (err) { alert(err); } }); function fn() { var retdata; var arr1 = []; retdata = source; arr1.push(retdata); } var plot =
这篇关于为什么在将动态数据传递给jquery图表时数据没有绑定？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
