[移动开发]Android Highcharts图表小结之HITooltip一个节点显示多个信息

最近网上查看Android项目中使用Highcharts图表一个点添加显示多个信息的资料比较少，这里记录一下，并希望能帮到有需要的人。

一.先直接放代码，后图片和代码说明：

private ArrayList<String> listMonth = new ArrayList<>();//月份
private ArrayList<String> listModifier = new ArrayList<>();//修改者信息
private ArrayList<Double> listSalePrice = new ArrayList<>();//平均销售金额

    //设置表图视图
    private void setChartView() {
        HIOptions options = new HIOptions();
        //隐藏右上角的导出按钮（菜单按钮）
        HIExporting hiExporting = new HIExporting();
        hiExporting.setEnabled(false);
        options.setExporting(hiExporting);

        //HITitle管理图表标题
        HITitle title = new HITitle();
        title.setText(getIntent().getStringExtra("Title"));
        options.setTitle(title);

        //HISubtitle负责字幕
//        HISubtitle subtitle = new HISubtitle();
//        subtitle.setText("Source: WorldClimate.com");
//        options.setSubtitle(subtitle);

        //设置右下角版权标签
        HICredits credits = new HICredits();
//        credits.setText("vipstation.com.hk");
        credits.setEnabled(false);
        options.setCredits(credits);

        //x轴
        final HIXAxis xAxis = new HIXAxis();
        xAxis.setCategories(listMonth);
        options.setXAxis(new ArrayList() {{
            add(xAxis);
        }});

        //y轴
        final HIYAxis yAxis = new HIYAxis();
        yAxis.setTitle(new HITitle());
        yAxis.getTitle().setText(getString(R.string.language_amount_h));
        options.setYAxis(new ArrayList() {{
            add(yAxis);
        }});

        HILine series1 = new HILine();
        series1.setName(getIntent().getStringExtra("SeriesName"));

        if (listModifier != null && listModifier.size() > 0) {
            ArrayList<HashMap<String, Object>> data = new ArrayList<>();
            for (int i = 0; i < listSalePrice.size(); i++) {
                HashMap<String, Object> object = new HashMap<>();
                object.put("y", listSalePrice.get(i));
                object.put("z", listModifier.get(i));
                data.add(object);
            }

            String nameStr = getString(R.string.language_reviser);
            HITooltip tooltip = new HITooltip();
//tooltip.setHeaderFormat("<span style=\"font-size:15px\">{point.key}</span><table>");//设置了字体大小
//tooltip.setPointFormat("<tr><br>{series.name}:{point.y}<br/>" + nameStr + ":{point.z}</tr>");//表格展示
//tooltip.setFooterFormat("</talble>");
//tooltip.setShared(true);
//tooltip.setUseHTML(true);
//<br>和<br/>具有相同作用，都表示换行符，都是非成对出现的标记，但前者是老的html规范，新的规范（W3C//DTD HTML 4.0）要求一切都应象XML那样有结束符，如果没有也要硬加一个反斜杠。象br这种不需成对使用的html符号，就成了这个样子：<br/>
            tooltip.setHeaderFormat("{point.key}<br/>");//2022/08/08
????????    //售价：4680（<br/>换行符换行）修改者：0111 | zaa
            tooltip.setPointFormat("{series.name}:{point.y}<br/>" + nameStr + ":{point.z}");
            options.setTooltip(tooltip);

// HITooltip tooltip = new HITooltip();
//tooltip.setHeaderFormat("{series.name}:{point.key}<br />");//公价：2022/08/08
//tooltip.setPointFormat("x = {point.x}, y = {point.y}<br/>");//x=0,y=4680修改者：0122 | zas(这里修改者这行没换行)
//tooltip.setValueSuffix("修改者:" + "{point.z}");
//options.setTooltip(tooltip);       

??????????? //曲线设置值
??????????? series1.setData(data);
 ????????} else
            series1.setData(listSalePrice);
        options.setSeries(new ArrayList<>(Arrays.asList(series1)));

//        //曲线点击方法
//        HIPlotOptions plotOptions = new HIPlotOptions();
//        plotOptions.setSeries(series1);
//        plotOptions.getSeries().setPoint(new HIPoint());
//        plotOptions.getSeries().getPoint().setEvents(new HIEvents());
//        plotOptions.getSeries().getPoint().getEvents().setClick(new HIFunction(
//                new Runnable() {
//                    @Override
//                    public void run() {
//                        L.e("点击事件");
//                    }
//                }
//        ));
//        options.setPlotOptions(plotOptions);

        options.setColors(new ArrayList<>(Arrays.asList(HIColor.initWithRGB(28, 182, 130))));
        chartView.setOptions(options);
    }

二.当没有修改者的信息时，提示框就显示x轴和y轴节点的信息，折线HILine直接添加金额集合series1.setData(listSalePrice);

三. 主要HITooltip提示节点自定义信息：

1.如代码里面的重新用一个键值对集合重新把数据装起来；

?ArrayList<HashMap<String, Object>> data = new ArrayList<>();

for (int i = 0; i < listSalePrice.size(); i++) {

HashMap<String, Object> object = new HashMap<>();

object.put("y", listSalePrice.get(i));

object.put("z", listModifier.get(i)); data.add(object);

}

2.HITooltip提示设置

HITooltip tooltip = new HITooltip();
tooltip.setHeaderFormat("{point.key}<br/>");//2022/08/08
//售价：4680（<br/>换行符换行）修改者：0111 | zaa
tooltip.setPointFormat("{series.name}:{point.y}<br/>" + nameStr + ":{point.z}");
options.setTooltip(tooltip);

3.展示效果图

?四.曲线点击方法

HIPlotOptions plotOptions = new HIPlotOptions();
plotOptions.setSeries(series1);
plotOptions.getSeries().setPoint(new HIPoint());
plotOptions.getSeries().getPoint().setEvents(new HIEvents());
plotOptions.getSeries().getPoint().getEvents().setClick(new HIFunction(
        () -> {
????????????????L.e("点击事件")
        }
));
options.setPlotOptions(plotOptions);