In LiveCharts2.WPF, how to make a good SubseparatorsPaint?

68 Views Asked by At

I am making a ECG display software, I need to a SubseparatorsPaint on my chart like

enter image description here

so I try to read the document of LiveChart2, and I find this site: https://livecharts.dev/docs/wpf/2.0.0-beta.920/samples.axes.style

the example image is :

enter image description here

I think this is good.

but when i use it in my code, there is a question.

enter image description here

The y-axis above 0 is not quite right. This is not what I want, what I expect is the following:

enter image description here

The red line is what I want.


The code is:

private Axis BuildYAxis()
{
    return new Axis
    {
        LabelsPaint = new SolidColorPaint
        {
            Color = MySKColor.ColorPrimary,
            FontFamily = "Noto Serif SC",
            SKFontStyle = new SKFontStyle(SKFontStyleWeight.Bold, SKFontStyleWidth.Normal,
                SKFontStyleSlant.Oblique)
        },
        LabelsAlignment = Align.End,
        Labeler = d => $"{d:F1}",
        TextSize = 10,
        MinStep = 0.5f,
        // ForceStepToMin = true,
        SeparatorsPaint = new SolidColorPaint
        {
            Color = MySKColor.ColorSecondary,
            StrokeThickness = 1f,
        },
        SubseparatorsPaint = new SolidColorPaint
        {
            Color = MySKColor.ColorSecondary,
            StrokeThickness = 0.3f,
        },
        SubseparatorsCount = 4
    };
}
    
private Axis BuildXAxis()
{
    return new Axis
    {
        SeparatorsPaint = new SolidColorPaint
        {
            StrokeThickness = 1f,
            Color = MySKColor.ColorSecondary,
        },
        MinStep = 200,
        ForceStepToMin = true,
        Labeler =
            d =>
            {
                var ms = (int)d;
                var s = ms / 1000;
                ms %= 1000;
                var m = s / 60;
                s %= 60;
                var h = m / 60;
                m %= 60;
                return ms % 1000 == 0 ? $"{h}:{m:D2}:{s:D2}" : string.Empty;
            },
        LabelsPaint = new SolidColorPaint
        {
            Color = MySKColor.ColorPrimary,
            FontFamily = "Noto Serif SC",
            SKFontStyle = new SKFontStyle(SKFontStyleWeight.Bold, SKFontStyleWidth.Normal,
                SKFontStyleSlant.Italic)
        },
        SubseparatorsPaint = new SolidColorPaint
        {
            Color = MySKColor.ColorSecondary,
            StrokeThickness = 0.3f,
        },
        SubseparatorsCount = 4
    };
}
    
private ISeries BuildLineSeries(List<ObservablePoint> points)
{
    return new LineSeries<ObservablePoint>
    {
        DataPadding = new LvcPoint(0f, 0f),
        GeometryStroke = null,
        GeometryFill = null,
        Values = new ObservableCollection<ObservablePoint>(points),
        Fill = null,
        LineSmoothness = 1,
        Stroke = new SolidColorPaint(MySKColor.ColorPrimary, 2),
    };
}
    
private DrawMarginFrame BuildDrawMarginFrame()
{
    return new()
    {
        Fill = null,
        Stroke = new SolidColorPaint
        {
            Color = MySKColor.ColorSecondary,
            StrokeThickness = 2
        }
    };
}

public ECGChart()
{
    InitializeComponent();
    XAxes.Add(BuildXAxis());
    YAxes.Add(BuildYAxis());
    DrawMarginFrame = BuildDrawMarginFrame();
    Series0.Add(BuildLineSeries(new List<ObservablePoint>()));
    //...
}

And the xaml is:

<lvc:CartesianChart
    DrawMarginFrame="{Binding DrawMarginFrame, RelativeSource={RelativeSource AncestorType=UserControl}}"
    Series="{Binding Series1, RelativeSource={RelativeSource AncestorType=UserControl}}"
    XAxes="{Binding XAxes, RelativeSource={RelativeSource AncestorType=UserControl}}"
    YAxes="{Binding YAxes, RelativeSource={RelativeSource AncestorType=UserControl}}" />
0

There are 0 best solutions below