Графический график в C3.js с использованием массива

Question

У меня есть два массива. Один имеет имена (nameArray), а другой - count (countArray). Значения для массивов будут получены через API.

var chart = c3.generate({ 
    bindto: '#chart', 
    data: { 
     columns: [ 
     ['data1', 30, 200, 100, 400, 150, 250] 
     ] 
    } 
}); 

Приведенный выше пример кода можно получить на веб-сайте C3.js. Мне нужно, чтобы он вел себя по-другому.

Примеры массивов: -

nameArray=["name1","name2","name3"] 
countArray=[20,34,12] 

В этом примере, я хочу, чтобы имена вдоль оси Х и считать, что вдоль оси Y. Пожалуйста, помогите мне в этом. Благодаря

Answer 1

C3 имеет возможность принимать Row Oriented Data:

var chart = c3.generate({ 
data: { 
    rows: [ 
      ['data1', 'data2', 'data3'], 
      [90, 120, 300], 
      [40, 160, 240], 
      [50, 200, 290], 
      [120, 160, 230], 
      [80, 130, 300], 
      [90, 220, 320], 
     ] 
    } 
}); 

не то, что вы хотите? Вам просто нужно объединить nameArray и countArray в массив массивов:

var data = []; 
data.push(nameArray); 
//do this for each count array 
data.push(countArray); 

Затем сделайте:

var chart = c3.generate({ 
    data: { rows: data } 
}); 

Редактировать

Я думаю, что я следую за вами прямо сейчас. Есть this что вы хотите?

В этом случае вам нужна функция Category Axis. Для получения данных, которые вы должны сделать следующее:

//your arrays 
var nameArray=["name1","name2","name3"] 
var countArray=[20,34,12] 

countArray.unshift('data'); 

var chart = c3.generate({ 
    data: { 
     columns: [countArray] 
    }, 
    axis:{ 
     x:{ 
     type: 'category', 
     categories: nameArray 
     } 
    } 
});