工控编程吧

标题: 上位机MFC扩展编程图表以指定样式风格的动画及界面主题显示 [打印本页]

---

作者: qq263946146    时间: 2020-1-10 21:21
标题: 上位机MFC扩展编程图表以指定样式风格的动画及界面主题显示
图表在显示时可以以指定类型的动画显示，让图表更具有观赏性。
同时图表的外观也可以更改主题，系统默认自带有30多种外观主题可供选择使用。
也可以自己准备基于颜色的自定义主题或基于图片的纹理主题。
当前例程实现图表动画显示与主题设置功能，效果如下：
(, 下载次数: 0)

上传

点击文件名下载附件

界面有两按钮，点击对应按钮实现对应功能。
下面是实现过程与关键代码介绍：
首先创建基于CBCGPFormView的单文档工程，添加下面三个自自变量，
        CBCGPChartCtrl m_wndChart;
        CBCGPChartTheme m_CustomColorTheme;//自定义图表颜色主题;
        CBCGPChartTheme m_CustomTexturedTheme;//自定义图表纹理主题;

并在虚拟函数Create中初始化三个变量，Create要自己通过类向导添加。
代码如下：

1. BOOL CMy123View::Create(LPCTSTR lpszClassName, LPCTSTR lpszWindowName, DWORD dwStyle, const RECT& rect, CWnd* pParentWnd, UINT nID, CCreateContext* pContext)
   
