C3.js 용 JSON 형식화

Question

C3.js 선 그래프에 대해 x 및 y 축으로 변환해야하는 특정 JSON 출력이 있지만 현재 형식이 마음에 들지 않습니다.

{ 
    "results": [ 
     { 
      "param": "x", 
      "val": [ 
       1, 
       2, 
       3, 
       4 
      ] 
     }, 
     { 
      "param": "y", 
      "val": [ 
       2, 
       3, 
       5, 
       6 
      ] 
     } 
    ] 
} 

C3로 읽을 수 있도록이 (JS 사용)을 변형하는 가장 좋은 방법은 무엇입니까?

은 궁극적으로 여러 개의 XY 라인 차트를 업로드 할거야 나는 this sample code 같은 것을해야거야 추측, 대신 JSON에서 잡아 당겨있어 너무 :

var chart = c3.generate({ 
    data: { 
     url: '/sampleJSON', 
     mimeType: 'json', 
     xs: { 
      'param-y': 'param-x', 
      'data2': 'x2', //not sure how to name these ones differently on load, but this is a different issue 
     }, 
     columns: [ 
      ['param-x', 1, 2, 3, 4], 
      ['param-y', 2, 3, 5, 6], 
      ['x2', 30, 50, 75, 100, 120], //again just placeholder to eventually have other data 
      ['data2', 20, 180, 240, 100, 190] //again just placeholder to eventually have other data 
     ] 
    } 
}); 

Answer 1

을 대신 할 c3를 사용하여 json 요청, 난 그냥 세 단계로 처리 할 수 ​​있습니다.

1. json 호출.
2. 구조에 데이터를 강제 변환합니다. c3columns want.
3. 차트를 만듭니다.

---

d3.json("sample.json", function(data) { 
    var modData = []; 
    data.results.forEach(function(d, i) { 
    var item = ["param-" + d.param]; 
    d.val.forEach(function(j) { 
     item.push(j); 
    }); 
    modData.push(item); 
    }); 
    var chart = c3.generate({ 
    data: { 
     columns: modData 
    } 
    }); 
}); 

예 here.

Answer 2

그래서 Mark의 대답은 모든 노력이지만, Mark 's의 대답은 두 개의 독립적 인 그래프를 그리기 위해 C3을 사용하기 때문에 약간 수정 된 답변을 추가 할 것이라고 생각했습니다 (아래의 수정 된 코드는 그것은 X/Y cordintes로 JSON의 객체를 플롯 : http://c3js.org/reference.html#data-keys

수 있습니다 se :

이

d3.json("sample.json", function(data) { 
    var modData = []; 
    data.results.forEach(function(d, i) { 
    var item = ["param-" + d.param]; 
    d.val.forEach(function(j) { 
     item.push(j); 
    }); 
    modData.push(item); 
    }); 
    var chart = c3.generate({ 
    data: { 
     xs: { 
      'param-y':'param-x' 
     }, 
     columns: modData 
    } 
    }); 
}); 

당신은 내가 참고로이 페이지를 사용하는 것이 그 예를 here

Answer 3

내 약간의 편집을 볼 수 있습니다 e 특정 키에 대한 별도의 영역을 지정하는 방법

keys: { 
    // x: 'name', // it's possible to specify 'x' when category axis 
    value: ['upload', 'download'], 
}