C3 JS：大軸ラベルたとえば

Question

：

var chart = c3.generate({ 
    data: { 
     x : 'x', 
     columns: [ 
      ['x', 'www.site1.com11111111111111111111111111111111111111111111111111111', 'www.site2.com11111111111111111111111111111111111111111111111111111111', 'www.site3.com11111111111111111111111111111111111111111111111111111111111111', 'www.site4.com11111111111111111111111111111111111111111111111111111111111111111111111111'], 
      ['download', 30, 200, 100, 400], 
      ['loading', 90, 100, 140, 200], 
     ], 
     groups: [ 
      ['download', 'loading'] 
     ], 
     type: 'bar' 
    }, 
    axis: { 
     x: { 
      type: 'category', // this needed to load string x value 
      tick: { 
       rotate: 25 
      } 
     } 
    } 
}) 

。 （多分マウスをホバリング時）フルネームを見るために、ユーザーのための能力を維持しながら

、それは

ようになりますどのように私は長いタイトルを非表示にすることができます。それとももっと良い方法でしょうか？

tick.format機能：

Answer 1

あなたはtick.formatの設定でテキストを変更するが、これらはカテゴリ値であるため、実際にはテキストの値を取得することができますがPITAのビットは、以下のソリューションを参照してくださいです軸ラベルのテキストを短くし（これはあまりにもバーチャートのツールチップの中に持ち越される）

.onrendered機能は、基本的なツールチップとしてフル軸ラベルを表示する軸ラベルにタイトル要素、あなたは彼らに

をマウスオーバー追加します

var chart = c3.generate({ 
    data: { 
     x : 'x', 
     columns: [ 
      ['x', 'www.site1.com11111111111111111111111111111111111111111111111111111', 'www.site2.com11111111111111111111111111111111111111111111111111111111', 'www.site3.com11111111111111111111111111111111111111111111111111111111111111', 'www.site4.com11111111111111111111111111111111111111111111111111111111111111111111111111'], 
      ['download', 30, 200, 100, 400], 
      ['loading', 90, 100, 140, 200], 
     ], 
     groups: [ 
      ['download', 'loading'] 
     ], 
     type: 'bar' 
    }, 
    axis: { 
     x: { 
      type: 'category', // this needed to load string x value 
      tick: { 
       rotate: 25, 

       format: function (d) { 
        var catName = this.api.categories()[d]; 
        if (catName.length > 20) { 
         catName = catName.slice(0,20)+"…"; 
        } 
        return catName; 
       } 

      }, 
     } 
    }, 
    onrendered: function() { 
     var self = this; 
     d3.select(this.config.bindto) 
      .selectAll(".c3-axis-x .tick text") 
      .each(function (d) { 
       var title = d3.select(this).select("title"); 
       if (title.empty()) { 
        title = d3.select(this).append("title"); 
       } 
       title.text (self.api.categories()[d]); 
      }) 
     ; 
    } 
}); 

http://jsfiddle.net/05hsk6yh/