2. {
   
3.         BOOL bRst = CBCGPFormView::Create(lpszClassName, lpszWindowName, dwStyle, rect, pParentWnd, nID, pContext);;
   
4.         //获取图表指针;
   
5.         m_wndChart.SubclassDlgItem(IDC_CHART,this);
   
6.         CBCGPChartVisualObject* pChart = m_wndChart.GetChart();
   
7.         ASSERT_VALID(pChart);
   
8.         //设置图表属性;
   
9.         CBCGPInfoTipOptions infoTipOptions;
   
10.         infoTipOptions.m_StemLocation = CBCGPPopupWindow::BCGPPopupWindowStemLocation_BottomLeft;
    
11.         m_wndChart.EnableInfoTip(TRUE, &infoTipOptions);
    
12.         pChart->SetChartTitle(_T("图表标题"));
    
13.         pChart->ShowDataTable(TRUE);
    
14.         pChart->ShowDataMarkers(TRUE);
    
15.         pChart->ShowDataLabels(true);
    
16.         pChart->SetThemeOpacity(70);
    
17.         //创建数据系列;
    
18.         CBCGPChartSeries* pSeries1 = pChart->CreateSeries(_T("系列1"), CBCGPColor(), BCGP_CT_DEFAULT, BCGPChartColumn);
    
19.         CBCGPChartSeries* pSeries2 = pChart->CreateSeries(_T("系列2"));
    
20.         pSeries2->SetCurveType (BCGPChartFormatSeries::CCT_SPLINE_HERMITE);
    
21.         BCGPChartFormatSeries style = pSeries2->GetSeriesFormat();
    
22.         style.SetSeriesLineWidth(5);
    
23.         pSeries2->SetSeriesFormat(style);
    
24.         CBCGPChartSeries* pSeries3 = pChart->CreateSeries(_T("系列3"));
    
25.         //添加数据;
    
26.         pSeries1->AddDataPoint(0.752345);
    
27.         pSeries1->AddDataPoint(2.16354);
    
28.         pSeries1->AddDataPoint(5.673343);
    
29.         pSeries1->AddDataPoint(3.456434);
    
30.         pSeries1->AddDataPoint(3.58756);
    
31.         pSeries1->AddDataPoint(5.013636);
    
32.         pSeries1->AddDataPoint(8.345545);
    
33.         pSeries1->AddDataPoint(6.34233);
    
34.         pSeries1->AddDataPoint(4.897554);
    
35.         pSeries1->AddDataPoint(7.897466);
    
36.         pSeries1->AddDataPoint(9.343565);
    
37. 
    
38.         pSeries2->AddDataPoint(2.);
    
39.         pSeries2->AddDataPoint(4.);
    
40.         pSeries2->AddDataPoint(6.);
    
41.         pSeries2->AddDataPoint(7.);
    
42.         pSeries2->AddDataPoint(6.);
    
43.         pSeries2->AddDataPoint(3.);
    
44.         pSeries2->AddDataPoint(1.);
    
45.         pSeries2->AddDataPoint(0.);
    
46. 
    
47.         pSeries3->AddDataPoint(4.);
    
48.         pSeries3->AddDataPoint(1.);
    
49.         pSeries3->AddDataPoint(3.);
    
50.         pSeries3->AddDataPoint(6.);
    
51.         pSeries3->AddDataPoint(.5);
    
52.         pSeries3->AddDataPoint(8.);
    
53.         pSeries3->AddDataPoint(4.);
    
54.         pSeries3->AddDataPoint(2.);
    
55.         pSeries3->AddDataPoint(3.8);
    
56.         pSeries3->AddDataPoint(4.2);
    
57. 
    
58.         pChart->SetSeriesShadow();
    
59.         pChart->ShowDataMarkers();
    
60.         //添加添加到布局管理器统一管理布局;
    
61.         if (GetLayout() == NULL)
    
62.                 return bRst;
    
63.         CBCGPStaticLayout* pLayout = (CBCGPStaticLayout*)GetLayout();
    
64.         if (pLayout == NULL)
    
65.                 return bRst;
    
66.         pLayout->AddAnchor(m_wndChart.GetDlgCtrlID(), CBCGPStaticLayout::e_MoveTypeNone, CBCGPStaticLayout::e_SizeTypeBoth);
    
67.         //初始化自定义图表颜色主题;
    
68.         CBCGPChartTheme::InitChartColors(m_CustomColorTheme,
    
69.                 CBCGPColor::White,        // 填充颜色;
    
70.                 CBCGPColor::Chocolate,        // 外轮廓颜色;
    
71.                 CBCGPColor::Maroon,                // 文本颜色;
    
72.                 CBCGPColor(),
    
73.                 CBCGPColor::SeaShell, .08);
    
74.         InitSeriesColors(m_CustomColorTheme.m_seriesColors[0], CBCGPColor::Crimson);
    
75.         InitSeriesColors(m_CustomColorTheme.m_seriesColors[1], CBCGPColor::BlueViolet);
    
76.         InitSeriesColors(m_CustomColorTheme.m_seriesColors[2], CBCGPColor::CornflowerBlue);
    
77.         InitSeriesColors(m_CustomColorTheme.m_seriesColors[3], CBCGPColor::DarkGreen);
    
78.         InitSeriesColors(m_CustomColorTheme.m_seriesColors[4], CBCGPColor::Coral);
    
79.         //初始化自定义图表纹理主题;
    
80.         CBCGPChartTheme::InitChartColors(m_CustomTexturedTheme,
    
81.                 CBCGPColor::White,        // 填充颜色;
    
82.                 CBCGPColor::CadetBlue,        // 外轮廓颜色;
    
83.                 CBCGPColor::CadetBlue,                //文本颜色;
    
84.                 CBCGPColor(),
    
85.                 CBCGPColor::SeaShell, .08);
    
86. 
    
87.         CBCGPImage imageBackground(IDR_BACKGROUND);
    
88.         m_CustomTexturedTheme.m_brChartFillColor.SetTextureImage(imageBackground, CBCGPColor::AliceBlue, TRUE /* Watermark */);
    
89.         m_CustomTexturedTheme.m_brPlotFillColor.SetTextureImage(imageBackground, CBCGPColor::AliceBlue, TRUE /* Watermark */);
    
90.         m_CustomTexturedTheme.m_brLegendFillColor.SetTextureImage(imageBackground, CBCGPColor::AliceBlue, TRUE /* Watermark */);
    
91.         m_CustomTexturedTheme.m_brLegendEntryFillColor.Empty();
    
92. 
    
93.         CBCGPImage imageWall(IDR_WALL);
    
94.         CBCGPChartTheme::PrepareWallBrushes(m_CustomTexturedTheme, CBCGPBrush(imageWall, CBCGPColor::LightGray, FALSE));
    
95. 
    
96.         InitSeriesColors(m_CustomTexturedTheme.m_seriesColors[0], CBCGPColor::LightSlateGray, IDR_TEXTURE1);
    
97.         InitSeriesColors(m_CustomTexturedTheme.m_seriesColors[1], CBCGPColor::LimeGreen, IDR_TEXTURE2);
    
98.         InitSeriesColors(m_CustomTexturedTheme.m_seriesColors[2], CBCGPColor::RosyBrown, IDR_TEXTURE3);
    
99.         InitSeriesColors(m_CustomTexturedTheme.m_seriesColors[3], CBCGPColor::CadetBlue, IDR_TEXTURE4);
    
100.         InitSeriesColors(m_CustomTexturedTheme.m_seriesColors[4], CBCGPColor::Goldenrod, IDR_TEXTURE5);
     
101.         return bRst;
     
102. }
     
