掌握ChartControl：多角度解析

一、ChartControl是什麼？

ChartControl是DevExpress公司推出的一種數據可視化工具，它使用C#和Visual Basic.NET編寫，可用於創建高級圖表、3D圖表、實時圖表、儀錶板、地圖和Gantt圖表等數據展示效果。

ChartControl可用於WinForms、ASP.NET、WPF和Silverlight多個平台，圖表類型包括面積圖、條形圖、折線圖、氣泡圖、甘特圖、數據點圖、散點圖、餅圖和雷達圖等多種類型，讓用戶能夠輕鬆地呈現和分析大數據。

二、ChartControl的基本使用

ChartControl的基礎使用非常簡單，只需要創建一個ChartControl實例並設置屬性即可：

ChartControl chartControl = new ChartControl();
chartControl.Title.Text = "銷售數據";
Series series = new Series("數據", ViewType.Line);
series.Points.Add(new SeriesPoint("一月", 100));
series.Points.Add(new SeriesPoint("二月", 200));
series.Points.Add(new SeriesPoint("三月", 300));
chartControl.Series.Add(series);

代碼解釋：

1. 創建一個ChartControl實例。

2. 設置圖表標題為「銷售數據」。

3. 創建一個名為「數據」的系列，類型為折線圖。

4. 向系列中添加三個數據點。

5. 將系列添加到圖表中。

這樣，一個簡單的折線圖就創建完成了。

三、ChartControl的高級使用

1、自定義圖表樣式

ChartControl提供了多種自定義圖表樣式的方法，包括為整個圖表設置主題、更改系列線條顏色、添加數據標籤等等。

以下代碼演示為一個面積圖添加圖例：

ChartControl chartControl = new ChartControl();
chartControl.SeriesTemplate.ChangeView(ViewType.Area);
chartControl.DataSource = CreateData();
chartControl.SeriesDataMember = "Country";
chartControl.SeriesTemplate.ArgumentDataMember = "Year";
chartControl.SeriesTemplate.ValueDataMembers.AddRange(new string[] { "Population" });
((AreaSeriesView)chartControl.SeriesTemplate.View).AxisY.Label.TextPattern = "{V:###,###,###,##0,,M}";
((AreaSeriesView)chartControl.SeriesTemplate.View).AreaOpacity = 180;
((XYDiagram)chartControl.Diagram).AxisX.Label.Angle = 45;
Legend legend = new Legend();
chartControl.Legend = legend;
legend.AlignmentHorizontal = LegendAlignmentHorizontal.Right;
legend.AlignmentVertical = LegendAlignmentVertical.Top;

代碼解釋：

1. 創建一個ChartControl實例。

2. 設置圖表類型為面積圖。

3. 設置數據源。

4. 設置系列數據成員為「Country」。

5. 設置類別數據成員為「Year」。

6. 設置值數據成員為「Population」。

7. 設置Y軸標籤格式為以百萬為單位，格式為「###,###,###,##0,,M」。

8. 設置面積透明度為180。

9. 設置X軸標籤旋轉角度為45度。

10. 創建一個圖例實例。

11. 將圖例實例添加到圖表中。

12. 設置圖例位置為右上方。

2、交互式圖表

ChartControl提供了多種交互式圖表的功能，包括鼠標懸停提示、點選系列和數據點、縮放和平移等，讓用戶能夠方便地查看和分析數據。

以下代碼演示為一個折線圖添加鼠標懸停提示和點選系列功能：

ChartControl chartControl = new ChartControl();
chartControl.SeriesTemplate.ChangeView(ViewType.Line);
chartControl.ToolTipOptions.ToolTipPosition = ToolTipPosition.MousePoint;
chartControl.ToolTipOptions.ShowForSeries = true;
chartControl.ToolTipOptions.ShowForPoints = true;
chartControl.Legend.Visibility = DevExpress.Utils.DefaultBoolean.False;

Series series1 = new Series("Series 1", ViewType.Line);
series1.Points.Add(new SeriesPoint("A", 1));
series1.Points.Add(new SeriesPoint("B", 2));
series1.Points.Add(new SeriesPoint("C", 3));
series1.Points.Add(new SeriesPoint("D", 4));
chartControl.Series.Add(series1);

Series series2 = new Series("Series 2", ViewType.Line);
series2.Points.Add(new SeriesPoint("A", 10));
series2.Points.Add(new SeriesPoint("B", 20));
series2.Points.Add(new SeriesPoint("C", 30));
series2.Points.Add(new SeriesPoint("D", 40));
chartControl.Series.Add(series2);

chartControl.MouseUp += (s, e) =>
{
    if (e.Button == System.Windows.Forms.MouseButtons.Left)
    {
        ChartHitInfo hitInfo = chartControl.CalcHitInfo(e.Location);
        if (hitInfo.Series != null)
        {
            if (hitInfo.Series.Visible)
                hitInfo.Series.Visible = false;
            else
                hitInfo.Series.Visible = true;
        }
    }
};

代碼解釋：

1. 創建一個ChartControl實例。

2. 設置圖表類型為折線圖。

3. 設置鼠標懸停提示的位置為鼠標指針所在位置。

4. 同時為系列和數據點顯示鼠標懸停提示。

5. 設置圖例不可見。

