How to zoom and pan multiple charts with livecharts library

问题

I'm using beto-rodriguez's livecharts for WPF. I get data for charts from xml file and than i draw charts one above another, charts representing data have same number of spots on X axis and ZOOM and PAN are enabled with ch.Zoom = ZoomingOptions.X; and ch.Pan = PanningOptions.X; My question is possible to zoom or pan one (doesnt matter which) of those charts and that all of them are zoomed or panned so that i have vertically aligned X axis of all of them? Basically if I zoom or pan on one chart all others should zoom and pan in same time and for same amount.

回答1:

What you have to do is create an event handler for the event "RangeChanged" on each graphs' axis

<lvc:CartesianChart.AxisX>
            <lvc:Axis Title="Time" RangeChanged="Axis_RangeChanged" Separator="{x:Static lvc:DefaultAxes.CleanSeparator}" DisableAnimations="True" />
        </lvc:CartesianChart.AxisX>

In the event handler you then can extract the new min and max value for the axis and apply it to all the graphs you have on your page

private void Axis_RangeChanged(LiveCharts.Events.RangeChangedEventArgs eventArgs)
    {
        //sync the graphs
        double min = ((Axis)eventArgs.Axis).MinValue;
        double max= ((Axis)eventArgs.Axis).MaxValue;

        this.lvcChart2.AxisX[0].MinValue = min;
        this.lvcChart2.AxisX[0].MaxValue = max;

        this.lvcChart.AxisX[0].MinValue = min;
        this.lvcChart.AxisX[0].MaxValue = max;

        //Repeat for as many graphs as you have
    }

There might be some other cool way by using commands and binding but this will at least get you started.

回答2:

I managed to do the pan and zoom on X axis vertically. Firstly I created a class which reads the xml and creates object which is prepared for livecharts library then I create charts dynamically and give every axis the name

            Axis axisX = new Axis();
            Axis axisY = new Axis();
            axisX.Name = "X";
            axisY.Name = "Y";

then create an event that is fired on range change like @Kevin Ross mentioned and in the method for that event loop through all axis and checking name of the axis and then change minValue and maxValue like this:

        void axisX_RangeChanged(LiveCharts.Events.RangeChangedEventArgs eventArgs)
    {
        double min = ((Axis)eventArgs.Axis).MinValue;
        double max = ((Axis)eventArgs.Axis).MaxValue;


        int p = 0;
        string name;
        foreach (Axis CartChart in FindVisualChildren<Axis>(TestGrid))
        {
            // do something with CartChart here
            name = CartChart.Name;
            if (name == "Y")
            {
                continue;
            }
            else if (name == "X")
            {
                CartChart.MinValue = min;
                CartChart.MaxValue = max;
            }

            p++;
        }

    }

来源：https://stackoverflow.com/questions/47479495/how-to-zoom-and-pan-multiple-charts-with-livecharts-library

标签

wpf

zoom

pan

livecharts