C3.js의 x 축 아래에 음수 값을 표시하는 방법

Question

이렇게하면 x 축 아래의 음수 값과 원형 괄호로 감싸는 음수 값으로 표시됩니다. 차트가 현재처럼 보이는 방법

C3.js 코드

var chart = c3.generate({ 
    bindto : "#totalDollarFlow", 
    size : { 
     height : 400, 
     width : 700 
    }, 
    title : { 
     text : data.title 
    }, 
    data : { 
     x : labels, 
     columns : data.columns, 
     axes : { 
      data1 : 'y', 
     }, 
     type : 'bar', 
     types : { 
      data1 : 'line', 
     }, 
     names : { 
     }, 
     colors : { 
      data1 : '#2ca02c', 

     }, 
     selection : { 
      enabled : true, 
      draggable : false, 
      multiple : true, 
      grouped : true 
     } 
    }, 
    subchart : { 
     show : false 
    }, 
    point : { 
     show : false 
    }, 

    zoom : { 
     enabled : true, 
     rescale : true 
    }, 
    grid : { 
     y : { 
      show : true 
     } 
    }, 
    regions : [ { 
     axis : 'y', 
     start : 186, 
     end : 187, 
     class : 'regionY' 
    } ], 
    axis : { 
     x : { 
      type : 'category', 
      tick : { 
       rotate : 90, 
       centered : true, 
       fit : true, 
       multiline : false, 
       culling : { 
        max : 60 
       } 
      }, 
     }, 
     y : { 
      label : { 
       text : '$s Millions', 
       position : 'outer-middle' 
      }, 
      tick : { 
       format : d3.format("$,") 
      } 
     }, 
    } 
}); 

.

Answer 1

나는 당신이 원하는 모든 것이 가능하다면 모르겠지만 적어도 당신 가까이 그것을 얻을 수 있습니다. 당신의 Y 축이이 형식을 사용할 수있는 경우 :

y : { 
      label : { 
       text : '$s Millions', 
       position : 'outer-middle' 
      }, 
      tick : { 
       format: function (d) { 
        const realNumber = d*1000000;  
        return realNumber.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'); 
       } 
      } 
     } 

는 또한 여기에 텍스트를 설정할 수 있습니다 위치 0에서 y 축에 대한 그리드 선을 정의 할 수 있습니다 0 선을 얻을 수 있지만하려면 이 라인이 무엇인지 설명하고 틱이 마음에 들지 않는 텍스트. 내 생각에 이것은 타임 스탬프가 차트에 떠있는 것보다 낫다고 생각합니다.

grid : { 
     y : { 
      show : true, 
      lines: [ 
       {value: 0}, 
      ] 
     } 
    } 

이 줄은 조금 얇을 수 있지만 CSS를 바꿀 때 두껍게 만들 수 있습니다. 나는 그것이 c3-ygrid-line이었다고 생각한다. 더 많은 정보를 얻으려면 항상 사용할 수 있습니다 the reference