JQPlot，JSON和'沒有指定數據'錯誤

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; 
}); 
}); 

---

JS功能，從Web服務獲取數據：

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服務是：由JQPlot預計

[ { "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 }, ... ] 

---

數據結構：

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

注意在 '預期數據' 比​​爾場去除逗號的。

---

最後，函數getElectricDataJSON（）正由btnASMX1其中「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, 
    ...  
}); 
} 

Answer 2

datarender（即ajaxDataRender）的方法簽名是錯誤的。簽名應該是這樣的：

function（userData，plotObject，options）{... return data; }

（參見文檔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, 
}); 
}