[項目過程中所遇到的各種問題記錄]圖表篇——有關MSChart的一些小技巧

  完成了有關編輯器篇的内容，接下來記錄下這一年裡在有關圖表使用過程中碰到的一些問題及個人的解決方法。

以下是本文所要介紹的内容：

1、MSChart基本概況介紹。 2、開發過程中碰到的問題及解決方法。

一、MSChart基本概況介紹

       在開發一些管理系統的時候總會碰到一些需求需要對報表進行圖形化的展示——圖表，在微軟的MSChart沒出來前，.NET的winforms下許多的圖表控件不是要收費就是可使用的圖表類型較少或者各種資料太少（也可能是我了解的太少），不過自從在VS2008上微軟推出了MSChart後，在winforms上進行圖表統計就友善了很多很多。

        MSChart分為2個部分，一個是winforms版本，另一個是webform版，并且都提供了相應的示例程式（超過200個示例代碼，并包括C#版本和VB.NET版本，其中内置了多種圖表類型，基本上涵蓋了各行各業的所需的圖表類型），使得開發者可以根據需求快速的找到自己所需的圖表類型，同時檢視示例代碼可以馬上上手進行開發，如下圖：

當然本文不是介紹MSChart的具體是如何使用的，上面僅僅是對MSChart進行各簡單性的介紹，本文主要介紹的内容還是在我開發過程中碰到問題。

二、開發過程中碰到的問題及解決方法

     現在開始介紹下我所碰到的幾個問題：

1、如果在對于統計的類别數量不可數的情況下，如何解決生成的每個類别有不同的列？

在公司年初開發的一個winforms程式中需要對使用者自己定義的分類資料進行統計，而使用者所建立的分類數量又是不定的（但不能超過10個），這時就碰到個問題：就是MSChart圖表中的列如果想做的好看，吸引眼球需要進行大量的配置，比如：列的顔色、邊框寬度、陰影等等，而每個使用者建立的分類對應着一個列，本來的設想是根據數量動态生成對應的列，但是在實際的開發過程中，如果要保證每個列的樣式達到統一，且顔色等又要區分的話，使用代碼來動态生成太過于複雜。

我就想到了個不是辦法的辦法，就是由于使用者自定義的分類是不可能超過10個的，是以我就事先在圖示中建立好了10個列，根據使用者建立的分類數量來對這些已經建立好的列進行資料填充，而那些沒有填充資料的列就不會出現，這樣的解決辦法雖然比較的傻，但是實際的效果很不錯，畢竟動态建立的列要保證樣式統一需要花時間調試，而且不像直接通過配置建立出來的列那麼直覺，見下圖：

2、實作類似于CNZZ流量統計形式的點選分類突出顯示

使用過CNZZ統計的朋友肯定知道，CNZZ對通路者的來源統計展示形式是一個餅狀展示的，同時通過某塊區域時可以突出顯示這個區域，如下圖：

可以看到，我通過點選【江蘇省】，将這塊區域突出顯示了，這個功能雖然不起眼，但是在實際公司的使用過程中，比如開會的時候有針對性的介紹某塊内容的時候就會使用到，而如果在winforms下使用MSChart如何實作呢？

如果想通過MSChart實作這樣的效果就需要資料列中具體值（DataPoint）的CustomProperties來實作，代碼如下（VB.NET）：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<code>private</code> <code>void</code> <code>chartPerformance_MouseDown(</code><code>object</code> <code>sender, System.Windows.Forms.MouseEventArgs e)</code>

