javascript - 在amcharts的堆积柱形图中，如何在工具提示中显示特定列的所有值？

Question

在 amcharts 堆积柱形图中，通过默认方法，当我将鼠标悬停在列中的特定部分上时，我仅看到该部分的工具提示。

如果我想在鼠标悬停在该列上的任何位置显示该列的所有值，这怎么可能？编辑:

即在这个例子中， amcharts.com/demos/100-stacked-column-chart/?theme=spiritedaway

“一”列有 3 个部分，当我将鼠标悬停在最上面的部分时，它显示“系列 3:33.33%”。我希望它在工具提示中一起显示“系列 1:11.11% 系列 2:55.56% 系列 3:33.33%”。这可能吗？

P.S:我不是开发人员，而是UI设计师，我的团队说这是不可能的，但是通过查看代码，我觉得这是可能的

Answer 1

如果我错了，请纠正我，但目前没有简单的方法可以在 x 轴级别上的单个工具提示中显示所有系列的信息。

我尝试覆盖 xAxis 中的 getTooltipText 适配器，并且能够访问原始数据:

...,
xAxes: [{
    type: "CategoryAxis",
    adapter: {
        getTooltipText: function(text, target, key) {
            let dataItem = target.dataItemsByCategory.getKey(text),
                data = dataItem.dataContext;

            // Here you can access the raw data
            // i.e., data.value1, data.value2, etc

            return text;
        }
    }
}],
...

但是后来我每次都必须重新计算它们的百分比，而且我无法将 HTML 放在返回文本上(没有 getTooltipHTML 适配器)。

与图例一起显示值

我最终显示了该系列的值(value)观及其图例。有一个记录在案的方法可以做到这一点:https://www.amcharts.com/docs/v4/concepts/legend/#Interacting_with_cursor

您只需定义每个系列的图例设置，然后打开图例和光标:

...,
series: [{
    type: "ColumnSeries",
    ...,
    legendSettings: {
        valueText: "---%",
        legendSettings: "[bold]{valueY.totalPercent.formatNumber('#.00')}%"
    },
    ...
}],
...,
legend: {},
cursor: {
    lineX: {
        disabled: true
    },
    lineY: {
        disabled: true
    }
},
...

演示: http://jsfiddle.net/davidliang2008/582snbwo/57/