How to make the x Axis to start on 0 and have a step of 2 seconds, instead of staring on a second the program started, using Livecharts?

问题

I am using sample code from live charts

Code behind

        private double _axisMax;
        private double _axisMin;


        public Plotter()
        {
            var mapper = Mappers.Xy<MeasureModel>()
                .X(model => model.DateTime.Ticks)   //use DateTime.Ticks as X
                .Y(model => model.Value);           //use the value property as Y
            //lets save the mapper globally.
            Charting.For<MeasureModel>(mapper);
            //the values property will store our values array
            ChartValues = new ChartValues<MeasureModel>();
            //lets set how to display the X Labels
            DateTimeFormatter = value => new DateTime((long)value).ToString("ss");
            //AxisStep forces the distance between each separator in the X axis
            AxisStep = TimeSpan.FromSeconds(5).Ticks;
            //AxisUnit forces lets the axis know that we are plotting seconds
            //this is not always necessary, but it can prevent wrong labeling
            AxisUnit = TimeSpan.TicksPerSecond;
            SetAxisLimits(DateTime.Now);
            //The next code simulates data changes every 300 ms
            IsReading = false;
            DataContext = this;
        }

        public ChartValues<MeasureModel> ChartValues { get; set; }
        public Func<double, string> DateTimeFormatter { get; set; }
        public double AxisStep { get; set; }
        public double AxisUnit { get; set; }

        public double AxisMax
        {
            get => _axisMax;
            set
            {
                _axisMax = value;
                OnPropertyChanged("AxisMax");
            }
        }
        public double AxisMin
        {
            get => _axisMin;
            set
            {
                _axisMin = value;
                OnPropertyChanged("AxisMin");
            }
        }

        public bool IsReading { get; set; }



        private void SetAxisLimits(DateTime now)
        {
            AxisMax = now.Ticks + TimeSpan.FromSeconds(1).Ticks; // lets force the axis to be 1 second ahead
            AxisMin = now.Ticks - TimeSpan.FromSeconds(20).Ticks; // and 20 seconds behind
        }

inside method that actually inserts coord. I have:

So

    var now = DateTime.Now;
    ChartValues.Add(new MeasureModel
    {
        DateTime = now,
        Value = SomeFunction()
    });
    SetAxisLimits(now);

xaml

             <wpf:CartesianChart Grid.Row="0" 
                                AnimationsSpeed="0:0:0.9" 
                                Hoverable="False" 
                                DataTooltip="{x:Null}">
                <wpf:CartesianChart.Series>
                    <wpf:LineSeries 
                        Name="MyChart" Values="{Binding ChartValues}" 
                                    PointGeometry="{x:Null}" 
                                    LineSmoothness="2"
                                    StrokeThickness="3" 
                                    Stroke="#F34336"
                                    Fill="Transparent"/>
                </wpf:CartesianChart.Series>
                <wpf:CartesianChart.AxisX>
                    <wpf:Axis LabelFormatter="{Binding DateTimeFormatter}" 
                              MaxValue="{Binding AxisMax}" 
                              MinValue="{Binding AxisMin}"
                              Unit="{Binding AxisUnit}">
                        <wpf:Axis.Separator>
                            <wpf:Separator Step="{Binding AxisStep}" />
                        </wpf:Axis.Separator>
                    </wpf:Axis>
                </wpf:CartesianChart.AxisX>
                <wpf:CartesianChart.AxisY>
                    <wpf:Axis MinValue="-20"
                              MaxValue="20">

                    </wpf:Axis>
                </wpf:CartesianChart.AxisY>
            </wpf:CartesianChart>

But How to change code so I graph shows x Axis label starting on 0, and then go 0,1,2,...100,...300 etc.? Instead of starting on the second program starts?

I want to accomplish something like:

Maybe I could use other library like oxyplot or something, any advice on this?

回答1:

I think the most straight forward way would be to save the first datapoint DateTime value. Then you can calculate a relative time for every other datapoint. With these relative values you can "make" your charts start at 0.

To get the data moving out of your chart, if time goes on you should feed the relative time value to your SetAxisLimits(TimeSpan) function. The data type has to be changed to TimeSpan.

Something like this:

var now = DateTime.Now;
if(ChartValues.Count == 0)
    start = now; // save first timestamp to reference the following datapoints
var time = now.Subtract(start)
ChartValues.Add(new MeasureModel
{
    Time = time,
    Value = SomeFunction()
});
SetAxisLimits(time);

来源：https://stackoverflow.com/questions/55695549/how-to-make-the-x-axis-to-start-on-0-and-have-a-step-of-2-seconds-instead-of-st