mysqlデータからの複数行グラフc3

Question

私は、日付、時刻、およびパラメータ値を持つmysqlテーブルを持っています。私は、1日の時間軸をx軸、複数の行を毎日表示するグラフを表示したい。私はjson形式のデータを持っていますが、どのように複数の行を表示できますか、c3.jsには毎日1つずつ表示されますか？ Timeseries exampleを見ると

json format: [ 
    {"hour":"00:00:00","day":"2017-04-18","kpi":"41.54"}, 
    {"hour":"01:00:00","day":"2017-04-18","kpi":"0.00"}, 
    {"hour":"02:00:00","day":"2017-04-18","kpi":"0.00"}, 
    {"hour":"03:00:00","day":"2017-04-18","kpi":"0.00"}, 
    {"hour":"04:00:00","day":"2017-04-18","kpi":"0.00"}, 
    {"hour":"05:00:00","day":"2017-04-18","kpi":"0.00"}, 
    {"hour":"06:00:00","day":"2017-04-18","kpi":"31.94"}, 
    {"hour":"07:00:00","day":"2017-04-18","kpi":"47.44"}, 
    {"hour":"08:00:00","day":"2017-04-18","kpi":"35.05"}, 
    {"hour":"09:00:00","day":"2017-04-18","kpi":"43.24"}, 
    {"hour":"10:00:00","day":"2017-04-18","kpi":"32.40"}, 
    {"hour":"11:00:00","day":"2017-04-18","kpi":"32.03"}, 
    {"hour":"12:00:00","day":"2017-04-18","kpi":"37.22"}, 
    {"hour":"13:00:00","day":"2017-04-18","kpi":"30.85"}, 
    ... 
    {"hour":"00:00:00","day":"2017-04-19","kpi":"44.88"}, 
    {"hour":"01:00:00","day":"2017-04-19","kpi":"0.00"}, 
    {"hour":"02:00:00","day":"2017-04-19","kpi":"0.00"}, 
    {"hour":"03:00:00","day":"2017-04-19","kpi":"0.00"}, 
    {"hour":"04:00:00","day":"2017-04-19","kpi":"0.00"}, 
    {"hour":"05:00:00","day":"2017-04-19","kpi":"0.00"}, 
    {"hour":"06:00:00","day":"2017-04-19","kpi":"38.75"}, 
    {"hour":"07:00:00","day":"2017-04-19","kpi":"40.03"}, 
    {"hour":"08:00:00","day":"2017-04-19","kpi":"37.36"} 
] 

Answer 1

、あなたは一日の時間を示したチャート作ることができます。

var xHours = ['myXValues', "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"], 
    timeFormat = '%H:%M'; 

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
     x: 'myXValues', 
     xFormat: timeFormat, 
     columns: [ 
      //xHours, 
      //['test', 30, 20, 10, 40, 15, 25], 
     ], 
    }, 
    axis: { 
     x: { type: 'timeseries' } 
    } 
}); 

を次に、あなたはその長いJSON配列を分割する必要があります。それぞれの日のために、含まれている配列を作成その日付のkpiの値。

最後に、これらのより小さいアレイのそれぞれをチャート（chart.load()）にロードします。

コメントを追加した例：https://codepen.io/Sphinxxxx/pen/BRLPwP?editors=0010