如何在 FusionCharts 中的堆积柱形图的工具提示中仅显示突出显示的堆栈值

Question

我正在 JavaScript 中使用 FusionCharts 创建堆积柱形图。当我将鼠标悬停在图表中的任何堆栈上时，工具提示会显示该堆栈的突出显示值以及同一栏中其他堆栈的非突出显示值。这是我所看到的示例：

图片链接

文档：https://www.fusioncharts.com/dev/chart-attributes/stackedcolumn2d

我想自定义工具提示，使其仅显示突出显示堆栈的值并隐藏其他值。以下是我当前使用的代码：

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();
});

Answer 1

使用

plottooltext

对象中的

dataset

自定义工具提示：

FusionCharts.ready(function() {
  var revenueChart = new FusionCharts({
    // ... your code ...
    "dataset": [{
          "seriesname": "Food Products",
          "plottooltext": "$seriesname, Q$label, $value",
          "data": [
          // ... your data ...
          ]
        },
        {
          "seriesname": "Non-Food Products",
          "plottooltext": "$seriesname, Q$label, $value",
          "data": [
          // ... your data ...
          ]
        }
      ]
    // ... your code ...
  }).render();
});