Xamarin Microcharts折线图：添加水平线并将数值显示在左侧

核心需求 #

• 将折线图的数值刻度从默认的顶部显示改为左侧垂直显示
• 在图表中添加水平参考线

解决方案 #

Microcharts默认不直接支持上述样式，需要通过自定义LineChart类扩展功能：

1. 创建自定义LineChart类 #

using SkiaSharp;
using Microcharts;
using Microcharts.SkiaSharp;
using System.Collections.Generic;
using System.Linq;

public class CustomLineChart : LineChart
{
    // 存储水平线对应的数值
    public List<float> HorizontalLines { get; set; } = new List<float>();
    // 水平线颜色（默认半透明灰色）
    public SKColor HorizontalLineColor { get; set; } = SKColors.Gray.WithAlpha(120);
    // 水平线宽度
    public float HorizontalLineWidth { get; set; } = 1f;

    public override void DrawContent(SKCanvas canvas, int width, int height)
    {
        base.DrawContent(canvas, width, height);

        // 绘制水平参考线
        if (HorizontalLines != null && HorizontalLines.Any())
        {
            var yAxisValueRange = MaxValue - MinValue;
            var yAxisPixelRange = height - Margin.Top - Margin.Bottom;

            using var linePaint = new SKPaint
            {
                Color = HorizontalLineColor,
                StrokeWidth = HorizontalLineWidth,
                Style = SKPaintStyle.Stroke,
                IsAntialias = true
            };

            foreach (var lineValue in HorizontalLines)
            {
                var yPosition = Margin.Top + yAxisPixelRange - ((lineValue - MinValue) / yAxisValueRange * yAxisPixelRange);
                canvas.DrawLine(Margin.Left, yPosition, width - Margin.Right, yPosition, linePaint);
            }
        }
    }

    protected override void DrawLabels(SKCanvas canvas, int width, int height)
    {
        if (Entries == null || !Entries.Any()) return;

        var yAxisValueRange = MaxValue - MinValue;
        var yAxisPixelRange = height - Margin.Top - Margin.Bottom;
        using var labelPaint = new SKPaint
        {
            Color = LabelTextColor,
            TextSize = LabelTextSize,
            IsAntialias = true,
            TextAlign = SKTextAlign.Right
        };

        // 自定义左侧刻度值（可根据需求调整刻度数量和格式）
        var labelValues = new List<float> { MinValue, (MinValue + MaxValue) / 2, MaxValue };
        foreach (var value in labelValues)
        {
            var yPosition = Margin.Top + yAxisPixelRange - ((value - MinValue) / yAxisValueRange * yAxisPixelRange);
            var labelText = value.ToString("0");
            // 偏移10像素避免刻度贴到图表边缘
            canvas.DrawText(labelText, Margin.Left - 10, yPosition + labelPaint.TextSize / 2, labelPaint);
        }
    }
}

2. 修改后台代码使用自定义图表 #

// 替换默认LineChart为自定义的CustomLineChart
var customChart = new CustomLineChart();
customChart.Entries = context.EngineRPMChartEnteries;
// 添加需要显示的水平参考线数值
customChart.HorizontalLines = new List<float> { 3000, 6000 };
// 隐藏默认顶部标签，避免重复显示
customChart.LabelTextColor = SKColors.Transparent;

RpmChart.Chart = customChart;

3. XAML代码保持不变 #

<microcharts:ChartView
    x:Name="RpmChart">
</microcharts:ChartView>

说明 #

• 自定义DrawLabels方法实现了左侧刻度的绘制，可根据业务需求调整刻度值的数量、格式和位置偏移
• HorizontalLines属性支持灵活添加/修改水平参考线的数值，颜色和宽度也可自定义

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