canvasjs柱形圖 - 在json對象中有'x'值，我不知道它來自何處

我正在嘗試使用canvasjs。canvasjs柱形圖 - 在json對象中有'x'值，我不知道它來自何處

我有以下的測試代碼：

9 $con = pg_connect("host=localhost port=5432 dbname=testdb user=postgres") or die ("Could not connect to server\n"); 
10 $query ="SELECT id as label, SUM(charge) as y 
11   FROM bill 
12   WHERE id is not null and cust_id=1 and charge > 0.05 
13   GROUP BY id 
14   ORDER BY SUM(charge) DESC 
15   LIMIT 2"; 
16 $result = pg_query($con, $query) or die ("Cannot execute query: $query\n"); 
17 if (!$result) { 
18   echo "An error occurred.\n"; 
19   exit; 
20 } 
21 $users = pg_fetch_all($result); 
22 ?> 
23 <!DOCTYPE HTML> 
24 <html> 
25 <head> 
26 <script src="assets/js/jquery-2.2.3.min.js"></script> 
27 <script src="assets/js/canvasjs.min.js"></script> 
28 <script type="text/javascript"> 
29 
30 window.onload = function() { 
31   var users = '<?php echo json_encode($users); ?>'; 
32   users = JSON.parse(users); 
33 console.log(Object.keys(users).length); 
34 
35 console.log(users); 
36   var chart = new CanvasJS.Chart("chartContainer", { 
37     title:{ 
38       text: "Who's killing the Bill?"    
39     }, 
40     data: [    
41     { 
42       // Change type to "doughnut", "line", "splineArea", etc. 
43       type: "column", 
44       dataPoints: users 
45     } 
46     ] 
47   }); 
48   chart.render(); 
49 }

正如你所看到的，我只選擇兩個字段：標籤和y。但不知何故，當我看的console.log輸出，我看到了以下數據：（只顯示一個記錄）

Object 
    label:"204751" 
    x:0 
    y:"63.6404"

我不知道在哪裏的x值的來源。但我認爲這就是我的圖表沒有出現的原因。那麼，我確實得到了沿x軸出現的標籤，但沒有出現y軸，也沒有漂亮的酒吧。 :(

我在哪裏誤入歧途？

編輯1

我想我知道發生了什麼事情，但我不知道如何解決它。這是樣品我PHP數據之前，我json_encode它：

Array ([0] => Array ([label] => 204751 [y] => 63.6404) [1] => Array ([label] => 133236 [y] => 57.0851))

我打電話json_encode之後，它看起來像這樣： [{ 「標籤」：「204751」，「Y」：「63.6404」}，{ 「標籤」：」 133236" ，「Y」：「57.08 51「}]

但是在我調用JSON.parse之後，這就是它在x值中烘烤的時候......並且它看起來像它與主php數組的索引一致。

如果我將JSON.parse更改爲$ .parseJSON（），則不包括x值，但圖表仍然不顯示。

EDIT 2

幫助解決問題，我在javasript硬編碼的數據。我已經使數據點看起來像我正在處理的json數據。代碼在這裏：http://pastebin.com/HBj5iArn 任何人都可以告訴我我做錯了什麼嗎？

編輯3

我想我需要：

使用JSON.parse
轉換對象中的所有「y」的值以某種方式詮釋。

來源

2016-04-28 Happydevdays

你不使用'json_encode'後需要'JSON.parse'。你可以簡單地做'var users = <？php echo json_encode（$ users）; ？>;'注意php標籤周圍沒有單引號（'''）。 – Terminus

我得到它的工作通過JSON對象循環和明確鑄造所有的「Y」值浮動：

window.onload = function() { 
     var users = '<?php echo json_encode($users); ?>'; 
     users = JSON.parse(users); 

for(var i = 0; i < users.length; i++) { 
    var obj = users[i]; 
    obj.y = parseFloat(obj.y); 
} 
console.log(users); 

     var chart = new CanvasJS.Chart("chartContainer", { 
       title:{ 
         text: "Top 20" 
       }, 
       axisX: { 
         title: "Users", 
       }, 
       axisY: { 
         title: "Dollars",  
       }, 
       data: [    
       { 
         type: "column", 
         dataPoints: users 

       } 
       ] 
     }); 
//  chart.options.data=users; 
     chart.render(); 
}

來源

2016-04-28 19:54:55 Happydevdays

canvasjs柱形圖 - 在json對象中有'x'值，我不知道它來自何處

回答

相關問題