MPAndroidChart：同一高亮位置显示多个标记的实现方法

嘿，这个需求其实挺好实现的，我给你分几种主流图表库的方案，你可以照着自己用的工具来调整：

如果你用的是Chart.js，核心是自定义tooltip的内容，甚至可以把它拆成三个独立的提示块：

1. 首先开启HTML模式，让tooltip支持自定义结构，然后在回调函数里返回三个不同的提示内容。
2. 举个栗子，假设你有一个柱状图，单个数据集，点击柱子时要显示当前值、月度平均值和年度最大值：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['1月', '2月', '3月'],
        datasets: [{
            label: '销售额',
            data: [1200, 1900, 3000],
            backgroundColor: 'rgba(54, 162, 235, 0.6)'
        }]
    },
    options: {
        plugins: {
            tooltip: {
                useHTML: true, // 开启HTML支持
                callbacks: {
                    // 自定义tooltip的内容，返回三个独立的块
                    tooltipBody: function(context) {
                        const currentValue = context[0].raw;
                        const avgValue = (1200+1900+3000)/3; // 这里可以换成真实的计算逻辑
                        const maxValue = Math.max(1200,1900,3000);
                        return `
                            <div class="tooltip-item">当前销售额: ${currentValue}元</div>
                            <div class="tooltip-item">月度平均: ${avgValue.toFixed(0)}元</div>
                            <div class="tooltip-item">年度最高: ${maxValue}元</div>
                        `;
                    }
                },
                // 隐藏默认的颜色标记，让样式更干净
                custom: function(tooltip) {
                    if (!tooltip) return;
                    tooltip.displayColors = false;
                }
            }
        }
    }
});

然后给.tooltip-item加个简单的CSS，让它们看起来像三个独立的标记：

.tooltip-item {
    padding: 4px 8px;
    margin: 2px 0;
    background: rgba(0,0,0,0.8);
    color: white;
    border-radius: 4px;
}

如果是用D3.js这种更灵活的库，你可以直接在点击位置生成三个独立的提示元素：

1. 先给图表的可点击元素（比如柱子、数据点）绑定click事件，获取点击坐标和数据。
2. 在点击位置创建三个div或者SVG元素作为提示，位置稍微错开避免重叠：

// 假设已经有一个D3的柱状图，绑定点击事件
d3.selectAll('.bar')
  .on('click', function(event, d) {
      // 先移除之前的提示，避免重复显示
      d3.selectAll('.custom-tooltip').remove();
      
      // 获取点击的坐标
      const [x, y] = d3.pointer(event);
      
      // 定义三个提示的内容和偏移量（避免重叠）
      const avgValue = (1200+1900+3000)/3;
      const tooltips = [
          {text: `当前值: ${d.value}`, offsetY: 0},
          {text: `平均值: ${avgValue.toFixed(0)}`, offsetY: 30},
          {text: `环比变化: ${d.diff}%`, offsetY: 60}
      ];
      
      // 生成三个独立提示
      tooltips.forEach((tip) => {
          d3.select('body')
            .append('div')
            .attr('class', 'custom-tooltip')
            .style('position', 'absolute')
            .style('left', `${x + 10}px`)
            .style('top', `${y + tip.offsetY + 10}px`)
            .style('background', 'rgba(0,0,0,0.8)')
            .style('color', 'white')
            .style('padding', '4px 8px')
            .style('border-radius', '4px')
            .style('pointer-events', 'none')
            .text(tip.text);
      });
  });

// 点击页面其他地方移除提示
d3.select('body').on('click', function(event) {
    if (!d3.select(event.target).classed('bar')) {
        d3.selectAll('.custom-tooltip').remove();
    }
});

不管你用什么图表库，核心逻辑都是这两步：

• 捕获点击事件：拿到点击的位置和对应的数据点；
• 生成多提示：根据需求准备三个不同的内容（可以是数据本身的不同属性，也可以是衍生计算值），然后把它们放在点击位置附近，注意错开排列避免遮挡；

另外要注意的小细节：

• 记得在点击其他区域时隐藏这些提示，避免页面残留；
• 给提示设置足够高的z-index，防止被图表元素挡住；
• 如果是要在图表上显示标记点（不是悬浮tooltip），可以用SVG的<circle>或<text>元素添加到图表容器里，点击时显示，离开时移除。

内容的提问来源于stack exchange，提问作者Juan Rodríguez