如何在FusionCharts热力图中不新增行列添加列标签及指定文本

嘿，作为刚接触FusionCharts热力图的新手，遇到这种自定义标签的问题确实挺挠头的——官方文档有时候对这类个性化需求覆盖得不够细。不过别担心，咱们可以用FusionCharts的Annotations（注释）功能来实现，完全不需要新增行或列！

核心思路：用Annotations自定义文本 #

Annotations是FusionCharts的强大功能，允许你在图表的任意位置添加文本、形状等元素，完全独立于数据源的行列结构，刚好匹配你的需求。

1. 给现有列添加额外标签（不新增列） #

假设你想给某一列的上方/旁边加额外标签，只需要在图表配置里添加annotations节点，通过计算列的坐标来定位文本即可。

2. 在第一列标签前、最后一行标签下方添加文本 #

同样用Annotations，利用FusionCharts内置的图表位置变量（比如chartLeft、chartTop）和行列的宽高来精准定位，不需要改动原有的行列数据源。

完整代码示例 #

FusionCharts.ready(function() {
  var salesHMChart = new FusionCharts({
    type: 'heatmap',
    renderAt: 'chart-container',
    width: '100%',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "caption": "月度销售热力图",
        "xAxisName": "月份",
        "yAxisName": "区域",
        "theme": "fusion",
        // 必须开启注释功能才能使用
        "enableAnnotations": "1"
      },
      "rows": [
        {"id": "north", "label": "北部"},
        {"id": "south", "label": "南部"},
        {"id": "east", "label": "东部"},
        {"id": "west", "label": "西部"}
      ],
      "columns": [
        {"id": "jan", "label": "1月"},
        {"id": "feb", "label": "2月"},
        {"id": "mar", "label": "3月"}
      ],
      "data": [
        {"rowid": "north", "columnid": "jan", "value": "85"},
        {"rowid": "north", "columnid": "feb", "value": "70"},
        {"rowid": "north", "columnid": "mar", "value": "90"},
        {"rowid": "south", "columnid": "jan", "value": "65"},
        {"rowid": "south", "columnid": "feb", "value": "80"},
        {"rowid": "south", "columnid": "mar", "value": "75"},
        {"rowid": "east", "columnid": "jan", "value": "95"},
        {"rowid": "east", "columnid": "feb", "value": "60"},
        {"rowid": "east", "columnid": "mar", "value": "85"},
        {"rowid": "west", "columnid": "jan", "value": "75"},
        {"rowid": "west", "columnid": "feb", "value": "90"},
        {"rowid": "west", "columnid": "mar", "value": "65"}
      ],
      // 注释配置核心部分
      "annotations": {
        "groups": [
          {
            "id": "custom-labels",
            "items": [
              // 1. 在第一列标签前添加垂直文本
              {
                "type": "text",
                "x": "$chartLeft - 40", // 基于图表左侧向左偏移40px
                "y": "$chartTop + ($plotHeight/2)", // 垂直居中于绘图区
                "text": "区域分类",
                "fontSize": "12",
                "fontWeight": "bold",
                "rotate": "90" // 旋转成垂直文本，贴合布局
              },
              // 2. 在最后一行标签正下方添加说明文本
              {
                "type": "text",
                "x": "$chartLeft + ($plotWidth/2)", // 水平居中于绘图区
                "y": "$chartTop + $plotHeight + 30", // 绘图区底部下方30px
                "text": "数据来源：2024年销售统计",
                "fontSize": "10",
                "color": "#666"
              },
              // 3. 给第二列添加额外标签（不新增列）
              {
                "type": "text",
                "x": "$chartLeft + ($plotWidth/3) + ($plotWidth/6)", // 定位到第二列的水平中心
                "y": "$chartTop - 20", // 列标签上方的位置
                "text": "旺季",
                "fontSize": "11",
                "fontWeight": "bold",
                "color": "#e44a00"
              }
            ]
          }
        ]
      }
    }
  }).render();
});

关键参数解释 #

• enableAnnotations: "1"：必须开启这个配置才能激活注释功能
• $chartLeft/$chartTop：FusionCharts内置变量，代表图表绘图区的左上角坐标
• $plotWidth/$plotHeight：绘图区的宽高，用来计算相对位置（比如示例里3列，每列宽度就是$plotWidth/3）
• x/y：控制文本的精准位置，你可以根据自己的图表尺寸调整偏移数值（比如-40、+30）

如果需要微调位置，只需要修改x和y的数值就行，完全不需要改动原有的rows或columns数据源，完美符合你的需求！

内容的提问来源于stack exchange，提问作者Assad Ullah Ch