c3js를 사용하여 X 축에 주 간격을 그리는 방법은 무엇입니까? 내가 사용하고자하는 것을 그 안에 여러 날짜가있는 JSON 파일이 <a href="https://i.stack.imgur.com/J0AXS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J0AXS.png" alt="enter image description here"></a></p> <p>:

Question

나는 아래 그림과 같이 x 축에서 일주일 간격을 표시 c3.js 라이브러리와 그래프를 플롯 할 :

{ 
    "foo": 1, 
    "date": "2016-09-20" 
}, 
{ 
    "foo": 2, 
    "date": "2016-09-21" 
}, 
{ 
    ... 
} 

어떻게하면됩니까?

Answer 1

나는 이것이 주석이 될 수는 있지만, 그렇게 할 수는 없으므로, 내 권장 사항은 c3.js가 아닌 d3.js를 사용하여이 선 그래프를 작성하는 것이 될 것입니다. 위의 도표를 생성하는 정말 좋은 자습서 Setting up axes in d3.js이 있으며 x 축을 원하는대로 사용자 정의 할 수 있습니다. weekly x axis

Answer 2

이 질문에 대한 답변을 발견했습니다. JSON 데이터에 "weekDetails"라는 필드가 있습니다.이 필드에는 각 레지스터에 대해 "Sep 22-28"과 같이 주 간격이있는 문자열이 들어 있습니다. 마음에이 정보를 내가 JSON을로드하고 X 축에 대한 키 값을 지정하기 위해 다음과 같은 함수를 호출해야, 즉 "weekDetails"그 후

chart.load({ 
    json: myJson, 
    keys: { 
     x: 'weekDetails', 
     value: ['value1', 'value2', 'value3'] 
    } 

}); 

, 당신은 X 속성을 변경해야합니다 : 다음과 같은 c3.generate() 함수에서 '카테고리'로 :

axis: { 
    x: { 
     type: 'category' 
    } 
} 

그리고 내 JSON 파일 것 같은 :

{ 
    "foo": "foo", 
    "weekDetails": "Sep 1-7" 
}, 
{ 
    "foo": "foo", 
    "weekDetails": "Sep 8-15" 
}, 
{ 
    "foo": "foo", 
    "weekDetails": "Sep 16-23" 
}...