103. 
     

复制代码

初始化时有用到界面布局管理器，记得在视窗类构造函数中添加函数EnableLayout();
另外初始化时还用到了PNG格式图片ID,IDR_WALL,IDR_BACKGROUND,IDR_TEXTURE1,IDR_TEXTURE2,IDR_TEXTURE3等。
可以从例程目录复制图片使用，也可以自已网络下载图片使用，图片添加到工程后记得修改图片ID为上面的。
还有一个函数InitSeriesColors为自定义静态函数，主要用于初始化指定颜色变量。
函数代码如下：

1. static void InitSeriesColors(BCGPSeriesColors& sc, const CBCGPColor& color, UINT nTextureResID = 0)
   
2. {
   
3.         CBCGPColor colorGradient = color;
   
4.         colorGradient.MakeLighter(.5);
   
5.         //数据系列填充颜色或使用纹理图片;
   
6.         if (nTextureResID != 0)
   
7.         {
   
8.                 CBCGPColor colorAlt = color;
   
9.                 colorAlt.MakeLighter(.2);
   
10.                 sc.m_brElementFillColor.SetTextureImage(CBCGPImage(nTextureResID), colorAlt);
    
11.         }
    
12.         else
    
13.         {
    
14.                 sc.m_brElementFillColor.SetColors(color, colorGradient, (CBCGPBrush::BCGP_GRADIENT_TYPE)-1);
    
15.         }
    
16.         //<>数据标签，数据标记，数据系列元素边框颜色;
    
17.         CBCGPColor colorOutline = color;
    
18.         colorOutline.MakeDarker(.1);
    
19.         sc.m_brElementLineColor.SetColor(colorOutline);
    
20.         sc.m_brMarkerLineColor.SetColor(colorOutline);
    
21.         sc.m_brDataLabelLineColor.SetColor(colorOutline);
    
22.         //<>数据标签，数据标记填充颜色;
    
23.         sc.m_brMarkerFillColor.SetColors(color, colorGradient, CBCGPBrush::BCGP_GRADIENT_DIAGONAL_LEFT);
    
24.         sc.m_brMarkerFillColor.MakeLighter(.15);
    
25.         sc.m_brDataLabelFillColor.SetColor(color);
    
26.         sc.m_brDataLabelFillColor.MakePale();
    
27.         //数据标签文本颜色;
    
28.         CBCGPColor colorText = color;
    
29.         colorText.MakeDarker(.2);
    
30.         sc.m_brDataLabelTextColor.SetColor(colorText);
    
31. }

复制代码

以上变量都初始化好了以后，就可以进一步实现图表动画或主题更改。
添加按钮，关联按钮点击函数，实现图表动画显示：

1. void CMy123View::OnBnClickedButton1()
   
2. {
   
3.         CBCGPChartVisualObject* pChart = m_wndChart.GetChart();
   
4.         if (pChart == NULL)
   
5.                 return;
   
6.         double dbAnimationTime=0.5;//动画时间，建议0.5到2.0秒;
   
7.         ////动画风格，枚举类型，共有以下几种;
   
8.         //enum BCGPAnimationType
   
9.         //{
   
10.         //        BCGPANIMATION_Legacy = 0,        // 基于时间的线性动画;
    
11.         //        BCGPANIMATION_AccelerateDecelerate,
    
12.         //        BCGPANIMATION_Cubic,
    
13.         //        BCGPANIMATION_Linear,
    
14.         //        BCGPANIMATION_SmoothStop,
    
15.         //        BCGPANIMATION_ParabolicFromAcceleration,
    
16.         //};
    
17.         CBCGPAnimationManager::BCGPAnimationType AnimationType;
    
18.         ////动画样式，枚举类型，共有以下几种;
    
19.         //enum BCGPChartAnimationStyle
    
20.         //{
    
21.         //        BCGPChartAnimationStyle_Default,
    
22.         //        BCGPChartAnimationStyle_None,//不使用动画;
    
23.         //        BCGPChartAnimationStyle_Grow,
    
24.         //        BCGPChartAnimationStyle_Fade,
    
25.         //        BCGPChartAnimationStyle_Slide,
    
26.         //        BCGPChartAnimationStyle_SlideReversed,
    
27.         //};
    
28.         CBCGPChartSeries::BCGPChartAnimationStyle AnimationStyle;
    
29. 
    
30.         static int nType=0,nStyle=0;
    
31.         AnimationType = (CBCGPAnimationManager::BCGPAnimationType)nType;
    
32.         AnimationStyle = (CBCGPChartSeries::BCGPChartAnimationStyle)nStyle;
    
33.         pChart->StartAnimation(dbAnimationTime,AnimationType,AnimationStyle);
    
34. 
    
35.         nType++;
    
36.         nType = nType>5?0:nType;
    
37.         nStyle++;
    
38.         nStyle = nStyle>5?0:nStyle;
    
39. }

