c3 차트의 x 축은 처음과 마지막 값만 표시합니다.

Question

js에 c3 차트가 사용됩니다. 내 코드는 다음과 같습니다.

c3.generate({ 
     bindto:'#someChart', 
     data: { 
      columns: [ 
       data 
      ] 
     }, 
     axis: { 
      x : { 
       type: 'categories', 
       categories:categories, 
       tick:{ 
        count: 12 
       } 
      } 
     }, 
     point:{ 
      show:false 
     } 
    }); 

하나의 문제가 있습니다. X 축에는 첫 번째와 마지막 값 (12 번째) 만 표시됩니다.

Answer 1

틱이 분수 x 값 (즉, 틱 수는 2.06666 범주마다 나타납니다.)에서 발생해야하는 경우 c3의 알려진 버그입니다. 그런 다음 렌더링하지 않습니다 ->https://github.com/c3js/c3/issues/1638

당신이 차트 생성하기 전에이 제공하는 것 수정 실행하는 데있다 - 지금 틱의 오른쪽 수를 표시하면서>

c3.chart.internal.fn.categoryName = function (i) { 
    var config = this.config, categoryIndex = Math.ceil(i); 
    return i < config.axis_x_categories.length ? config.axis_x_categories[categoryIndex] : i; 
}; 

을하지만 발견, 그것은 종종 여전히 레이블을 일치하지 않으며, 데이터 포인트에 잘 어울립니다 (중간에 중간에 위치 함).

그 점에서 가능한 경우 틱 수 (-1)를 분수없이 표시하려는 데이터 요소 수 (-1)로 나누면 더 좋을 것입니다. 초기 문제를 피하고 멋지게 정리하십시오.

예컨대 (datapoints - 1)/(no.of.ticks - 1) == 전체 숫자