c3.js TypeError:b.value未定义

时间:2016-05-09 13:29:19

标签: javascript json c3.js

我正在尝试使用在PHP中创建的JSON对象创建图形。我一直在JS日志中得到 TypeError:b.value未定义,但我的数据似乎与其文档中的示例格式相同。

for($i = 0; $i < 10; $i++){
  $da=date("Y-m-d", strtotime('-'. $i .' days'));
  $a=mt_rand(150,200);
  $b=mt_rand(100,150);
  $ar["date"][]=$da;
  $ar["Score"][]=$a;
  $ar["ScoreB"][]=$b;

}  
 $all=json_encode($ar);      

 <script>
    var arr=<?php echo $all; ?>;
    var chart = c3.generate({
         bindto: '#scoring',
        data: {
            json: arr,
            type: 'spline',
            keys:{
                x:'date'
            }
        },
        color: {
            pattern: ['red', 'orange']
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%Y-%m-%d'
                }
            }
        }
    });

对象是

{"date":"2016-05-09","2016-05-08","2016-05-07","2016-05-06","2016-05-05","2016-05-04","2016-05-03","2016-05-02","2016-05-01","2016-04-30"],"Score":[182,163,196,153,180,154,170,177,191,173],"ScoreB":[121,149,138,113,104,107,111,109,119,132]} 

我也用

格式的对象运行它
[{"date":"2016-05-09","Score":191,"ScoreB":119},{"date":"2016-05-08","Score":166,"ScoreB":140},{"date":"2016-05-07","Score":172,"ScoreB":103},{"date":"2016-05-06","Score":187,"ScoreB":139},{"date":"2016-05-05","Score":162,"ScoreB":100},{"date":"2016-05-04","Score":197,"ScoreB":121},{"date":"2016-05-03","Score":167,"ScoreB":145},{"date":"2016-05-02","Score":160,"ScoreB":137},{"date":"2016-05-01","Score":175,"ScoreB":100},{"date":"2016-04-30","Score":156,"ScoreB":127}] 

我仍然有同样的错误。

我已经被困在这一天了,看起来应该很容易,但我无法理解。如果我将相同的数据放在&#34;列&#34;的格式中它可以工作但是我需要这个JSON才能工作。

1 个答案:

答案 0 :(得分:1)

这适用于剪切后粘贴到http://c3js.org/samples/timeseries.html的情况,通过添加的字段查看密钥部分的更改 - http://c3js.org/reference.html#data-keys < / p>

唯一的区别是我更改了绑定ID以在c3示例页面中工作,我直接使用了json,而不是php生成的。

var arr = [{"date":"2016-05-09","Score":191,"ScoreB":119},{"date":"2016-05-08","Score":166,"ScoreB":140},{"date":"2016-05-07","Score":172,"ScoreB":103},{"date":"2016-05-06","Score":187,"ScoreB":139},{"date":"2016-05-05","Score":162,"ScoreB":100},{"date":"2016-05-04","Score":197,"ScoreB":121},{"date":"2016-05-03","Score":167,"ScoreB":145},{"date":"2016-05-02","Score":160,"ScoreB":137},{"date":"2016-05-01","Score":175,"ScoreB":100},{"date":"2016-04-30","Score":156,"ScoreB":127}]; ;

var chart = c3.generate({
        bindto: '#chart',
        data: {
            json: arr,
            type: 'spline',
            keys:{
                x:'date',
                value: ['Score', 'ScoreB'], // IMPORTANT
            }
        },
        color: {
            pattern: ['red', 'orange']
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%Y-%m-%d'
                }
            }
        }
    });