复制代码

可以看出图表动画显示只要调用一个函数StartAnimation就能实现。
函数可以设置动画的样式与风格，系统默认的几种选项在函数内可参考使用。
添加另一按钮，关联按钮点击函数，实现图表主题修改功能：

1. void CMy123View::OnBnClickedButton2()
   
2. {
   
3.         CBCGPChartVisualObject* pChart = m_wndChart.GetChart();
   
4.         if (pChart == NULL)
   
5.                 return;
   
6.         static int nTheme = -2;
   
7.         //默认主题有以下选项;
   
8.         //enum ChartTheme
   
9.         //{
   
10.         //        CT_DEFAULT,
    
11.         //        CT_PASTEL,
    
12.         //        CT_SPRING,
    
13.         //        CT_GREEN,
    
14.         //        CT_BLUE,
    
15.         //        CT_GOLD,
    
16.         //        CT_DARK_ROSE,
    
17.         //        CT_BLACK_AND_GOLD,
    
18.         //        CT_RAINBOW,
    
19.         //        CT_GRAY,
    
20.         //        CT_ARCTIC,
    
21.         //        CT_BLACK_AND_RED,
    
22.         //        CT_PLUM,
    
23.         //        CT_SUNNY,
    
24.         //        CT_VIOLET,
    
25.         //        CT_FLOWER,
    
26.         //        CT_STEEL,
    
27.         //        CT_GRAY_AND_GREEN,
    
28.         //        CT_OLIVE,
    
29.         //        CT_AUTUMN,
    
30.         //        CT_BLACK_AND_GREEN,
    
31.         //        CT_BLACK_AND_BLUE,
    
32.         //        CT_FLAT_2014_1,
    
33.         //        CT_FLAT_2014_2,
    
34.         //        CT_FLAT_2014_3,
    
35.         //        CT_FLAT_2014_4,
    
36.         //        CT_FLAT_2015_1,
    
37.         //        CT_FLAT_2015_2,
    
38.         //        CT_FLAT_2015_3,
    
39.         //        CT_FLAT_2015_4,
    
40.         //        CT_FLAT_2015_5,
    
41.         //        CT_FLAT_2016_1,
    
42.         //        CT_FLAT_2016_2,
    
43.         //        CT_FLAT_2016_3,
    
44.         //        CT_FLAT_2016_4,
    
45.         //        CT_FLAT_2016_5,
    
46.         //};
    
47.         if(nTheme==-2)//使用自定义图表颜色主题;
    
48.                 pChart->SetColors(m_CustomColorTheme, true);
    
49.         else if(nTheme==-1)//使用自定义图表纹理主题;
    
50.                 pChart->SetColors(m_CustomTexturedTheme, true);
    
51.         else//使用系统默认图表主题;
    
52.                 pChart->SetColors((CBCGPChartTheme::ChartTheme)nTheme, true);
    
53.         pChart->Redraw();
    
54.         nTheme++;
    
55.         nTheme = nTheme>36?-2:nTheme;
    
56. }

复制代码

例程下载：
(, 下载次数: 2)

上传

点击文件名下载附件
[weixinlianxi]1[/weixinlianxi]

---

欢迎光临 工控编程吧 (https://www.gkbc8.com/)

Powered by Discuz! X3.4