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で行を取得するにはこの行が何であるかを記述する1つのテキストで、あなたのダニのようなものではありません。私はこれがタイムスタンプをあなたのグラフに浮かべるよりも優れていると思います。

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

この行は少し薄いかもしれませんが、CSSを変更すると太くすることができます。私はそれがc3-ygrid-lineだと思う。詳しい情報を得るには、いつでも使用できますthe reference