C1Chart:強大的交互能力

C1Chart集成了豐富的可交互性。可讓最終用戶直接在觸摸設備上使用C1Chart。經過設置繪製元素的樣式,可讓用戶經過鼠標點擊或者懸停時高亮須要的值,如最大值、最小值等。對於大數據量或者實時數據,每每須要的是一個圖表窗口,添加不斷更新的數據,經過滾動或者縮放獲取部分或者某一時段的信息走勢。對於3D圖表,C1Chart3D支持鼠標拖拽,只要使用鼠標就能夠完成X、Y、Z三軸任意方向的旋轉,知足最終用戶的交互需求。post

本文講述瞭如何建立C1Chart圖表,以及其強大的交互能力(縮放,反向,X軸翻轉,刻度)。大數據

1.建立C1Chart圖表spa

首先控制C1Chart的交互特性。分別是鼠標驅動旋轉、刻度、轉換和縮放。具體代碼以下;excel

?code

1
2
3
4
5
6
7
// Enable interaction
                       c1Chart1.Interaction.Enabled =             true             ;
                       c1Chart1.Interaction.Actions[             "Zoom"             ].Modifier = Keys.None;
                       c1Chart1.Interaction.Actions[             "Scale"             ].Modifier = Keys.Control;
                       c1Chart1.Interaction.Actions[             "Translate"             ].Modifier = Keys.Shift;
                       c1Chart1.Interaction.Actions[             "Rotate"             ].Modifier = Keys.Alt;
                       c1Chart1.Interaction.Appearance = InteractionAppearance.FillSelectionArea;

 

其次創建C1Chart的序列。本文的Demo創建了四條Series,分別是電導率,Ph,溫度和壓力。這四條序列分別用不用顏色區別表示。具體代碼以下:component

?orm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Create chart series
                        c1Chart1.ChartGroups[0].ChartData.SeriesList.Clear();
                        cdsTemp = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();
                        cdsPress = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();
                        cdsCond = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();
                        cdsPh = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();
 
                        cdsTemp.SymbolStyle.Shape = SymbolShapeEnum.None;
                        cdsTemp.LineStyle.Color = Color.FromArgb(150, 32, 132);
                        cdsTemp.LineStyle.Thickness = 2;
                        cdsPress.SymbolStyle.Shape = SymbolShapeEnum.None;
                        cdsPress.LineStyle.Color = Color.FromArgb(42, 2, 153);
                        cdsPress.LineStyle.Thickness = 2;
                        cdsCond.SymbolStyle.Shape = SymbolShapeEnum.None;
                        cdsCond.LineStyle.Color = Color.FromArgb(0, 114, 160);
                        cdsCond.LineStyle.Thickness = 2;
                        cdsPh.SymbolStyle.Shape = SymbolShapeEnum.None;
                        cdsPh.LineStyle.Color = Color.FromArgb(100, 126, 52);
                        cdsPh.LineStyle.Thickness = 2;

最後建立C1Chart的軸和滾動條。具體代碼以下:htm

?blog

1
2
3
4
5
6
7
8
9
10
11
12
// Setup chart axes and scrollbar
                         c1Chart1.ChartArea.AxisX.ScrollBar.Scale = 0.1;
                         c1Chart1.ChartArea.AxisY.ScrollBar.Scale = 1.0;
                         c1Chart1.ChartArea.AxisX.ScrollBar.Alignment = StringAlignment.Near;
                         c1Chart1.ChartArea.AxisY.ScrollBar.Alignment = StringAlignment.Near;
                         c1Chart1.ChartArea.AxisX.ScrollBar.Appearance = ScrollBarAppearanceEnum.XP;
                         c1Chart1.ChartArea.AxisY.ScrollBar.Appearance = ScrollBarAppearanceEnum.XP;
                         c1Chart1.ChartArea.AxisX.ScrollBar.Visible =             true             ;
                         c1Chart1.ChartArea.AxisY.ScrollBar.Visible =             true             ;
                         c1Chart1.ChartArea.AxisY.ScrollBar.Max = 80;
                         c1Chart1.ChartArea.AxisY.ScrollBar.Min = 20;
                         c1Chart1.ChartArea.AxisX.ScrollBar.AxisScroll +=             new             AxisScrollEventHandler(ScrollBar_AxisScroll);

 

2.初始化C1Chart,加載數據ci

在本文的附件Demo中,經過C1XLBook的Load方法,加載excel文件裏的數據。excel文件包含C1所需的四個序列(電導率、Ph、溫度、壓力)的多個數據。而且這四個序列能夠在運行時動態的增長或減小,即用戶能夠選擇顯示哪一個序列的圖表。具體能夠參考附件Demo中的代碼。

 

3.C1Chart交互

用戶很簡單的就能實現C1的交互(翻轉、刻度、反向和縮放)。

縮放:對於大數據量或者實時數據,每每須要的是一個圖表窗口,添加不斷更新的數據,用戶只用經過滾動或者縮放就能夠獲取部分或者某一時段的信息走勢。

放大的參考代碼:

?

1
2
3
// Zoom out
c1Chart1.ChartArea.AxisX.ScrollBar.Scale = c1Chart1.ChartArea.AxisX.ScrollBar.Scale / _zoomScale;
c1Chart1.ChartArea.AxisY.ScrollBar.Scale = c1Chart1.ChartArea.AxisY.ScrollBar.Scale / _zoomScale;

縮小的參考代碼:

?

1
2
3
// Zoom in
c1Chart1.ChartArea.AxisX.ScrollBar.Scale = c1Chart1.ChartArea.AxisX.ScrollBar.Scale * _zoomScale;
c1Chart1.ChartArea.AxisY.ScrollBar.Scale = c1Chart1.ChartArea.AxisY.ScrollBar.Scale * _zoomScale;

 

X軸翻轉:在本文Demo中,用戶只需點擊X軸翻轉的CheckBox,C1Chart就當即能實現翻轉,代碼的實現也異常簡單,只需一句,以下所示。

c1Chart1.ChartArea.AxisX.Reversed = chkAxisXReversed.Checked;

反向:用戶能夠對C1Chart的圖表進行X軸、Y軸的反向,在設置Bool類型的C1Chart.ChartArea.Inverted屬性後,從新繪製圖表元素的樣式。具體代碼能夠見附件Demo。

刻度:在本文附件的Demo中,用戶能夠輕鬆的獲得圖表某一刻度點的值。只需用鼠標輕輕移動DrillPoint,所須要的值就經過指望的方式展現出來,好比高亮,懸浮,提示等。本文Demo經過不一樣的顏色標記出DrillPoint的值。具體代碼能夠見附件Demo。

 

不只如此,用戶還能夠在運行時輕鬆的更改數據源,以便獲取所需的圖表。好比,以下圖所示圖表。 

 有關C1Chart的更多介紹和Demo可訪問:http://www.gcpowertools.com.cn/products/componentone_studio_winchart.htm

相關文章
相關標籤/搜索