6. 創建兩個名為「Series 1」和「Series 2」的系列，類型為折線圖，分別添加四個數據點。

7. 將兩個系列添加到圖表中。

8. 為ChartControl的MouseUp事件添加事件處理程序，通過判斷鼠標指針的左鍵單擊事件，實現點選系列的功能。

四、ChartControl的實窗口應用

ChartControl非常適合用於實時數據的展示和分析，在實時數據監測和控制系統、實時交易系統和實時監控系統等領域都有廣泛應用。

以下代碼演示如何在WinForms中創建一個示例程序，用於實時監控股票價格：

public partial class MainForm : Form
{
    private readonly Random _random = new Random();
    private readonly Timer _timer = new Timer();
    private readonly ChartControl _chartControl = new ChartControl();

    public MainForm()
    {
        InitializeComponent();

        _chartControl.Dock = DockStyle.Fill;
        _chartControl.SeriesTemplate.ChangeView(ViewType.CandleStick);
        _chartControl.DataSource = CreateData(TimeSpan.FromMilliseconds(500));
        _chartControl.SeriesDataMember = "Symbol";
        _chartControl.SeriesTemplate.ArgumentDataMember = "DateTime";
        _chartControl.SeriesTemplate.ValueDataMembers.AddRange(new string[] { "Open", "High", "Low", "Close" });
        ((CandleStickSeriesView)_chartControl.SeriesTemplate.View).AxisX.Label.Angle = 45;
        ((CandleStickSeriesView)_chartControl.SeriesTemplate.View).ColorEach = true;
        _timer.Interval = 500;
        _timer.Tick += Timer_Tick;
        _timer.Start();

        Controls.Add(_chartControl);
    }

    private void Timer_Tick(object sender, EventArgs e)
    {
        foreach (Series series in _chartControl.Series)
        {
            if (series.Visible)
            {
                for (int i = 0; i < series.Points.Count; i++)
                {
                    if (series.Points[i].Values.Length == 4)
                    {
                        double rand = _random.NextDouble() * 0.5 + 0.5;
                        double nextValue = series.Points[i].Values[3] * rand;
                        series.Points[i].Values[0] = nextValue - 1;
                        series.Points[i].Values[1] = nextValue + 1;
                        series.Points[i].Values[2] = nextValue - 0.5;
                        series.Points[i].Values[3] = nextValue + 0.5;
                    }
                }
            }
        }
    }

    private DataTable CreateData(TimeSpan timeSpan)
    {
        DataTable dataTable = new DataTable();
        dataTable.Columns.Add("Symbol", typeof(string));
        dataTable.Columns.Add("DateTime", typeof(DateTime));
        dataTable.Columns.Add("Open", typeof(double));
        dataTable.Columns.Add("High", typeof(double));
        dataTable.Columns.Add("Low", typeof(double));
        dataTable.Columns.Add("Close", typeof(double));
        DateTime dateTime = DateTime.Now;
        foreach (string symbol in new string[] { "AAPL", "GOOG", "MSFT", "TSLA" })
        {
            for (int i = 0; i < 60; i++)
            {
                DataRow dataRow = dataTable.NewRow();
                dataRow["Symbol"] = symbol;
                dataRow["DateTime"] = dateTime + TimeSpan.FromSeconds(i * timeSpan.TotalSeconds);
                dataRow["Open"] = _random.NextDouble() * 10 + 90;
                dataRow["High"] = _random.NextDouble() * 10 + (double)dataRow["Open"];
                dataRow["Low"] = _random.NextDouble() * 10 + (double)dataRow["Open"];
                dataRow["Close"] = _random.NextDouble() * 10 + (double)dataRow["Open"];
                dataTable.Rows.Add(dataRow);
            }
        }
        return dataTable;
    }
}

代碼解釋：

1. 創建一個繼承自Form的MainForm類。

2. 創建一個ChartControl實例，並設置為窗口的Dock樣式為Fill。

3. 設置圖表類型為K線圖。

4. 設置數據源。

5. 設置系列數據成員為「Symbol」。

6. 設置類別數據成員為「DateTime」。

7. 設置值數據成員為「Open」、「High」、「Low」和「Close」。

8. 設置X軸標籤旋轉角度為45度。

9. 開啟曲線顏色分別設置。

10. 創建一個定時器實例，並設置計時間隔為500ms。

11. 為定時器的Tick事件添加事件處理程序，實現動態更新數據點的功能。

12. 創建一個CreateData方法，用於生成示例數據。

13. 在MainForm類的構造函數中，設置ChartControl和Timer，並將ChartControl添加到窗口中。

結語

本文對ChartControl進行了全面的解析，從基礎使用到高級應用，再到實際應用的示例展示，FashionAI希望讀者們能夠對ChartControl的使用有更全面、深入和實踐性的了解。ChartControl的強大功能，不僅能夠幫助用戶輕鬆完成數據展示和分析的任務，同時也為需要處理大數據和複雜數據的業務場景提供了更佳的解決方案。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/230710.html

掌握ChartControl：多角度解析

一、ChartControl是什麼？

二、ChartControl的基本使用

三、ChartControl的高級使用

1、自定義圖表樣式

2、交互式圖表

四、ChartControl的實窗口應用

結語

相關推薦

發表回復