Highcharts Android 中堆叠柱状图的颜色与提示框配置详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_07406/article/details/148466354

Highcharts Android 中堆叠柱状图的颜色与提示框配置详解

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

堆叠柱状图基础配置

在Highcharts Android库中创建堆叠柱状图时，开发者首先需要配置基本的图表选项。这包括设置图表标题、副标题、坐标轴等元素。通过HIOptions对象可以定义这些基础属性：

HIOptions options = new HIOptions();
HITitle title = new HITitle();
title.setText("堆叠柱状图示例");
options.setTitle(title);

HIXAxis xaxis = new HIXAxis();
xaxis.setCategories(Arrays.asList("苹果", "橙子", "梨", "葡萄", "香蕉"));
options.setXAxis(Collections.singletonList(xaxis));

HIYAxis yaxis = new HIYAxis();
yaxis.setMin(0);
yaxis.setTitle(new HITitle());
yaxis.getTitle().setText("水果总消费量");
options.setYAxis(Collections.singletonList(yaxis));

系列数据与颜色配置

在堆叠柱状图中，每个数据系列代表一个分类（如不同人员的水果消费量）。要为每个系列设置独立颜色，不应使用colors数组，而应直接为每个系列设置color属性：

HIColumn johnSeries = new HIColumn();
johnSeries.setName("张三");
johnSeries.setData(Arrays.asList(5, 3, 4, 7, 2));
johnSeries.setColor(HIColor.initWithHexValue("8B008B")); // 紫色

HIColumn janeSeries = new HIColumn();
janeSeries.setName("李四");
janeSeries.setData(Arrays.asList(2, 2, 3, 2, 1));
janeSeries.setColor(HIColor.initWithHexValue("5F9EA0")); // 蓝绿色

options.setSeries(Arrays.asList(johnSeries, janeSeries));

堆叠效果配置

要使柱状图呈现堆叠效果，需要在plotOptions中设置stacking属性：

HIPlotOptions plotOptions = new HIPlotOptions();
plotOptions.setColumn(new HIColumn());
plotOptions.getColumn().setStacking("normal"); // 标准堆叠
options.setPlotOptions(plotOptions);

提示框定制化

堆叠柱状图的提示框默认只显示当前悬停的数据点信息。要显示所有堆叠部分的值和总和，需要配置tooltip对象的formatter函数：

HITooltip tooltip = new HITooltip();
tooltip.setShared(true); // 关键设置：共享提示框
tooltip.setUseHTML(true);
tooltip.setHeaderFormat("<b>{point.key}</b><br/>");
tooltip.setPointFormat(
    "<span style=\"color:{series.color}\">{series.name}</span>: " +
    "<b>{point.y}</b> ({point.percentage:.1f}%)<br/>"
);
options.setTooltip(tooltip);