找回密码
 本站已关闭注册功能,有需求联系qq/微信263946146

QQ登录

只需一步，快速开始

首页 › 工控编程 › 上位机 › 上位机MFC扩展编程图表以指定样式风格的动画及界面主题 ...
返回列表 发新帖

上位机MFC扩展编程图表以指定样式风格的动画及界面主题显示

[ 复制链接 ]
qq263946146 2020-1-10 21:21:57 显示全部楼层 阅读模式 打印 上一主题 下一主题
图表在显示时可以以指定类型的动画显示，让图表更具有观赏性。
同时图表的外观也可以更改主题，系统默认自带有30多种外观主题可供选择使用。
也可以自己准备基于颜色的自定义主题或基于图片的纹理主题。
当前例程实现图表动画显示与主题设置功能，效果如下：

上位机MFC扩展编程图表以指定样式风格的动画及界面主题显示

上位机MFC扩展编程图表以指定样式风格的动画及界面主题显示

界面有两按钮，点击对应按钮实现对应功能。
下面是实现过程与关键代码介绍：
首先创建基于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);

  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.);

  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);

  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);

  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();

  93.         CBCGPImage imageWall(IDR_WALL);
  94.         CBCGPChartTheme::PrepareWallBrushes(m_CustomTexturedTheme, CBCGPBrush(imageWall, CBCGPColor::LightGray, FALSE));

  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. }

复制代码
初始化时有用到界面布局管理器，记得在视窗类构造函数中添加函数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;

  30.         static int nType=0,nStyle=0;
  31.         AnimationType = (CBCGPAnimationManager::BCGPAnimationType)nType;
  32.         AnimationStyle = (CBCGPChartSeries::BCGPChartAnimationStyle)nStyle;
  33.         pChart->StartAnimation(dbAnimationTime,AnimationType,AnimationStyle);

  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. }
复制代码
例程下载：
请点击此处下载

请先注册会员后在进行下载

已注册会员，请先登录后下载

文件名称:图表以指定样式风格的动画及界面主题显示.rar 
文件大小:466.5 KB  售价:3金币
下载权限: 不限 以上或 VIP会员   [购买捐助会员]   [充值积分]   有问题联系我


  

如果您认可，可联系功能定制！

  

如果您着急，充值会员可直接联系发您资料！

  

QQ联系我

微信扫扫联系我

  


回复

使用道具 举报

qq263946146
快速回复 返回列表 客服中心 搜索