Question

我正在尝试在.NET 3.5下的VB.NET应用程序中使用JQPlot。在按钮上单击，使用jquery，我尝试使用ASP.NET Webservices源文件（这是解决方案的一部分）使用JSON派生数据填充JQPlot图表。

JSON数据由Web服务发送，但是当它呈现给JQPlot时，我得到JQPlot代码生成的javascript错误“No Data Specified”。

我的代码清单如下：

用于侦听要点击的按钮的代码：

$(document).ready(function () {
 $('#<%=btnASMX1.ClientID%>').click(function () {
  getElectricDataJSON();
 return false;
 });
});

'document.ready'函数之外的Javascript代码：

function ajaxDataRenderer() {
 var ret = null;
 $.ajax({
  // have to use synchronous here, else the function 
  // will return before the data is fetched
  async: false,
  //url: url,
  type: 'POST',
  contentType: 'application/json; charset=utf-8',
  url: "AccountsService.asmx/GetJSONData",
  data: "{AccountID: " + $('#<%= hiddenAccountID.ClientID%>').val() + " }",
  dataType: "json",
  success: function (response) {
   var ret = response.d;
   // The following two lines just display the JSON data for testing purposes
   $('#<%=outputASMX.ClientID%>').empty();
   $('#<%=outputASMX.ClientID%>').html("<div>" + ret + "</div>");
   return ret;
  },
  error: function (request) {
   $('#<%=outputASMX.ClientID%>').html("<div style='color:red;'>WEBSERVICE UNREACHABLE</div>");
  }
 });
 return ret;
};

var jsonurl = "./jsondata.txt";

function getElectricDataJSON() {
 var ret = ajaxDataRenderer();
 var plot1 = $.jqplot('chart2', jsonurl, {
 title: "AJAX JSON Data Renderer",
 dataRenderer: ret, //$.jqplot.ciParser
 dataRendererOptions: {
  unusedOptionalUrl: jsonurl
 }
});
}

JSON数据格式如下：

[ { "todate": "2013-09-23T00:00:00", "Bill": 7095.65 }, { "todate": "2013-08-22T00:00:00", "Bill": 1137.96 }, { "todate": "2013-07-24T00:00:00", "Bill": 220429.41 }, ... ]

任何帮助或建议都将不胜感激。

Answer 1

感谢@Fresh的快速回复。这是我的问题的完整解决方案：

用于侦听要点击的按钮的代码：

$(document).ready(function () {
 $('#<%=btnASMX1.ClientID%>').click(function () {
  getElectricDataJSON();
 return false;
 });
});

用于从Web服务获取数据的JS函数：

function ajaxDataRenderer() {
 var ret = null;
 $.ajax({
  // have to use synchronous here, else the function 
  // will return before the data is fetched
  async: false,
  type: 'POST',
  contentType: 'application/json; charset=utf-8',
  url: "AccountsService.asmx/GetJSONData",
  data: "{AccountID: " + $('#<%= hiddenAccountID.ClientID%>').val() + " }",
  dataType: "json",
  success: function (response) {
    ret = response.d; // return response string object
  },
  error: function (request) {
   $('#<%=outputASMX.ClientID%>').html("<div style='color:red;'>WEBSERVICE    UNREACHABLE</div>");
  }
 });
 return ret;
};

Web服务输出的数据结构是：

[ { "todate": "2013-09-23T00:00:00", "Bill": 7,095.65 }, { "todate": "2013-08-22T00:00:00", "Bill": 1,137.96 }, { "todate": "2013-07-24T00:00:00", "Bill": 220,429.41 }, ... ]

JQPlot预期的数据结构：

[ [ "2013-09-23T00:00:00", 7095.65 ] , [ "2013-08-22T00:00:00", 1137.96 ], [ "2013-07-24T00:00:00", 220429.41 ], ... ]

请注意删除“预期数据”Bill字段中的逗号。

最后，由 btnASMX1 调用的函数 getElectricDataJSON（），其中'chart2'是将绘制图表的div标签的ID。 / p>

function getElectricDataJSON() {

 // Get JSON 'string' object
 var ret = ajaxDataRenderer();

 // If JSON string object is null, stop processing with friendly message
 if (ret == null) {
   $('#<%=outputASMX.ClientID%>').html("<div style='color:red;'>CHARTS ARE NOT AVAILABLE AT THIS TIME</div>");
   return false;
 }

 // Now push required data into a JSON array object
 var sampleData = [], item;
 $.each(ret, function (key, value) {
   sampleData.push([value.todate, parseFloat(value.Bill.replace(/,/g, ""))]);
 });

 var plot = $.jqplot('chart2', [sampleData], {
   title: 'AJAX JSON Data Renderer',
   dataRenderer: sampleData,
   ...      
 });
}

Answer 2

您的datarender（即ajaxDataRender）的方法签名是错误的。签名应如下所示：

function（userData，plotObject，options）{...返回数据; }

（参见文档here）

在您的示例中，您传递的是datarenderer“ret”，它不是具有正确datarender签名的函数。您传递给getElectricDataJSON（）的jsonurl也是多余的，因为代码中的任何一点都不会将“AccountsService.asmx / GetJSONData”中的数据保存为“./jsondata.txt”。

因此，您应该将代码更改为：

$(document).ready(function(){
 function ajaxDataRenderer(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 (response) {
    var ret = response;
    // The following two lines just display the JSON data for testing purposes
    $('#<%=outputASMX.ClientID%>').empty();
    $('#<%=outputASMX.ClientID%>').html("<div>" + ret + "</div>");
   },
   error: function (request) {
    $('#<%=outputASMX.ClientID%>').html("<div style='color:red;'>WEBSERVICE UNREACHABLE</div>");
   }
  });
  return ret;
 };

 var url = "AccountsService.asmx/GetJSONData";

 function getElectricDataJSON() {
  var plot1 = $.jqplot('chart2', url, {
  title: "AJAX JSON Data Renderer",
  dataRenderer: ajaxDataRenderer,
 });
}

JQPlot，JSON和'没有指定数据'错误

2 个答案: