c3.js與JSON，分割線條

Question

我有一個JSON數組，並且想用C3.js製作一個圖表。我的例子只給我一行。我想爲每個用戶顯示一行。我怎樣才能做到這一點？

這裏是我的代碼：

this.chart = c3.generate({ 
    data: { 
     json: [ 
      { 
       ExamID: 'Exam1', 
       result: 80, 
       user:"user1" 
      }, 
      { 
       ExamID: 'Exam2', 
       result: 90, 
       user:"user1" 
      }, 
      { 
       ExamID: 'Exam1', 
       result: 70, 
       user:"user2" 
      }, 
      { 
       ExamID: 'Exam2', 
       result: 60, 
       user:"user2" 
      } 
     ], 
     keys: { 
      x: 'ExamID', 
      value: ['result'], 
     }, 
    }, 
    axis: { 
     x: { 
      type: 'category', 
     } 
    } 
}); 

Answer 1

你需要有不同的JSON結構。數組中的每個對象（每個考試）都需要有所有學生的成績。您可以爲每個學生使用一把鑰匙，並使用屬性names重命名該圖例的鑰匙。這裏是一個小提琴：https://jsfiddle.net/b5pd3wn6/

var chart = c3.generate({ 
    bindto: "#element", 
    data: { 
     json: [ 
      { 
       ExamID: 'Exam1', 
       user1: 80, 
       user2: 50 
      }, { 
       ExamID: 'Exam2', 
       user1: 90, 
       user2: 40 
      } 
     ], 
     keys: { 
      x: 'ExamID', 
      value: ['user1', 'user2'] 
     }, 
     names: { 
      'user1': 'Peter Miller', 
      'user2': 'Vladimir Peterhans' 
     } 
    }, 
    axis: { 
     x: { 
      type: 'category' 
     } 
    } 
});