C3：从 PHP 生成的读数 JSON

Question

我是 C3（和 .js）的新手，但对它的功能印象深刻和兴奋。

我正在使用 PHP 根据以下教程从 MySQL 中提取数据集： http://www.d3noob.org/2013/02/using-mysql-database-as-source-of-data.html

我可以使用以下代码在 PHP 中成功生成 JSON 文件：

$myquery = "SELECT  `date`, `close` FROM  `data2`";
$query = mysql_query($myquery);

if ( ! $query ) {
   echo mysql_error();
    die;
}

$data = array();

for ($x = 0; $x < mysql_num_rows($query); $x++) {
   $data[] = mysql_fetch_assoc($query);
}

$output=json_encode($data); 
echo $output;
?>

这会生成以下内容 JSON：

[{"date":"1-May-12","close":"58.13"},{"date":"30-Apr-12","close":"53.98"},{"date":"27-Apr-12","close":"67.00"},{"date":"26-Apr-12","close":"89.70"},{"date":"25-Apr-12","close":"99.00"},{"date":"24-Apr-12","close":"130.28"},{"date":"23-Apr-12","close":"166.70"},{"date":"20-Apr-12","close":"234.98"},{"date":"19-Apr-12","close":"345.44"},{"date":"18-Apr-12","close":"443.34"},{"date":"17-Apr-12","close":"543.70"},{"date":"16-Apr-12","close":"580.13"},{"date":"13-Apr-12","close":"605.23"},{"date":"12-Apr-12","close":"622.77"},{"date":"11-Apr-12","close":"626.20"},{"date":"10-Apr-12","close":"628.44"},{"date":"9-Apr-12","close":"636.23"},{"date":"5-Apr-12","close":"633.68"},{"date":"4-Apr-12","close":"624.31"},{"date":"3-Apr-12","close":"629.32"},{"date":"2-Apr-12","close":"618.63"},{"date":"30-Mar-12","close":"599.55"},{"date":"29-Mar-12","close":"609.86"},{"date":"28-Mar-12","close":"617.62"},{"date":"27-Mar-12","close":"614.48"},{"date":"26-Mar-12","close":"606.98"}]

我的问题是我的 c3.js 代码无法呈现图表。不确定这是否是因为 JSON 格式正确。

这是我正在使用的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>

<!-- Here are all the javascripts and css that you need, you can  download them or linked them like here -->
<script type="text/javascript" src="d3.js"></script>
<script type="text/javascript" src="c3.js"></script>
<link href="c3.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="chart"></div>
<script>

var obj2 = ['<?php echo $output; ?>'];


var chart = c3.generate({
       bindto: '#chart',
       data: {
          json: [
          obj2
          ], // or URL
       keys: {
       //                x: 'name', // it's possible to specify 'x' when category axis
       value: ['close '],
       }   
       },
 axis: {
        x: {
       //     type: 'category'
        }
    }
    });
</script>

</body>
</html>

这是我在图表中得到的结果： c3 空白图表 - http://imgur.com/SHPmVOb

任何帮助将不胜感激，因为我觉得这可能是学习 C3 的一大障碍。

谢谢

Answer 1

问题可能是 json_encode returns 和 JSON 作为字符串。所以您收到的并不是 JSON。使用 JSON.parse（您的数据来自 json_encode）；获取 JS JSON 对象并从那里开始。

C3：从 PHP 生成的读数 JSON

C3: reading JSON generated from PHP

php

mysql

json

c3.js