Question

我正在尝试使用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后，它看起来像这样： [{＆＃34;标签＆＃34;：＆＃34; 204751＆＃34;＆＃34; Y＆＃34;：＆＃34; 63.6404＆＃34;}，{＆＃34;标签＆＃34 ;: ＆＃34; 133236＆＃34;＆＃34; Y＆＃34;：＆＃34; 57.0851＆＃34;}]

但是在我调用JSON.parse之后，当它在x值中进行烘焙时......它看起来像是与主php数组的索引相对应。

如果我将JSON.parse更改为$ .parseJSON（），则不包括x值，但图表仍然不显示。

编辑2

帮助排除故障，我已经对javasript中的数据进行了硬编码。我已经使数据点看起来像我正在处理的json数据。代码在这里：http://pastebin.com/HBj5iArn 谁能告诉我我做错了什么？

编辑3

我想我需要：

使用JSON.parse
转换所有＆＃34; y＆＃34;不知何故，对象中的值为int。

Answer 1

我通过循环遍历json对象并将所有“y”值显式地转换为float来实现它：

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();
}

canvasjs柱形图 - 有＆＃39; x＆＃39; json对象中的值，我不知道它来自哪里

1 个答案: