2D 动画图表

• 下载演示项目 - 45.7 KB
• 下载源代码 - 25.8 KB

引言

本文演示了如何使用 Windows GDI 创建和动画化不同类型的 2D 图表（条形图、折线图和饼图）。本文还附带了一个演示项目和包含实现 Win32 应用程序图表所需的所有类的源代码。

背景

这一点背景可以参考网络上各种 Flash 图表项目和商业软件。我的目标是仅使用 Windows GDI（不使用 OpenGL 渲染）在 2D 图表方面尽可能接近现有的 Flash 解决方案。这就是为什么该解决方案适用于希望以动态方式呈现图形数据并能够实时渲染数据的应用程序。该解决方案还旨在快速可靠地运行，并占用最少的 CPU 时间。

Using the Code

要使用提供的代码，您只需下载 Source.zip 文件并将源代码提取到您的项目应用程序中。然后，包含头文件，您就可以开始创建和编辑图表了。您还可以下载演示项目，在一个地方查看所有可用的图表类型和动画。

创建 2D 动画图表

首先，我将解释所提供解决方案的结构。基类是 CGraphObject，它提供了创建不同图表类型和动画的功能，以及更改一些默认图表对象属性的功能。此类派生自 CWnd，实际上就是图表对象的窗口。因此，您需要为此对象提供一个 ID。请按照示例创建此对象。

// First call the constructor
m_pGraphObject1 = new CGraphObject();

// Then initialize m_pGraphObject1 object
// (or however you name it, in your project)
m_pGraphObject1->Create( NULL, NULL, NULL, 
   CRect(40,20,240,220), this, ID_OBJECT_GRAPH_1, NULL );

我限制了图表窗口的最小尺寸，因为我认为没有理由创建小于 200x200 像素的图表窗口，除非您根本不想查看或读取任何内容，但您可以在 CGraphObject 类的构造函数中自由更改此设置。

然后，您需要决定需要哪种图表类型，当您决定后，像这样创建指定类型的图表。

// Create chart of the specified type
m_pGraphObject1->CreateGraph( GT_2DPIE );

可能的图表类型包括：2D 饼图 (GT_2DPIE)、2D 条形图 (GT_2DBAR) 和 2D 折线图 (GT_2DLINE)。

下一步取决于您选择的图表类型。在本文中，我将假定您将使用 2D 饼图图表对象。因此，接下来您需要向饼图中添加扇区。您不必担心扇区的百分比。您可以添加任意数量的扇区，但当您达到 100% 时，所有尝试添加的扇区都不会被添加（除非您更改此设置，我不建议这样做）。要向饼图中添加扇区，请执行以下操作。

// Add 2D pie chart segment
m_pGraphObject1->Add2DPieGraphSegment( 40, RGB(255,0,0), "Seg_1" );
m_pGraphObject1->Add2DPieGraphSegment( 25, RGB(0,255,0), "Seg_2" );
m_pGraphObject1->Add2DPieGraphSegment( 15, RGB(0,0,255), "Seg_3" );

第一个参数是我们将在屏幕上生成的饼图中显示的扇区百分比。第二个是扇区的颜色，第三个是将在饼图图例中显示的扇区文本。

完成添加饼图扇区后，您应该决定是否希望图表在屏幕上显示动画。请按照代码操作。

// Set 2D pie chart animation
m_pGraphObject1->SetGraphAnimation( TRUE, AT_PIE_DRAW );

第一个参数表示是否进行动画。如果图表不进行动画，则第二个参数无关紧要，但如果图表要在屏幕上进行动画，则此参数还可以具有取决于您选择的图表类型的值。由于我在这里解释的是 2D 饼图的工作原理，因此此参数可以具有以下值：2D 饼图绘制动画 (AT_PIE_DRAW) 和 2D 饼图混合动画 (AT_PIE_BLEND)。

就这样！您的图表现在已完全可用。

完成使用 CGraphObject 对象后，必须按照以下方式销毁它。

//Destroy graph object
m_pGraphObject1->DestroyWindow();

更改默认图表属性

现在，当您在屏幕上看到图表时，您可能会觉得它并不算什么。默认图表设置算不了什么，因为这些设置只是为了启用图表的主要功能，即数据表示和可能的动画。有很多图表属性可以修改，例如：

• 图表标题文本
• 图表副标题文本
• 图表标题文本颜色
• 图表副标题文本颜色
• 图表标题文本阴影（显示或隐藏）
• 图表副标题文本阴影（显示或隐藏）
• 图表背景样式（纯色或渐变）
• 图表背景颜色
• 图表背景渐变样式（垂直或水平）
• 图表标签文本颜色
• 图表图例（显示或隐藏）
• 图表图例背景颜色
• 图表图例文本颜色
• 图表尺寸
• 图表位置
• 图表动画类型

通过修改这些属性，您可以获得预览图片中所示的结果（我希望甚至更好）。

图表设计注意事项

在此，我将仅解释一些可能的图表设计注意事项，以帮助您的图表看起来更好。

第一点是，一切都取决于您要显示在图表中的数据数量和数据类型。如果您处理的数据希望在同一图表中与其他数据进行比较，那么您必须使用 2D 条形图或 2D 折线图类型（因为饼图没有处理系列数据的可能性）。

如果您发现您的系列数量等于或小于扇区数量，那么我建议您使用宽度和高度相同的图表。这将改善图表的外观，无论图表尺寸如何。

如果您想加快图表动画的速度，则需要更改 CGraphObject 类头文件中的 ANIMATION_TIME 标识符。在减小此值时要小心，因为它是一个 Windows 定时器资源，每次创建动画图表对象时都会创建该资源。如果您的应用程序中有太多图表，这可能是一个威胁。此演示程序可以很好地处理所有 12 个图表和默认动画计时。加快图表动画速度会消耗更多 CPU 时间，但看起来更好。

您可能会发现更改默认的 CGraphObject 类 Create() 方法很有用。如果您想在屏幕上移动图表窗口，则可以修改传递给 CWnd Create() 方法的参数。您的图表可以具有所有窗口都具有的窗口属性。

注意您传递给图表标题或副标题、标签或图例文本的文本长度。此解决方案不包含文本换行方法，因此过长的文本字符串可能会看起来很难看。总之，图表上的文本用于标记数据的特定属性（数量、种类或其他）。

图表内的所有定位和尺寸调整都是根据相对计算完成的，基于图表的尺寸和位置。因此，如果您发现可以通过更改这些值来改善图表的外观，请随意这样做。

最后，您可以自由修改此解决方案中的任何内容，并根据您的需求进行调整。结合不同类型的动画以获得全新的动画可能很容易，但这需要实验。

关注点

我很有兴趣继续研究这些图表，但下次希望在 3D 空间中进行。这将需要使用快速 3D 渲染设备，而一种可能的解决方案可能是使用 OpenGL。