C3js : 각 라인의 맞춤 날짜

Question

이렇게하면 데이터를 작성할 수 있습니까?

['2013-01-01', 'redline', 120], 
['2013-01-02', 'greenline', 160], 
['2013-01-02', 'blueline', 200], 
['2013-01-04', 'greenline', 160], 

"n"개의 다른 라인이 있으며 각각 다른 날짜가 있습니다 ... 어떻게 C3js로 그릴 수 있습니까?

가하는 multiple x chart in c3js 사용하려면 여러 XS 값을 선언해야합니다 : 정말 매우

Answer 1

는 당신이 필요로하는 것은이 같은 복수의 X 축과 선형 차트, 어떤 도움을 appresiate 될 것입니다.

여기에 날짜를 추가해야 할 것 같아서 데이터와 날짜가 포함 된 배열을 전역으로 만들었습니다.

하단의 기능은 새로운 날짜와 데이터를 배열에 푸시합니다.

이러한 변수를 c3js로로드하려면 concat 함수를 사용하십시오.

//Declare three x axes, and a dataset for each axis. 
var periodOne = ['2013-01-01', '2013-01-04', '2013-01-07','2013-01-11','2013-01-15']; 
var periodTwo = ['2013-01-02', '2013-01-04', '2013-01-06','2013-01-08', '2013-01-10','2013-01-13', '2013-01-15','2013-01-18', '2013-01-22']; 
var periodThr = ['2013-01-05', '2013-01-10', '2013-01-15','2013-01-20', '2013-01-25']; 
var xOne = [12,31,14,13,34]; 
var xTwo = [11,13,14,23,63,27,21,19,15]; 
var xThr = [12,32,13,13,23]; 

var chart = c3.generate({ 
     data: { 
      xs:{ 
       //Declare the axes 
       'Winter 08,09': 'x1', 
       'Winter 09,10': 'x2', 
       'Winter 10,11': 'x3' 
      }, 
      columns: [ 
       ['x1'].concat(periodOne), 
       ['x2'].concat(periodTwo), 
       ['x3'].concat(periodThr), 
       ['Winter 08,09'].concat(xOne), 
       ['Winter 09,10'].concat(xTwo), 
       ['Winter 10,11'].concat(xThr) 
      ] 
     }, 
     axis: { 
      x: { 
       type: 'timeseries' 
      } 
     } 
    }); 
//You don't need this for multiple x axes, it's just to push data to arrays 
function push(oneValue, oneDate, twoValue, twoDate, thrValue, thrDate){ 
    periodOne[periodOne.length] = oneDate; 
    xOne[xOne.length] = oneValue; 
    periodTwo[periodTwo.length] = twoDate; 
    xTwo[xTwo.length] = twoValue; 
    periodThr[periodThr.length] = thrDate; 
    xThr[xThr.length] = thrValue; 
    chart.load({ 
     columns: [ 
      ['x1'].concat(periodOne), 
      ['x2'].concat(periodTwo), 
      ['x3'].concat(periodThr), 
      ['Winter 08,09'].concat(xOne), 
      ['Winter 09,10'].concat(xTwo), 
      ['Winter 10,11'].concat(xThr) 
     ] 
    }); 
} 
//Use this function to push new data 
push(13, '2013-01-19', 23, '2013-01-24', 17, '2013-01-30');