2017-03-15 49 views
0

これは、x軸より下の負の値と円の括弧で囲まれた負の値のように見せたいからです。チャートは現時点でどのように見えるかC3.jsのx軸の下に負の値を表示する方法

enter image description here

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("$,") 
      } 
     }, 
    } 
}); 

enter image description here

答えて

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

関連する問題