uni-app 使用 ucharts 图表做国际化业务时，APP上遇到图例错位问题。

使用ucharts开发时遇到图例错位的情况，小程序正常，app上有问题。

排查之后，锁定罪魁祸首是u-charts.js里面的这段代码。APP计算文字宽度时，匹配不到诸如泰语等文字，字符默认与汉字同宽度。

function measureText(text, fontSize, context) {
  var width = 0;
  text = String(text);
  // #ifdef MP-ALIPAY || MP-BAIDU || APP-NVUE
  context = false;
  // #endif
  if (context !== false && context !== undefined && context.setFontSize && context.measureText) {
    context.setFontSize(fontSize);
    return context.measureText(text).width;
  } else {
    var text = text.split('');
    for (let i = 0; i < text.length; i++) {
      let item = text[i];
      if (/[a-zA-Z]/.test(item)) {
        width += 7;
      } else if (/[0-9]/.test(item)) {
        width += 5.5;
      } else if (/\./.test(item)) {
        width += 2.7;
      } else if (/-/.test(item)) {
        width += 3.25;
      } else if (/:/.test(item)) {
        width += 2.5;
      } else if (/[\u4e00-\u9fa5]/.test(item)) {
        width += 10;
      } else if (/\(|\)/.test(item)) {
        width += 3.73;
      } else if (/\s/.test(item)) {
        width += 2.5;
      } else if (/%/.test(item)) {
        width += 8;
      } else {
        width += 10;
      }
    }
    return width * fontSize / 10;
  }
}

然而，这些无法匹配的文字宽度远没有汉字宽。测试下发现，差距相当离谱。

let item = 'การปรับปรุงล้มเหลว'
console.log(item.length) // 18
let item2 = '我要写十八个字一二三四五六七八九十零'
console.log(item.length) // 18
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
context.font = 'bold 12pt arial'
console.log(context.measureText(item).width) // 142.671875
console.log(context.measureText(item2).width) // 288

解决方案我想到两种，一种是直接图例左对齐，简单粗暴。另一种是修改源码，针对目标语言匹配计算适当宽度。