Question

我尝试过不同的CSS技术来改变C3图表中文本的字体大小。但是当我使用CSS时，文本会被切断超出某些字体大小（例如14px）。我正在使用水平条形图，其中y轴标签和数据显示在每个栏的末尾（类似这样的事情 - http://c3js.org/samples/axes_rotated.html）。有没有办法通过C3 API自定义字体大小？如果不是，那么处理此类案件的最佳方法是什么？

Answer 1

请查找代码和fiddle：

   d3.selectAll('.c3-text')
        .each(function(d){
        var self = d3.select(this),
            width = +d3.select('.c3-zoom-rect').attr('width');
        if (+self.attr('x') + self.node().getComputedTextLength() > width){
            self.attr('text-anchor', 'end');
          self.attr('dx', '-5');
        }
    });

万一你遇到折线图而烦恼。轴字体大小的切割问题，只需添加：

c3.generate({
...
padding: {
  left: 500
},
...
});

要设置动态值，请尝试使用一个获取文本字符串长度的小jQuery插件：

$.fn.textWidth = function(text, font) {
  if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
  $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
  return $.fn.textWidth.fakeEl.width();
};

var longest_text_width = 0;
chartData[0].forEach(function(data) {
  var w = $.fn.textWidth(data, '13px Clear Sans');
    if (w > longest_text_width) {
      longest_text_width = w;
    }
});

var chart = c3.generate({

  ...

  padding: {
    left: longest_text_width + 10 // add 10px for some spacing
  },

  ...

});

增加C3图表中的字体大小而不切断文本

1 个答案: