Highcharts Android 实现分组堆叠柱状图及自定义工具提示-CSDN博客

本文链接：https://blog.csdn.net/gitblog_07489/article/details/148466345

Highcharts Android 实现分组堆叠柱状图及自定义工具提示

highcharts-android Android wrapper for Highcharts usage 项目地址: https://gitcode.com/gh_mirrors/hi/highcharts-android

概述

在数据可视化应用中，分组堆叠柱状图是一种常见的图表类型，它能够同时展示分组比较和构成分析。本文将详细介绍如何在 Highcharts Android 库中实现分组堆叠柱状图，并重点讲解如何自定义工具提示以显示每个堆叠部分的值。

基础实现

首先，我们需要创建一个基本的堆叠柱状图。以下是核心代码示例：

// 创建图表选项
HIOptions options = new HIOptions();

// 设置标题
HITitle title = new HITitle();
title.setText("水果消费统计");
options.setTitle(title);

// 设置X轴类别
HIXAxis xaxis = new HIXAxis();
xaxis.setCategories(Arrays.asList("苹果", "橙子", "梨", "葡萄", "香蕉"));
options.setXAxis(Collections.singletonList(xaxis));

// 设置Y轴
HIYAxis yaxis = new HIYAxis();
yaxis.setMin(0);
yaxis.setTitle(new HITitle("水果消费总量"));
options.setYAxis(Collections.singletonList(yaxis));

// 设置堆叠选项
HIPlotOptions plotoptions = new HIPlotOptions();
plotoptions.setColumn(new HIColumn().apply {
    setStacking("normal"); // 启用堆叠
});
options.setPlotOptions(plotoptions);

// 添加数据系列
HIColumn series1 = new HIColumn("John", Arrays.asList(5, 3, 4, 7, 2));
HIColumn series2 = new HIColumn("Jane", Arrays.asList(2, 2, 3, 2, 1));
options.setSeries(Arrays.asList(series1, series2));

// 应用配置到图表视图
chartView.setOptions(options);

工具提示定制

默认情况下，Highcharts 会为每个数据点显示单独的工具提示。但在实际应用中，我们通常希望在一个工具提示中同时显示所有堆叠部分的值。

共享工具提示

最简单的解决方案是启用共享工具提示：

HITooltip tooltip = new HITooltip();
tooltip.setShared(true); // 关键设置
tooltip.setPointFormat("<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y}</b> <br/>");
options.setTooltip(tooltip);

这种方法会自动收集同一分类下的所有数据点，并在一个工具提示中显示。

高级自定义工具提示

对于更复杂的需求，我们可以使用 JavaScript 函数来自定义工具提示内容：

String customDate = "2024-10-16"; // 可以从数据中动态获取

HITooltip tooltip = new HITooltip();
tooltip.setShared(true);
tooltip.setUseHTML(true);
tooltip.setFormatter(new HIFunction(
    "function() {" +
    "  const points = this.points;" +
    "  let total = 0;" +
    "  let html = '<div style=\"font-weight:bold\">日期: " + customDate + "</div>';" +
    "  points.forEach(p => total += p.y);" +
    "  html += '<div>总计: ' + total + '</div>';" +
    "  points.forEach(p => {" +
    "    html += '<div><span style=\"color:' + p.color + '\">■</span> ' + " +
    "             p.series.name + ': ' + p.y + '</div>';" +
    "  });" +
    "  return html;" +
    "}"
));
options.setTooltip(tooltip);

这段代码实现了：