如何在FusionCharts堆叠柱状图提示框仅显示高亮系列值

使用JavaScript的FusionCharts创建堆叠柱状图时，悬停在任意堆叠系列上，提示框会同时显示当前高亮系列的值以及同组其他非高亮系列的值。需求是自定义提示框，使其仅显示当前高亮堆叠系列的值，隐藏其他系列的值。

当前使用的代码如下：

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "Revenue split by product category",
        "subCaption": "For current year",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        //Showing the Cumulative Sum of stacked data
        "showSum": "1",
        "numberPrefix": "$",
        "theme": "fusion"
      },
      "categories": [{
        "category": [{
            "label": "Q1"
          },
          {
            "label": "Q2"
          },
          {
            "label": "Q3"
          },
          {
            "label": "Q4"
          }
        ]
      }],
      "dataset": [{
          "seriesname": "Food Products",
          "data": [{
              "value": "11000"
            },
            {
              "value": "15000"
            },
            {
              "value": "13500"
            },
            {
              "value": "15000"
            }
          ]
        },
        {
          "seriesname": "Non-Food Products",
          "data": [{
              "value": "11400"
            },
            {
              "value": "14800"
            },
            {
              "value": "8300"
            },
            {
              "value": "11800"
            }
          ]
        }
      ]
    }
  }).render();
});

要实现仅显示当前高亮系列的提示框，可通过以下两种方式：

方法1：使用全局自定义提示框函数 #

在图表配置中添加tooltipCustomFn，自定义提示框内容，只提取当前 hover 的系列数据：

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '700',
    height: '400',
    dataFormat: 'json',
    dataSource: {
      "chart": {
        "theme": "fusion",
        "caption": "产品类别收入拆分",
        "subCaption": "本年度",
        "xAxisname": "季度",
        "yAxisName": "收入（美元）",
        "showSum": "1",
        "numberPrefix": "$",
        "theme": "fusion",
        // 自定义提示框函数
        "tooltipCustomFn": function(data) {
          // 仅返回当前系列的名称和值
          return `<div class="fusioncharts-tooltip">
                    <strong>${data.datasetName}</strong><br>
                    ${data.categoryName}: $${data.value}
                  </div>`;
        }
      },
      "categories": [{
        "category": [{
            "label": "Q1"
          },
          {
            "label": "Q2"
          },
          {
            "label": "Q3"
          },
          {
            "label": "Q4"
          }
        ]
      }],
      "dataset": [{
          "seriesname": "食品",
          "data": [{
              "value": "11000"
            },
            {
              "value": "15000"
            },
            {
              "value": "13500"
            },
            {
              "value": "15000"
            }
          ]
        },
        {
          "seriesname": "非食品",
          "data": [{
              "value": "11400"
            },
            {
              "value": "14800"
            },
            {
              "value": "8300"
            },
            {
              "value": "11800"
            }
          ]
        }
      ]
    }
  }).render();
});

方法2：为每个数据点单独设置提示文本 #

如果需要更精细的控制，可以在每个数据点的data对象中添加toolText属性，指定该点的提示框内容：

"data": [{
    "value": "11000",
    "toolText": "食品<br>Q1: $11000"
  },
  {
    "value": "15000",
    "toolText": "食品<br>Q2: $15000"
  },
  // 其他数据点同理
]

说明 #

• 方法1更通用，无需逐个修改数据点，适合系列较多或数据动态生成的场景。
• 方法2适合需要为特定数据点定制提示内容的场景。

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