如何格式化Fusion Charts地图的图例刻度数值？

可以通过FusionCharts的数值缩放配置和自定义displayValue实现图例刻度的格式化，具体修改如下：

修改后的完整配置代码 #

const colorrange = {
  minvalue: 0,
  startlabel: "Low",
  endlabel: "High",
  code: "#FFFFA2",
  gradient: "1",
  color: [
    {
      maxvalue: 1000000000000,
      code: "#ED4630",
      displayValue: "$1,000B", // 直接指定格式化后的图例文本
    },
    {
      maxvalue: 3000000000000,
      code: "#B2D1FD",
      displayValue: "$3,000B",
    },
  ],
};

const usaMapChartProps = {
  id: "usa-map-container",
  type: "maps/usa",
  width: "700",
  height: "550",
  dataFormat: "JSON",
  dataSource: {
    chart: {
      caption: "Concentration of Deposits",
      subcaption: "Rollover a state for more information",
      entityfillhovercolor: "#EEEEEE",
      showlabels: "1",
      borderthickness: "0.4",
      theme: "fusion",
      basefontcolor: "#013a5d",
      entitytooltext: "<b>$lname</b>",
      // 全局数值缩放配置，统一处理图表内所有数值的显示逻辑
      numberPrefix: "$",
      numberScaleValue: "1000,1000",
      numberScaleUnit: "M,B",
    },
    colorrange: colorrange,
    data: mapData,
  },
};

关键配置说明 #

1. 自定义图例刻度文本：在colorrange的每个颜色区间中，通过displayValue手动指定格式化后的文本，确保图例刻度完全匹配需求。
2. 全局数值缩放控制：在chart节点添加以下属性，统一管理图表内所有数值的显示规则：
   • numberPrefix: 设置数值的前缀符号（此处为$）
   • numberScaleValue: 定义单位缩放倍数，1000,1000表示每1000个低级单位等价于1个高级单位
   • numberScaleUnit: 对应缩放单位序列，M,B表示数值先以百万（M）显示，达到1000M时自动转为十亿（B）

若仅需调整图例刻度、无需全局统一数值格式，仅保留colorrange中的displayValue配置即可。

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