我正在尝试使用canvasjs。
我有以下测试代码:
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 }
如您所见，我只选择了两个字段:label 和 y。 但不知何故，当我查看 console.log 输出时，我看到以下数据:(仅显示一条记录)
Object
label:"204751"
x:0
y:"63.6404"
我不知道 x 值来自哪里。但我认为这就是我的图表没有出现的原因。好吧，我确实得到了沿 x 轴出现的标签，但没有 y 轴，也没有漂亮的条形。 :(
我哪里迷路了？
编辑 1
我想我知道发生了什么事，但我不知道如何解决。 这是我对 json_encode 之前的 php 数据的示例:
Array ( [0] => Array ( [label] => 204751 [y] => 63.6404 ) [1] => Array ( [label] => 133236 [y] => 57.0851 ) )
调用 json_encode 后，它看起来像这样: [{"label":"204751","y":"63.6404"},{"label":"133236","y":"57.0851"}]
但是在我调用 JSON.parse 后，它就会烘焙 x 值...并且看起来它与主 php 数组的索引相对应。
如果我将 JSON.parse 更改为 $.parseJSON() ，则不包含 x 值，但图表仍然不显示。
编辑2
帮助解决问题，我已经将数据硬编码在javasript中。 我已经使数据点看起来像我正在处理的 json 数据。 代码在这里:http://pastebin.com/HBj5iArn 谁能告诉我我做错了什么？
编辑3
我认为我需要:
- 使用 JSON.parse
- 以某种方式将对象中的所有“y”值转换为 int。
最佳答案
我通过循环 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();
}
关于javascript - canvasjs 柱形图 - json 对象中有 'x' 值，我不知道它来自哪里，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36922546/