c3js - x 축의 초기 날짜 레이블을 변경하십시오.

timeseries 유형의 c3js 라인 그래프가 있습니다.c3js - x 축의 초기 날짜 레이블을 변경하십시오.

Showing the x-axis 11/10.....05/11.....11/11.....05/12.....11/12.....05/13.....11/13

그리고 그것은 데이터 포인트에 있습니다, 그것은 각각의 점은 한 달을 나타냅니다

.12/10.....06/11.....12/11.....06/12.....12/12.....06/13.....

할 것을 권장합니다

내 축 테이블은 다음과 같이 현재 11/10이 계속 표시되고 축 라벨링 만 변경되었습니다. FYI 증분은 직접 설정하지 않고 culling을 사용하여 해킹합니다.

시작 라벨을 12/10 (모든 후속 라벨은 6 개월 간격으로 증가)으로 변경할 수 있습니까?

업데이트 (14NOV14) : 나는 당신이 땜질을 할 수 있도록 jsFiddle을 추가했습니다. 어떤 도움을 주셔서 감사합니다! 업데이트 (14NOV14) : 이것을 위해 using functions을 시도했습니다. 하지만 '팝업'상자에 항상 회색 표제를 표시하고 싶습니다.

출처

2014-11-12 dayuloli

당신은 당신이 잘하고있는 것을 이해하기 위해 함께 plunkr을 넣을 수 있습니까? –

@Sebastian Plu - 하나 만들려고하는데 ... 그러나별로 행운이 없다 - http://plnkr.co/edit/yASPgG76uA7WDsZz2Au4?p=preview 및 http://jsfiddle.net/ew9kpx3r/ – dayuloli

@ Seebastian Plu - http://c3js.org/samples/timeseries.html을 보면, 내가 원했던 것과 동등한 것은 x 축이 '2013-01-02'에 축 레이블링을 시작하는 것뿐입니다. 2 일마다 라벨을 붙이십시오. 따라서 2013-01-01, 2013-01-03은 데이터 포인트가 아직 남아 있어도 놓칠 수 있습니다. – dayuloli

매우 심하게 기록 된 라이브러리의 경우 매우 힘든 학습 과정이었습니다. 하지만 tick에 format 옵션을위한 함수를 사용하고 툴팁에 대한 제목을 다시 포맷해야했습니다. 여기에 final, working copy이 있습니다.

HTML (너무 d3.js, c3.js 및 c3.css 스크립트 포함)

<body> 
    <div id="chartContainer"></div> 
</body>

var chart = c3.generate({ 
    bindto: '#chartContainer', 
    data: { 
     x: 'x', 
     columns: [ 
      ['x', '2013-04-01', '2013-05-02', '2013-06-03', '2013-07-04', '2013-08-05', '2013-09-06'], 
      ['data1', 30, 200, 100, 400, 150, 250], 
      ['data2', 130, 340, 200, 500, 250, 350] 
     ] 
    }, 
    axis: { 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: function (x) { 
        if((x.getMonth()+1) % 6 === 0) { 
         return ('0' + (x.getMonth()+1)).slice(-2) + '/' + x.getFullYear().toString().substr(2,2); 
        } 
       } 
      } 
     } 
    }, 
    tooltip: { 
     format: { 
      title: function (d) { 
       var format = d3.time.format('%m/%y'); 
       return format(d) 
      } 
     } 
    } 
});

N.B. 또한 culling이 간섭을 일으킬 수 있습니다. 내장 된 증분이 적용되지 않도록 culling: {max: 100}을 설정해야했습니다.

출처

2014-11-14 03:07:43 dayuloli

c3js - x 축의 초기 날짜 레이블을 변경하십시오.

답변

관련 문제