Xamarin Microcharts：能否在图表上点击显示提示框？

Microchart本身没有内置点击提示的功能，你可以通过触摸事件监听+坐标范围判断+自定义提示框的方式实现，具体步骤如下：

核心思路 #

1. 给承载Microchart的SKCanvasView添加触摸事件，获取点击坐标
2. 遍历柱状图的Entries，计算每个柱子的坐标边界，判断点击落点是否在某个柱子范围内
3. 触发提示框显示（可以自定义绘制在Canvas上，也可以用平台Popup控件）

代码示例 #

// 初始化图表和画布视图
SKCanvasView canvasView = new SKCanvasView();
BarChart barChart = new BarChart
{
    Entries = new[]
    {
        new ChartEntry(20) { Label = "一月", ValueLabel = "20" },
        new ChartEntry(45) { Label = "二月", ValueLabel = "45" },
        new ChartEntry(30) { Label = "三月", ValueLabel = "30" }
    },
    BackgroundColor = SKColors.Transparent
};

// 存储提示框相关状态
string tooltipLabel = string.Empty;
double tooltipValue = 0;
SKPoint tooltipPos = SKPoint.Empty;
SKRect chartDrawRect;

// 画布绘制事件
canvasView.PaintSurface += (s, e) =>
{
    var canvas = e.Surface.Canvas;
    canvas.Clear(SKColors.White);
    
    // 设置图表绘制区域（根据实际布局调整）
    chartDrawRect = new SKRect(50, 50, e.Info.Width - 50, e.Info.Height - 50);
    // 绘制柱状图
    barChart.Draw(canvas, chartDrawRect);
    
    // 如果有需要显示的提示，绘制气泡文本
    if (!string.IsNullOrEmpty(tooltipLabel))
    {
        var text = $"{tooltipLabel}: {tooltipValue}";
        var textPaint = new SKPaint
        {
            TextSize = 22,
            Color = SKColors.White,
            IsAntialias = true
        };
        
        // 计算文本和气泡的尺寸
        SKRect textBounds = new SKRect();
        textPaint.MeasureText(text, ref textBounds);
        var bubbleRect = new SKRect(
            tooltipPos.X - textBounds.Width / 2 - 12,
            tooltipPos.Y - textBounds.Height - 25,
            tooltipPos.X + textBounds.Width / 2 + 12,
            tooltipPos.Y - 10);
        
        // 绘制半透明气泡背景
        using var bubblePaint = new SKPaint
        {
            Color = SKColors.DarkSlateGray.WithAlpha(220),
            IsAntialias = true
        };
        canvas.DrawRoundRect(bubbleRect, 8, 8, bubblePaint);
        
        // 绘制提示文本
        canvas.DrawText(text, bubbleRect.Left + 8, bubbleRect.Top + textBounds.Height + 4, textPaint);
    }
};

// 触摸点击事件
canvasView.Touch += (s, e) =>
{
    if (e.ActionType != SKTouchAction.Pressed) return;
    
    var touchPoint = e.Location;
    var entryCount = barChart.Entries.Count;
    if (entryCount == 0) return;
    
    // 计算每个柱子的宽度和间距（和Microchart的默认布局对齐）
    float totalSpacing = (entryCount + 1) * 15;
    float barWidth = (chartDrawRect.Width - totalSpacing) / entryCount;
    float currentX = chartDrawRect.Left + 15;
    
    // 遍历每个柱子，判断点击位置
    foreach (var entry in barChart.Entries)
    {
        // 计算当前柱子的坐标范围
        float barTop = chartDrawRect.Bottom - (float)entry.Value;
        var barRect = new SKRect(currentX, barTop, currentX + barWidth, chartDrawRect.Bottom);
        
        if (barRect.Contains(touchPoint))
        {
            // 更新提示框状态
            tooltipLabel = entry.Label;
            tooltipValue = entry.Value;
            tooltipPos = touchPoint;
            canvasView.InvalidateSurface();
            break;
        }
        
        currentX += barWidth + 15;
    }
};

注意事项 #

• 柱子的坐标计算需要和Microchart的实际绘制逻辑匹配，如果你的图表有自定义padding、间距，需要调整代码中的间距值（示例中用的15是默认间距）
• 除了在Canvas上绘制提示，也可以结合平台的原生Tooltip控件（比如MAUI的Tooltip）或者第三方Popup库，实现更丰富的交互效果
• 可以把上述逻辑封装成自定义控件，方便在多个页面复用

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