如何以可繪製表格格式輸出PHP結果

Question

我試圖用https://plot.ly/javascript/繪製PHP數據庫的輸出結果PHP。我需要的輸出進行格式化這樣的 -

var data = [ 
    { 
    x: ['giraffes', 'orangutans', 'monkeys'], 
    y: [20, 14, 23], 
    type: 'bar' 
    } 
]; 

這是目前我使用讓我輸出的代碼 -

#PHP 
$x = array(); 
$y = array(); 

while($query_result = $result->fetch_assoc()) { 
    $x[] = $query_result['Animal']; 
    $y[] = $query_result['Count']; 
} 

print_r($y); 


#Javascript 
$.get('../assets/php/Animals.php', function(data) { 
    Plotly.newPlot('AnimalChart', data); 
}); 

但它返回這樣的數據 -

Array 
(
    [0] => 20 
    [1] => 14 
    [2] => 23 
) 

我也試過json_encode這樣 -

$rows = array(); 

while($query_result = $result->fetch_assoc()) { 
    $rows[] = $query_result; 
} 

echo json_encode($rows); 

但輸出是這樣的，這不符合預期的情節格式 -

[{"Animal":"giraffes","Count":"20"}, 
{"Animal":"orangutans","Count":"14"}, 
{"Animal":"monkeys","Count":"23"}] 

在這兩種情況下，Plot.ly返回一個錯誤，這就是爲什麼我認爲它需要像第一個例子進行格式化。

Uncaught TypeError: Cannot read property 'selectAll' of undefined

Answer 1

你的數據不只是$x你需要的東西，如：

$x = array(); 
$y = array(); 

while($query_result = $result->fetch_assoc()) { 
    $x[] = $query_result['Animal']; 
    $y[] = $query_result['Count']; 
} 

$data = [ [ 
    "x" => $x, 
    "y" => $y, 
    "type" => "bar" 
] ]; 

echo json_encode($data); 

你的JS也需要用正確的數據類型：

$.get('../assets/php/Animals.php', null, function(data) { 
    Plotly.newPlot('AnimalChart', data); 
}, "json");