如何限制FusionCharts水平图表Y轴宽度，实现标签超长显示省略号

刚碰到过类似的困扰，给你两个实用的解决方案，亲测能搞定Y轴标签占空间过大的问题：

方案一：用FusionCharts内置配置快速解决 #

FusionCharts本身就提供了标签截断和省略号的配置项，不用写太多自定义代码就能实现基础需求：

FusionCharts.ready(function() {
  var myChart = new FusionCharts({
    type: 'bar2d',
    renderAt: 'chart-container',
    width: '600',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "产品销量统计",
        "yAxisName": "产品名称",
        // 设置Y轴标签的最大宽度（单位：像素）
        "yAxisLabelMaxWidth": 150,
        // 开启超出宽度时显示省略号
        "yAxisLabelEllipsis": "1",
        // 可选：鼠标悬停显示完整标签，避免用户看不到全部内容
        "showTooltip": "1",
        "tooltipBgColor": "#ffffff",
        "tooltipBorderColor": "#cccccc"
      },
      "data": [
        {"label": "I am a very long label and shrink the chart area", "value": "50"},
        {"label": "Short Label", "value": "30"},
        {"label": "Another super long label that takes too much space", "value": "70"}
      ]
    }
  }).render();
});

这个方案的好处是简单，内置配置会自动帮你处理截断和省略号，还能通过tooltip显示完整标签。

方案二：自定义多行截断逻辑（匹配你要的多行省略效果） #

如果需要像你说的那样显示成多行带省略号的格式（比如‘I am a very long label a... In t...’），可以用自定义标签格式化函数来实现更灵活的控制：

FusionCharts.ready(function() {
  // 自定义标签格式化函数：实现多行截断+省略号
  function customLabelFormatter(labelObj) {
    const originalLabel = labelObj.label;
    const maxCharsPerLine = 18; // 每行最多显示的字符数
    const maxLines = 2; // 最多显示2行

    let lines = [];
    let currentLine = '';
    const words = originalLabel.split(' ');

    // 按单词分割，避免截断到单词中间
    for (const word of words) {
      if ((currentLine + word).length <= maxCharsPerLine) {
        currentLine += (currentLine ? ' ' : '') + word;
      } else {
        lines.push(currentLine);
        currentLine = word;
        // 达到最大行数就停止继续分割
        if (lines.length === maxLines - 1) break;
      }
    }

    // 添加最后一行内容
    if (currentLine && lines.length < maxLines) {
      lines.push(currentLine);
    }

    // 判断是否需要添加省略号：如果原标签内容没有完全显示
    const isTruncated = lines.length < maxLines || words.length > lines.join(' ').split(' ').length;
    if (isTruncated) {
      lines[lines.length - 1] += '...';
    }

    // 用<br>实现多行显示
    return lines.join('<br>');
  }

  var myChart = new FusionCharts({
    type: 'bar2d',
    renderAt: 'chart-container',
    width: '600',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "产品销量统计",
        "yAxisName": "产品名称",
        // 启用自定义标签格式化函数
        "labelFormatter": "customLabelFormatter",
        // 必须开启HTML支持，才能让<br>换行生效
        "useHTML": "1",
        // 鼠标悬停显示完整标签
        "showTooltip": "1",
        "tooltipText": "$label: $value"
      },
      "data": [
        {"label": "I am a very long label and shrink the chart area", "value": "50"},
        {"label": "Short Label", "value": "30"},
        {"label": "Another super long label that takes too much space", "value": "70"}
      ]
    }
  }).render();
});

注意点： #

• 必须设置useHTML: "1"，否则<br>不会生效，无法实现多行显示
• 你可以根据需求调整maxCharsPerLine和maxLines的值，精准控制标签的显示效果
• 记得配置tooltip显示完整标签，保证用户能获取完整信息

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