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 
      } 
     } 
    } 
}) 

;

，它看起来像

我怎么能隐藏长标题，同时保持对用户看到的全名的能力（也许悬停鼠标时）。或者也许更好的办法？

Answer 1

您可以更改与tick.format配置的文本，但实际上获得的文本价值，因为这些类别值是有点PITA，请参阅下面的解决方案：

的tick.format功能缩短轴标签文本（这被结转到柱状图提示过）

的.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/