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，配置好工程屬性並拷貝相應的庫文件到工程目錄下。以下以繪圖代碼為主進行分析：

 

//Y軸數據
 const double data[] = {450, 560, 630, 800, 1100, 1350, 1600, 1950, 2300, 2700};
 //X軸標記
 const char* lbs[] = {"1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005"};
 //給圖表添加標題，該標題繪制於PlotArea區域以外。指定文本內容的時候，我們還需要指定文本字體，以及字體大小。
 //在windows XP系統的C:\WINDOWS\Fonts下，可以查看系統所帶字體庫。
 c->addTitle(msg.mainTitle.c_str(), "timesbi.ttf", 18);
 // 設置PlotArea區域，setPlotArea()函數所帶參數較多，在這里我們可以設置PlotArea區域的大小以及在Chart畫布中的位置。
 // 前面四個參數設置PlotArea區域在XYChart繪圖坐標中的位置及大小，最后的兩個參數指定水平、垂直柵格線的顏色。
 // XYChart的linearGradientColor()可以用於設置PlotArea區域的漸變色，前面四個參數指定漸變區域，后面的兩個顏色值指定
 // 顏色漸變范圍。
 c->setPlotArea(50, 40, 340, 250,
      c->linearGradientColor(30, 20, 30, 290, msg.bgColor, 0x000000),
      -1,
      0xffffff, 
      msg.gridColor,
      msg.gridColor);
 // 添加一個圖層BarLayer。在這個圖層中，我們使用了IntArray(0, 0)來指定Bars的顏色值。也就是說，我們並沒有指定Bar的顏色。
 // 在這種情況下，ChartDirector會自動從默認調色板中依次選擇顏色來填充Bars。
 // 在這里我們調用了setBorderColor()來設置soft lighting效果。根據不同的值：Left, Right，光影出現在bars的不同側。
 c->addBarLayer(DoubleArray(data, (int)(sizeof(data)/sizeof(data[0]))), 
      IntArray(0, 0))->setBorderColor(Chart::Transparent, Chart::softLighting(msg.lightDirection));
 // 設置X軸標記
 c->xAxis()->setLabels(StringArray(lbs, (int)(sizeof(lbs)/sizeof(lbs[0]))));
 // 設置X軸的標記位移。
 c->xAxis()->setTickOffset(0.5);
 // 設置X, Y軸的標題說明的字體和字體大小
 c->xAxis()->setTitle(msg.xTitle.c_str(), "timesbi.ttf", 8);
 c->yAxis()->setTitle(msg.yTitle.c_str(), "timesbi.ttf", 8);
 // 設置X, Y軸軸線的寬度，這里為2個像素寬。
 c->xAxis()->setWidth(2);
 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進行設置。