c3.js TypeError: b.value undefined

Question

Я пытаюсь создать граф, используя объект JSON, созданный на моем PHP. Я продолжаю получать TypeError: b.value не определено в журнале JS, но мои данные, похоже, в том же формате, что и пример в их документации.

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}] 

И я до сих пор ту же ошибку.

Я застрял на этом в течение дня, и кажется, что это должно быть легко, но я не могу понять это. Если я помещаю те же данные в формате «столбцы», это работает, но в будущем мне нужен этот JSON для работы.

Answer 1

Это работает для меня, когда cut'n'pasted в http://c3js.org/samples/timeseries.html, увидеть изменения в разделе ключей с дополнительным значение поле - http://c3js.org/reference.html#data-keys

Единственное отличие состоит в том, что я изменил связывающую идентификатор для работы в на странице примеров 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' 
       } 
      } 
     } 
    });