Блог

Я пытаюсь построить c3.js линейный график из данных, полученных с помощью php из базы данных mysql.

  var chart = c3.generate({
  bindto: '#linear-chart',
  data: {
    json:lineChartData,
    keys:{
      value: ['date', 'temp'],
    }
  },
  zoom: {
    enabled: true
  }
});
  

lineChartData — данные json из mysql и выглядит как:

 [{date: Wed Mar 13 2019, temp: 200},{.......}]
  

Как должны быть готовы данные json, отправленные в c3.js ?

Вы можете легко отобразить свои данные json в C3.js выполняя:

 var dataset = <?php echo $lineChartData; ?>; 
data: { 
    json: dataset
    }
  

Я использую тот же конвейер, который вы используете для моего веб-проекта (mySQL-PHP-C3.js ). Важно, чтобы ваши данные json были именно в том формате, который необходим C3 для imput. Как вы можете прочитать в C3.js документация (https://c3js.org/samples/timeseries.html ) формат данных для временных рядов должен быть следующим:

 data: {
       x: 'x',
       //  xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
       columns: [
           ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
       //  ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
           ['data1', 30, 200, 100, 400, 150, 250],
           ['data2', 130, 340, 200, 500, 250, 350]
         ]
      },
axis: {
       x: {
           type: 'timeseries',
           tick: {
             format: '%Y-%m-%d'
           }
         }
       }
  

Для моих данных (не данных временных рядов) объект json выглядит следующим образом:

 {"data1": [0.23, 0.29, 0.19, 0.14, 0.7], "data2": [0, 0.25, 0.61, 0.4, 0.52]}
  

Если вы будете следовать этой структуре и добавите к ней свои временные данные (дату) в качестве третьего измерения, вы сможете достичь желаемого.