Anychart是否支持标签字体缩放？如何实现字体自适应？

我有多个Anychart图表与地图，需要在全尺寸显示器到智能手机间做缩放适配。目前图表和地图的形状能正常缩放，但标签字体无法随之缩放，官网也没找到相关文档。当前使用的格式化脚本如下：

var firstSeries = usMap.choropleth(firstDataSetForSeries);
firstSeries.geoIdField("code_hasc").overlapMode("allow-overlap");
firstSeries.color("#e89498").hatchFill("percent05", "#866163", 1, 9).hovered({fill:"#f0b2b5"}).selected({fill:"#e89498"});
firstSeries.labels().enabled(true).fontSize(13).fontColor('#000').fontWeight('bold').format(function(){
  return this.value;
});

两种可行的适配方案 #

方案1：使用视窗相对单位（快速实现）

把固定像素的字体大小改成vw（视窗宽度百分比）单位，让字体直接随视窗宽度缩放：

firstSeries.labels().enabled(true)
  .fontSize('2vw') // 视窗宽度的2%，可根据实际显示效果调整数值
  .fontColor('#000')
  .fontWeight('bold')
  .format(function(){
    return this.value;
  });

vw单位会自动适配不同设备的屏幕宽度，无需额外事件监听，适合快速完成基础适配。

方案2：监听容器尺寸动态调整（精准控制）

如果需要更精细的字体大小控制，比如限制最小/最大字号，或者基于地图容器而非整个视窗缩放，可以监听容器的resize事件，动态计算字体大小：

// 定义更新字体的函数
function updateLabelFontSize() {
  // 替换为你的地图容器实际ID
  var container = document.getElementById('your-map-container');
  var containerWidth = container.offsetWidth;
  
  // 按比例计算字号：这里以100px宽度对应13px字体为基准，可自定义比例
  var baseFontSize = 13;
  var baseWidth = 100;
  // 限制最小字号为8px，避免小屏幕下字体过小无法阅读
  var fontSize = Math.max(8, Math.round((containerWidth / baseWidth) * baseFontSize));
  
  firstSeries.labels().fontSize(fontSize);
  usMap.draw(); // 重新绘制地图应用字体变化
}

// 初始化页面时执行一次
updateLabelFontSize();

// 监听窗口 resize 事件，实时更新字体
window.addEventListener('resize', updateLabelFontSize);

这种方法可以自定义字体缩放的比例，还能通过Math.max限制最小字号，适配性更强。

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