我正在嘗試使用從MySQL數據庫中提取的數據來構建Google Sankey圖表。將PHP字符串轉換爲Google圖表的JavaScript數組
頁面加載後,我正在調用ajax來從MySQL中獲取數據並將其返回給視圖。
這是怎麼了,我從PHP返回數據:
echo json_encode("['test', 'test2', 1],['test2', 'test3', 1],");
現在,當我在JavaScript檢查它說:「串」返回的數據類型。
console.log(typeof myData); // string
但是圖表期待數組。所以當我將這些數據傳遞給構建圖表的函數時,它會返回錯誤。下面是我試圖建立它:
data.addRows([
myData
]);
但它回來:
Uncaught Error: Every row given must be either null or an array.
但是,如果我硬編碼直接數據data.addRows它工作完全正常......像下面工作正常
data.addRows([
['test', 'test2', 1],['test2', 'test3', 1],
]);
如何強制JavaScript接受從PHP返回的myData?
我嘗試從PHP返回數據,並通過它在JavaScript中循環並填充圖表,但有時我返回50000行或更多,並且JavaScript無法處理通過如此多行的循環很好(緩慢且有時用完內存和崩潰瀏覽器)。所以我想如果我將它作爲字符串返回,JavaScript不必循環它,只需將它傳遞給圖表構建器即可。
編輯:我附上我的Ajax調用函數和函數繪製圖表
這是Ajax調用從PHP/MySQL的提取數據:
function ajaxCall() {
$(function() {
$.ajax({
type: "POST",
url: "/test",
dataType: "JSON",
success: function(myData) {
// Draw the graph
drawChart(myData);
},
error: function(xhr,status,error) {
console.log("error status: " + status + "/the error is: " + error);
},
});
});
}
此功能將繪製圖表使用從PHP返回的數據:
function drawChart(myData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'From');
data.addColumn('string', 'To');
data.addColumn('number', 'Weight');
data.addRows([
myData
]);
// Calculate graph height, by multiplying number of rows and fixed value
var rowsQty = data.getNumberOfRows();
var autoHeight = rowsQty*15;
if(autoHeight < 300) {
autoHeight = 300;
}
// Sets chart options.
var options = {
// width: 600,
height: autoHeight,
};
// Instantiates and draws our chart, passing in some options.
var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
chart.draw(data, options);
}
準確地顯示了這個PHP返回的數據在JS中的使用位置。如果你正在做一個ajax調用,那麼你需要使用jquery的$ .getJSON(),或者自己解碼/解析返回的文本。 json本身就是一個字符串,在JS解析之前不會成爲「數據」。 –
@MarcB我用ajax調用和函數更新了我的問題,它構建了圖表 – zachu