2016-02-19 62 views
1

我正在嘗試使用從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); 
} 
+0

準確地顯示了這個PHP返回的數據在JS中的使用位置。如果你正在做一個ajax調用,那麼你需要使用jquery的$ .getJSON(),或者自己解碼/解析返回的文本。 json本身就是一個字符串,在JS解析之前不會成爲「數據」。 –

+0

@MarcB我用ajax調用和函數更新了我的問題,它構建了圖表 – zachu

回答

2

你還沒有生成一個數組作爲json,你已經採取了包含字符串PHP數組的定義(完整的尾隨commaa語法錯誤),以及編碼的:

echo json_encode("['test', 'test2', 1],['test2', 'test3', 1],"); 
       ^---------------------string----------------^ 

那麼您跨發送是這樣的文字文本:

"\"['test','test2',1]['test2','test3',1],\"" 

這僅僅是一個JSON編碼字符串 - 再次,它不是一個數組。

如果你想要一個實際的數組跨去,你需要編碼一個PHP數組,而不是一個PHP字符串:

echo json_encode(array(array('test', 'test2', 1),array('test2', 'test3', 1)); 
--or-- 
echo json_encode([['test1','test2',1],['test2','test3',1]]); 

注意周圍沒有[[...]]版報價

+0

感謝這工作就像一個魅力! :)我已經使用了這種方法:echo json_encode(array('test','test2',1),array('test2','test3',1)); 順便說一句,你錯過了關閉「) 「最後之前」;「 – zachu