Android分组堆叠柱状图：如何在Tooltip中显示全部堆叠数据

问题说明 #

使用分组堆叠柱形图时，默认Tooltip仅显示单个堆叠项的数据，需要改为同一Tooltip中逐行显示当前x轴分类下所有堆叠的数值（如John:5、Jane:3），同时保留总计信息。

修改方案 #

核心是开启Tooltip的共享模式，并调整格式配置：

• 设置tooltip.setShared(true)：让鼠标悬停时，同一x轴分类下的所有系列数据都会显示在同一个Tooltip中
• 拆分pointFormat与footerFormat：分别控制单个系列的显示格式和总计信息的位置，让布局更清晰

修改后的完整代码 #

chartView.theme = "grid-light";

HIOptions options = new HIOptions();

HITitle title = new HITitle();
title.setText("Stacked column chart");
options.setTitle(title);

HISubtitle subtitle = new HISubtitle();
subtitle.setText("Plain");
options.setSubtitle(subtitle);

// map to list of usagemodel
List<String> dateFormatList = new ArrayList<>();
List<Float> usageListReg1 = new ArrayList<>();
List<Float> usageListReg2 = new ArrayList<>();

HIXAxis xaxis = new HIXAxis();
xaxis.setCategories(new ArrayList<>(Arrays.asList("Appled", "Oranges", "Pears", "Grapes", "Bananas")));
xaxis.setCategories(new ArrayList<>(dateFormatList));
options.setXAxis(new ArrayList<>(Collections.singletonList(xaxis)));

HIYAxis yaxis = new HIYAxis();
yaxis.setMin(0);
yaxis.setTitle(new HITitle());
yaxis.getTitle().setText("Total fruit consumption");
yaxis.setStackLabels(new HIStackLabels());
yaxis.getStackLabels().setEnabled(true);
yaxis.getStackLabels().setStyle(new HICSSObject());
yaxis.getStackLabels().getStyle().setFontWeight("bold");
yaxis.getStackLabels().getStyle().setColor("gray");
options.setYAxis(new ArrayList<>(Collections.singletonList(yaxis)));

// 修改后的Tooltip配置
HITooltip tooltip = new HITooltip();
tooltip.setShared(true); // 开启共享提示框
tooltip.setHeaderFormat("<b>{point.x}</b><br/>");
tooltip.setPointFormat("{series.name}: {point.y}<br/>");
tooltip.setFooterFormat("Total: {point.stackTotal}"); // 总计信息放在底部
tooltip.setBackgroundColor(HIColor.initWithHexValue("eb4034"));
options.setTooltip(tooltip);

HIPlotOptions plotoptions = new HIPlotOptions();
plotoptions.setColumn(new HIColumn());
plotoptions.getColumn().setStacking("normal");
options.setPlotOptions(plotoptions);

HIColumn column1 = new HIColumn();
column1.setName("John");
Number[] column1Data = new Number[]{5, 3, 4, 7, 2};
column1.setData(new ArrayList<>(Arrays.asList(column1Data)));
column1.setColor(HIColor.initWithHexValue("8B008B"));

HIColumn column2 = new HIColumn();
column2.setName("Jane");
Number[] column2Data = new Number[]{2, 2, 3, 2, 1};
column2.setData(new ArrayList<>(Arrays.asList(column2Data)));
column2.setColor(HIColor.initWithHexValue("5F9EA0"));

options.setSeries(new ArrayList<>(Arrays.asList(column1, column2)));
chartView.setOptions(options);

效果说明 #

修改后，鼠标悬停在任意堆叠柱上时，Tooltip会呈现如下格式：

[分类名称]
John: 对应数值
Jane: 对应数值
Total: 堆叠总计

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