javascript — диаграмма столбцов canvasjs — имеет значение «x» в объекте json, и я не знаю, откуда оно

Question

javascript — диаграмма столбцов canvasjs — имеет значение «x» в объекте json, и я не знаю, откуда оно

Я пробую свои силы в использовании 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

Я думаю, что знаю, что происходит, но я не знаю, как это исправить.
Это пример моих данных php, прежде чем я json_encode его:

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

После того, как я вызываю json_encode, это выглядит так:
[{ «Метка»: «204751», «у»: «63,6404»}, { «метка»: «133236», «у»: «57,0851»}]

Но после того, как я вызываю JSON.parse, именно тогда он запекается в значении x … и похоже, что он соответствует индексу основного массива php.

Если я изменю JSON.parse на $ .parseJSON (), тогда значение x не будет включено, но диаграмма все равно не отобразится.

РЕДАКТИРОВАТЬ 2

Помощь в устранении неполадок, я жестко закодировал данные в javasript.
Я сделал точки данных похожими на данные JSON, с которыми я имею дело.
Код здесь: http://pastebin.com/HBj5iArn
Может кто-нибудь сказать мне, что я делаю не так?

РЕДАКТИРОВАТЬ 3

Я думаю, что мне нужно:

использовать JSON.parse
преобразовать все значения «y» в объекте в int как-нибудь.

1

canvasjs javascript jquery json php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я получил его, работая с циклом через объект 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();
}

0