0

.NET 3.5 の VB.NET アプリケーション内で JQPlot を使用しようとしています。ボタンをクリックすると、jquery を使用して、ASP.NET Webservices ソース ファイル (ソリューションの一部) を使用して、JQPlot チャートに JSON 派生データを入力しようとしています。

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 に答える