How to align two (or more) charts in size, scroll and grid

问题

I have three signals (volgate, current, and energy) referred to the same period. I print data on two graphs: one with voltage (blue) and current (red) and the other with only energy (orange). They are two different graphs, but in practice, they share the same X-axis.

I have two cursor synchronized with the mouse movement that is acting as one cursor for the two graphs and a tooltip based on cursor position shows the currently selected values for the three signals (all the three series have IsXValueIndexed = true with interval = 1). As you can see they work well:

I have two problems:

1) when I start to make zoom they start to differ in GRID ALIGNMENT and SIZE of the chart area. After register always the last point with the "Changing" event, when the user releases the mouse left button "Change" event fires and did the following work: I force the zoom on the opposite graph base on source name.

dlChart_SelectionRangeChange(object sender, CursorEventArgs e){            
            var source = sender as Chart;
            double sp = selection_point.getStartPoint();
            double ep = selection_point.getEndPoint();
            double tmp = 0;

            if (sp == ep)
                return;
            if (sp > ep)
            {// zoom contrario
                tmp = sp;
                sp = ep;
                ep = tmp;
            }

            switch (source.ChartAreas[0].Name)
            {
                case CHARTAREA1_NAME:
                    dlChart2.ChartAreas[0].AxisX.ScaleView.Zoom(sp, ep);
                    break;
                case CHARTAREA2_NAME:
                    dlChart.ChartAreas[0].AxisX.ScaleView.Zoom(sp, ep);
                    break;
                default: break;
            }
        }

Following image describe the problem:

2) after zooming in one chart a scrollbar appear, and at this point, user can change the chart view on only one chart. I want to scroll the same way also the other chart.

I always want that the two charts behave like one chart.

回答1:

I recommend using only one chart. You can add a 2nd ChartArea to it and make it the one your 3rd series is using.

Given your identical x-axes this should be the simplest and cleanest solution.

To enable scrolling, as usual one needs to set these properties:

        ChartArea ca1 = chart1.ChartAreas[0];
        ChartArea ca2 = chart1.ChartAreas[1];

        Axis ax1 = ca1.AxisX;
        Axis ax2 = ca2.AxisX;

        series3.ChartArea = ca2.Name;

        ax1.ScaleView.Zoomable = true;
        ax2.ScaleView.Zoomable = true;

        ca1.CursorX.IsUserSelectionEnabled = true;
        ca2.CursorX.IsUserSelectionEnabled = true;

To keep two ChartAreas in synch this should be enough:

private void chart1_AxisViewChanged(object sender, ViewEventArgs e)
{
    ChartArea ca1 = chart1.ChartAreas[0];
    ChartArea ca2 = chart1.ChartAreas[1];
    Axis ax1 = ca1.AxisX;
    Axis ax2 = ca2.AxisX;

    if (e.Axis== ax1) { ax2.ScaleView.Size = ax1.ScaleView.Size;
                        ax2.ScaleView.Position = ax1.ScaleView.Position;  }
    if (e.Axis== ax2) { ax1.ScaleView.Size = ax2.ScaleView.Size;
                        ax1.ScaleView.Position = ax2.ScaleView.Position;   }
}

来源：https://stackoverflow.com/questions/42583912/how-to-align-two-or-more-charts-in-size-scroll-and-grid

标签

winforms

mschart