Chrome最新版本中C3图表X轴文字过大问题求助

问题场景 #

Chrome浏览器升级至最新版本后，C3图表出现X轴文字渲染过大的问题，但调整浏览器窗口大小后显示恢复正常。

解决方案 #

• 强制触发图表重绘
  页面加载完成后手动触发一次resize事件，让C3重新计算并渲染布局。可在图表初始化的onrendered回调中执行：

  var chart = c3.generate({
    // 你的图表配置项
    onrendered: function() {
      window.dispatchEvent(new Event('resize'));
    }
  });
  

• 显式设置X轴文字大小
  在C3的配置中直接指定X轴刻度文字的大小，避免浏览器默认样式干扰：

  axis: {
    x: {
      tick: {
        style: {
          fontSize: '12px', // 根据实际需求调整字号
        }
      }
    }
  }
  

• 修复全局CSS冲突
  检查项目中是否存在全局CSS选择器（如svg text、body *）意外修改了图表文字样式，给C3图表的X轴文字添加专属样式覆盖：

  .c3-axis-x text {
    font-size: 12px !important;
  }
  

• 检查Chrome缩放设置
  确认Chrome的页面缩放比例为100%，同时关闭“设置-外观-自动调整字体大小”功能，避免浏览器自动缩放文字。

内容的提问来源于stack exchange，提问作者mmarjeh