【トラブル】【JavaScript】C3.jsの見切れる問題について対応する

トラブル/その他Web系

【1】X軸の目盛りの日付が見切れる

 * 以下のC3.jsの公式ページでも発生しているのだが、
   X軸の目盛りの日付が見切れ(Cut off)てしまっている
http://c3js.org/samples/timeseries.html

サンプル

右端に注目すると、X軸の目盛りの日付が見切れてしまっている 
<html>
<head>
<meta charset="UTF-8">
<!-- Load c3.css -->
<link href="./c3/c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="./c3/c3.js"></script></head>
</head>
<body>
<div id="chartToDrow"></div>
<script>
var chart = c3.generate({
  bindto: '#chartToDrow',
  data: {
      x: 'x',
      columns: [
          ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
          ['data1', 30, 200, 100, 400, 150, 250],
          ['data2', 130, 340, 200, 500, 250, 350]
      ]
  },
  axis: {
      x: {
          type: 'timeseries',
          tick: {
              format: '%Y-%m-%d'
          }
      }
  }
});
</script>
</body>
</html>

解決案

解決案1 : 「padding.right」を利用する 
var chart = c3.generate({
  bindto: '#chartToDrow',
  // ★ここ★
  padding: {
     right: 20
  },
  data: {
  ・・・略・・・
解決案2 : 「rotate」を利用する
http://blogs.yahoo.co.jp/dk521123/35526974.html
・・・略・・・
axis: {
    x: {
        type: 'timeseries',
        tick: {
            format: '%Y-%m-%d',
            // ★ここ★
            rotate: 85,
        }
    }
}

参考文献

http://stackoverflow.com/questions/32016266/c3-js-add-right-padding-to-timeseries-charts
* 上記以外の方法もあるようで...
http://stackoverflow.com/questions/29413916/c3-js-line-chart-issues-with-axis-labels

【2】Y軸のラベルが見切れる

 * Y軸のラベルが見切れ(Cut off)てしまうことがある
http://jsfiddle.net/DanielApt/bq17Lp02/1/

サンプル

<html>
<head>
<meta charset="UTF-8">
<!-- Load c3.css -->
<link href="./c3/c3.css" rel="stylesheet" type="text/css">
<!-- Load d3.js and c3.js -->
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<script src="./c3/c3.js"></script></head>
</head>
<body>
<div id="chartToDrow"></div>
<script>
var chart = c3.generate({
  bindto: '#chartToDrow',
  data: {
      json: [{'date': '2014-11-1', 'metric1': 300.2},
          {'date': '2014-11-2', 'metric1': 297},
          {'date': '2014-11-3', 'metric1': 250},
          {'date': '2014-11-4', 'metric1': 250}],

      keys: {
          x: 'date',
          value: ['metric1']
      },
      types: {
          metric1: 'spline'
      }
  },
  axis: {
      x: {
          type: 'timeseries',
          tick: {
              format: '%d-%m'
          }
      },
      y: {
          label: 'Metric is cut off yygg',
          tick: {
              count:3,
              format: function(){return''}
          }
      }
  }
});
</script>
</body>
</html>

解決案

解決案1 : 「label.position: 'xxxx-xxxxx'」を利用する
http://c3js.org/samples/axes_label_position.html
y: {
    // ★ここ★
    label: {
       text: 'Metric is cut off yygg',
       position: 'outer-middle'
    },
    tick: {
    ・・・略・・・
解決案2 : 「tick.format」を設定する 
y: {
    label: 'Metric is cut off yygg',
    tick: {
        count:1,
        format: function() {return '0'}
    }
}

参考文献

http://stackoverflow.com/questions/27294144/c3js-how-to-hide-ticks-on-y-axis-y-axis-label-is-cut-off

関連記事

C3.js ～ ツールチップあれこれ ～

http://blogs.yahoo.co.jp/dk521123/35526974.html