Как загрузить json-кодированный массив в качестве оси x для c3.js?

Question

В значительной степени название. У меня есть массив серийных номеров, которые я хочу сделать как ось x. Сам массив данных был втянут из базы данных через PHP. Затем я json_encode сделал это и превратил его в массив js. Проблема, с которой я сталкиваюсь, заключается в том, что для json: и columns есть отдельный раздел: при генерации графа C3js.

var jsarray = <?php echo json_encode($array) ?>; 
var chart = c3.generate({ 
    bindto: '#chart', 
     data: { 
      x: 'js_array', 
      columns: [ 
       ['x', js_array] 
      ], 
      json: { 
       Data_points, 
       Data_points2  
      }, 
     axis: { 
      y: { 
       label: { // ADD 
        text: 'Y axis title', 
        position: 'outer-middle' 
       } 

      } 
     } 
}); 

Я попытался, глядя на пример в документации c3.js, но у них есть отдельные разделы для данных JSON и форматирования оси х. Я не видел раздел, где они объединили оба.

Answer 1

Если я правильно понял, вы хотите иметь возможность маркировать точки данных X-Axis при использовании данных JSON, вроде этого: http://c3js.org/samples/data_stringx.html?

Если у вас есть данные в вашем PHP, который выглядит примерно так:

$php_data = array(
    'x_labels' => array('MON', 'TUE', 'WED', 'THU', 'FRI'), 
    'data1' => array(30, 200, 100, 400, 150, 250), 
    'data2' => array(50, 20, 10, 40, 15, 25) 
); 

... то вы должны быть в состоянии достичь что-то похожее на приведенном выше примере с использованием данных в формате JSON, как так:

var json_data = <?php echo json_encode($php_data) ?>; 
var chart = c3.generate({ 
    bindto: "#chart", 
    data: { 
     x: 'x_labels', 
     json: json_data 
    }, 
    axis: { 
     x: { 
      type: 'category' 
     }, 
     y: { 
      label: 'number' 
     } 
    } 
}); 

Часть data: { x: 'x_labels' } сообщает библиотеке использовать данные под символом массива «x_labels» на этикетках оси, а затем под axis: { x: { type: 'category' } } мы указываем, что мы хотим использовать строки для типа метки, а не числа. Вы не должны указывать это, если ваши метки оси - это числа (например, 'x_labels' => array(1, 2, 3, 4, 5)).

Вот jsfiddle, если вы хотите поиграть с ним: https://jsfiddle.net/WingZero/Ldk4shLz/3/