如何使用实时图表库缩放和平移多个图表 [英] How to zoom and pan multiple charts with livecharts library

问题描述

我正在使用beto-rodriguez的实时图表进行WPF.我从xml文件中获取图表的数据，然后我在一个以上的图表上绘制图表，表示数据的图表在X轴上具有相同数量的点，并且使用ch.Zoom = ZoomingOptions.X启用了ZOOM和PAN；和ch.Pan = PanningOptions.X; 我的问题是可以缩放或平移这些图表中的一个(无关紧要)，并且所有图表都可以缩放或平移，这样我所有图表的X轴都垂直对齐了吗?基本上，如果我缩放或平移一个图表，其他所有图表应同时缩放和平移相同的数量.

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.

推荐答案

您要做的是为每个图形轴上的事件"RangeChanged"创建一个事件处理程序

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.

这篇关于如何使用实时图表库缩放和平移多个图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！