ChartDirector應用筆記（三）

前言

繼上篇文章(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進行設置。