图表 - 放大以显示更精确的数据 [英] Chart - Zoom In to show more precise data

问题描述

所以我有一个图表，其中包含相当多的数据。
可以在下面的图片中看到：

So I have a chart at the moment that carries quite a lot of data. This can be seen in the image below:

基本上，我希望用户能够放大并进一步查看数据。
你可以告诉它目前已经携带了大量的数据。

Basically I want the user to be able to zoom in and see further into the data. As you can tell it is currently carrying a large amount of data already.

我希望用户能够缩放并查看更精确的内容。

I would like the user to be able to zoom and see more precise things.

protected void drawChart()
    {


        DataTable dt = new DataTable();
        dt.Clear();

        foreach (DataGridViewColumn col in dataGridView1.Columns)
        {
            dt.Columns.Add(col.HeaderText);
        }

        foreach (DataGridViewRow row in dataGridView1.Rows)
        {
            DataRow dRow = dt.NewRow();
            foreach (DataGridViewCell cell in row.Cells)
            {
                dRow[cell.ColumnIndex] = cell.Value;
            }
            dt.Rows.Add(dRow);
        }


        chart1.DataBind();

        chart1.DataSource = dt;
        chart1.ChartAreas[0].AxisX.IntervalAutoMode = 
                             IntervalAutoMode.VariableCount;
        chart1.ChartAreas[0].AxisX.LabelStyle.Angle = 90;
        chart1.Series["Series1"].XValueMember = "Date/Time";

        chart1.Series["Series1"].YValueMembers = "HeartRate";

        chart1.Series["Series2"].ChartType = SeriesChartType.Line;
        chart1.Series["Series2"].YValueMembers = "Speed";

        chart1.Series["Series3"].ChartType = SeriesChartType.Line;
        chart1.Series["Series3"].YValueMembers = "Cadence";

        chart1.Series["Series4"].ChartType = SeriesChartType.Line;
        chart1.Series["Series4"].YValueMembers = "Altitude";

        chart1.Series["Series5"].ChartType = SeriesChartType.Line;
        chart1.Series["Series5"].YValueMembers = "Pressure";

        chart1.Series["Series6"].ChartType = SeriesChartType.Line;
        chart1.Series["Series6"].YValueMembers = "Power";

        chart1.Series["Series1"].LegendText = "Heart Rate";

        chart1.Series["Series1"].ToolTip =
         "Heart Rate:#VALY\nAverage:#AVG\nMinimum:#MIN\nMaximum:#MAX ";

        chart1.Series["Series2"].LegendText = "Speed";
        chart1.Series["Series2"].ToolTip = 
         "Speed(KM/H):#VALY\nAverage:#AVG\nMaximum:#MAX";

        chart1.Series["Series3"].LegendText = "Cadence";
        chart1.Series["Series3"].ToolTip = 
         "Cadence:#VALY\nAverage:#AVG\nMaximum:#MAX";

        chart1.Series["Series4"].LegendText = "Altitude";
        chart1.Series["Series4"].ToolTip =  
         "Altitude(KM/H):#VALY\nAverage:#AVG\nMaximum:#MAX";

        chart1.Series["Series5"].LegendText = "Pressure";
        chart1.Series["Series5"].ToolTip = 
         "Pressure:#VALY\nAverage:#AVG\nMaximum:#MAX";

        chart1.Series["Series6"].LegendText = "Power";
        chart1.Series["Series6"].ToolTip = 
          "Power:#VALY\nAverage:#AVG\nMaximum:#MAX";

        // add the highlight series after databinding!! (**)
        Series sz = chart1.Series.Add("Interval");
        sz.ChartType = SeriesChartType.Point;
        sz.Color = Color.Red;
        sz.BorderWidth = 3;

        foreach (DataPoint dp in chart1.Series[0].Points)
        {
            if (dp.YValues[0] == 0) sz.Points.AddXY(dp.XValue, 0);
        }

        // allow zooming: (Taw's edit)
        chart1.Series["Series1"].AxisX.ScaleView.Zoomable = true;
        chart1.Series["Series1"].CursorX.AutoScroll = true;
        chart1.Series["Series1"].CursorX.IsUserSelectionEnabled = true;          


   }

推荐答案

这很容易，但它需要一些设置来做的窍门：

This is easy but it does take a few settings to do the trick:

ChartArea CA = chart1.ChartAreas[0];  // quick reference
CA.AxisX.ScaleView.Zoomable = true;
CA.CursorX.AutoScroll = true;
CA.CursorX.IsUserSelectionEnabled = true;

现在，用户可以将鼠标拖动到感兴趣的区域，它将被放大以填充图表：

Now the user can drag the mouse over an area of interest and it will be zoomed in to fill the Chart:

>

请注意左侧的小按钮水平滚动条：这会重置范围。

Note the small button on the left of the horizontal scrollbar: This resets the range.

由于图表经常出现问题，结构化文档..

As ever so often with Chart the problem is the not exactly well structured documentation..

这篇关于图表 - 放大以显示更精确的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！