ChartDirector應用筆記（三）

24K純開源發表於2014-01-03
筆記

前言

繼上篇文章(Simple bar chart)推出之後，本篇文章繼續ChartDirector的使用。在這篇Blog中，博主實現的是soft lighting bar。soft lighting bar是在一個XYChart中具備多個Bar的圖表，每一個Bar具有柔和光影效果(soft lighting)。在Bar chart大類中，還有glass lighting效果，也是在Bar的光影上面做功夫。這種效果主要是通過在新增圖層(BarLayer)時,傳遞不同的引數實現。使用者通過在設定皮膚進行配置，可以實現輸出不同色調和格式的圖表。

效果圖

（圖一） 整體介面

　　　　（圖二） 設定圖表的背景色和柵格顏色

（圖三） 選擇圖表檔案儲存路徑及格式（僅支援bmp,jpg,png,gif格式）

　　（圖四） 儲存完成，提示儲存路徑

（圖五）由上述配置生成的圖表

關鍵程式碼

 在Qt中使用ChartDirector，配置好工程屬性並拷貝相應的庫檔案到工程目錄下。以下以繪圖程式碼為主進行分析：

 

 1 //Y軸資料
 2  const double data[] = {450, 560, 630, 800, 1100, 1350, 1600, 1950, 2300, 2700};
 3  //X軸標記
 4  const char* lbs[] = {"1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005"};
 5  //給圖表新增標題，該標題繪製於PlotArea區域以外。指定文字內容的時候，我們還需要指定文字字型，以及字型大小。
 6  //在windows XP系統的C:\WINDOWS\Fonts下，可以檢視系統所帶字型庫。
 7  c->addTitle(msg.mainTitle.c_str(), "timesbi.ttf", 18);
 8  // 設定PlotArea區域，setPlotArea()函式所帶引數較多，在這裡我們可以設定PlotArea區域的大小以及在Chart畫布中的位置。
 9  // 前面四個引數設定PlotArea區域在XYChart繪圖座標中的位置及大小，最後的兩個引數指定水平、垂直柵格線的顏色。
10  // XYChart的linearGradientColor()可以用於設定PlotArea區域的漸變色，前面四個引數指定漸變區域，後面的兩個顏色值指定
11  // 顏色漸變範圍。
12  c->setPlotArea(50, 40, 340, 250,
13       c->linearGradientColor(30, 20, 30, 290, msg.bgColor, 0x000000),
14       -1,
15       0xffffff, 
16       msg.gridColor,
17       msg.gridColor);
18  // 新增一個圖層BarLayer。在這個圖層中，我們使用了IntArray(0, 0)來指定Bars的顏色值。也就是說，我們並沒有指定Bar的顏色。
19  // 在這種情況下，ChartDirector會自動從預設調色盤中依次選擇顏色來填充Bars。
20  // 在這裡我們呼叫了setBorderColor()來設定soft lighting效果。根據不同的值：Left, Right，光影出現在bars的不同側。
21  c->addBarLayer(DoubleArray(data, (int)(sizeof(data)/sizeof(data[0]))), 
22       IntArray(0, 0))->setBorderColor(Chart::Transparent, Chart::softLighting(msg.lightDirection));
23  // 設定X軸標記
24  c->xAxis()->setLabels(StringArray(lbs, (int)(sizeof(lbs)/sizeof(lbs[0]))));
25  // 設定X軸的標記位移。
26  c->xAxis()->setTickOffset(0.5);
27  // 設定X, Y軸的標題說明的字型和字型大小
28  c->xAxis()->setTitle(msg.xTitle.c_str(), "timesbi.ttf", 8);
29  c->yAxis()->setTitle(msg.yTitle.c_str(), "timesbi.ttf", 8);
30  // 設定X, Y軸軸線的寬度，這裡為2個畫素寬。
31  c->xAxis()->setWidth(2);
32  c->yAxis()->setWidth(2);

 

小結

  1. Chart繪圖區域和PlotArea大小要區分清楚：Chart繪圖區域是整個畫布的大小，所有後續的繪圖操作都在這張畫布上進行操作，包括XY座標區域，XY座標軸標誌、名稱等資料。Chart區域大小在生成XYChart物件的時候指定；PlotArea物件在前面已經說過了，針對於XYChart才有意義。在XYChart中，PlotArea代表的區域是由X, Y軸形成的矩形區域，不包括X, Y軸的標記、名稱以及圖表標題。所有的圖層(Layer)也是覆蓋在PlotArea上面進行操作的。
  2. ChartDirector支援的圖片檔案格式包括png, jpg, jpeg, gif, bmp, SVG等。其中SVG格式需要在生成圖表檔案之前，呼叫BaseChart.enableVectorOutput進行設定。

 

相關文章