<code>{</code>

<code>    </code><code>HitTestResult result = chartPerformance.HitTest(e.X, e.Y);</code>

<code>    </code><code>if</code> <code>(result.PointIndex == -1) {</code>

<code>        </code><code>return</code><code>;</code>

<code>    </code><code>}</code>

<code>    </code><code>bool</code> <code>exploded = (chartPerformance.Series(0).Points(result.PointIndex).CustomProperties ==</code><code>"Exploded=true"</code> <code>?</code><code>true</code> <code>:</code><code>false</code><code>);</code>

<code>    </code><code>DataPoint point =</code><code>default</code><code>(DataPoint);</code>

<code>    </code><code>foreach</code> <code>( point</code><code>in</code> <code>chartPerformance.Series(0).Points) {</code>

<code>        </code><code>point.CustomProperties =</code><code>""</code><code>;</code>

<code>    </code><code>if</code> <code>(exploded) {</code>

<code>    </code><code>//點選具體列</code>

<code>    </code><code>if</code> <code>(result.ChartElementType == ChartElementType.DataPoint) {</code>

<code>        </code><code>DataPoint dPoint = chartPerformance.Series(0).Points(result.PointIndex);</code>

<code>        </code><code>dPoint.CustomProperties =</code><code>"Exploded = true"</code><code>;</code>

<code>        </code><code>if</code> <code>(((List&lt;ModelClass&gt;)dPoint.Tag).Count == 0) {</code>

<code>            </code><code>return</code><code>;</code>

<code>        </code><code>}</code>

<code>    </code><code>//點選圖例</code>

<code>    </code><code>if</code> <code>(result.ChartElementType == ChartElementType.LegendItem) {</code>

<code>}</code>

這段代碼的主要步驟是：

1、為圖表控件增加一個MouseDown事件 2、擷取圖表控件目前點選的坐标，并判斷是否存在 3、判斷點選的對象是具體的列還是圖例，然後為點選的圖例增加相應的屬性：CustomProperties = "Exploded = true";

具體的效果如下：

可以看到圖表中，【優】列已經被分離突出顯示了。

此時我們還可以為這個表增加一些類似于網頁開發中的MouseOver、MouseLeave效果，以達到更好的使用者體驗，如下圖：

可以看到圖檔上【中】列和圖例上的上面明顯有一層格子狀網線，這樣可以告訴使用者當先所選的列，實作代碼如下：

<code>private</code> <code>void</code> <code>chartPerformance_MouseMove(System.Object sender, System.Windows.Forms.MouseEventArgs e)</code>

<code>    </code><code>if</code> <code>(result ==</code><code>null</code><code>) {</code>

<code>        </code><code>point.BackSecondaryColor = Color.Black;</code>

<code>        </code><code>point.BackHatchStyle = ChartHatchStyle.None;</code>

<code>        </code><code>point.BorderWidth = 1;</code>

<code>    </code><code>if</code> <code>(result.ChartElementType == ChartElementType.DataPoint | result.ChartElementType == ChartElementType.LegendItem) {</code>

<code>        </code><code>this</code><code>.Cursor = Cursors.Hand;</code>

<code>        </code><code>dPoint.BackSecondaryColor = Color.White;</code>

<code>        </code><code>dPoint.BackHatchStyle = ChartHatchStyle.Percent25;</code>

<code>        </code><code>dPoint.BorderWidth = 2;</code>

<code>    </code><code>else</code> <code>{</code>

<code>        </code><code>this</code><code>.Cursor = Cursors.Default;</code>

這段代碼的實作步驟是：

1、擷取目前點選的坐标。 2、周遊所有具體的點及圖例為其增加一個背景樣式，及滑鼠手勢。

以上就是本文的所有内容了，歡迎大家指點！：）

話說，各位看過的朋友如果覺得本文對您還有點用，或者覺得本文還有價值的話，麻煩将滑鼠移到【推薦】上，幫我點選下，非常非常的感謝!

項目過程中所遇到的各種問題記錄

編輯器篇：

圖表篇：

ORM篇：

部署篇：

工具篇：

本文轉自kyo-yo部落格園部落格，原文連結：http://www.cnblogs.com/kyo-yo/archive/2010/12/20/Problem-Record-Chart-Some-Tips-On-MSChart.html，如需轉載請自行聯系原作者