Xamarin Microcharts“闪烁”

Question

我在 Xamarin 上使用 Microchart，我在图表上可视化来自蓝牙温度传感器的数据，但每次我都会更新数据，组件将所有数据从 0 重新绘制到值，因此效果是一个闪烁的图表：

查看

<microcharts:ChartView  x:Name="chartV"  BackgroundColor="Transparent"  
    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.02}"
    RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor={x:OnPlatform Android=0.4, iOS=0.4}}" 
    RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.96}"
    RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.245}"
/>

查看模型

private void Bt_ParametersList(List<Com.PAR> parameters, Com.unit UNIT)
{
    Dispatcher.BeginInvokeOnMainThread(new Action(delegate
    {
        if (voltData.Count < graph_Hmax_span)
        {
            voltData.Add(UNIT.OUTPUT_VOLTAGE);
        }
        else
        {
            voltData.Add(UNIT.OUTPUT_VOLTAGE);
            voltData.RemoveAt(0);
        }
        var chartVoltage = new List<ChartEntry>();

        UInt16 counter = 0;
        foreach (var data in voltData)
        {
            chartVoltage.Add(new ChartEntry((float)data)
            {
                ValueLabel = data.ToString(),
                Color = SKColor.Parse("#FF1943"),
                Label = counter.ToString()
            });
            counter++;
        }
        chartV.Chart = new LineChart()
        {
            Entries = chartVoltage,
            IsAnimated = false,
            AnimationProgress = 0,
            AnimationDuration = new TimeSpan(0),
            MaxValue = v_max,
            MinValue = 0,
            LabelTextSize = 25,
            LabelOrientation = Orientation.Horizontal,
            LineSize = 3,
        };
    }));
}

该函数是从接收事件中调用的。 我使用像移位寄存器这样的列表，添加最后一个并删除第一个，然后为组件创建数据。

每次更新数据时，组件都会从 0 到目标值重新绘制，结果是从 0 开始一条线，跳转到 X。 有解决方法吗？我在网上搜索过，但没有，结果很好。 或者也许是一种添加新点并删除组件中第一个表单数据而不是从外部列表中删除数据的方法。

Answer 1

“闪烁”实际上是您的控件被重绘。微型图表使用 Skia 作为图表，这意味着当您分配新的折线图时，它显然会从头开始绘制。

而不是做类似的事情：

chartV.Chart = new LineChart()
    {
        Entries = chartVoltage,
        IsAnimated = false,
        AnimationProgress = 0,
        AnimationDuration = new TimeSpan(0),
        MaxValue = v_max,
        MinValue = 0,
        LabelTextSize = 25,
        LabelOrientation = Orientation.Horizontal,
        LineSize = 3,
    };

重新绘制整个内容只需在现有图表上再次分配条目即可。

所以你的代码将如下所示：

chartV.Chart.Entries= chartVoltage;

此外，大部分代码不需要位于主线程上，因此请将其删除并仅在必要时应用它。