0

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

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

我的代码清单如下：

监听按钮被点击的代码：

$(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 }, ... ]

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

4

2 回答 2

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 ], ... ]

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

最后，由btnASMX1调用的函数getElectricDataJSON() ，其中“chart2”是要绘制图表的 div 标签的 ID。

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,
   ...      
 });
}
于 2013-10-23T16:10:24.570 回答
0

您的数据渲染器（即 ajaxDataRender）的方法签名是错误的。签名应如下所示：

function(userData, plotObject, options) { ... 返回数据；}

（请参阅此处的文档）

在您的示例中，您传递的数据渲染器“ret”不是具有正确数据渲染签名的函数。此外，您传递给 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,
 });
}
于 2013-10-21T22:12:35.650 回答