ChartDirector是一款使用方便快捷、功能非常強大且交互性強的通用Web圖表組件。在Web服務器以及嵌入式應用程序開發(fā)中，ChartDirector是一個非常理想的圖表工具，因為它擁有豐富的圖表圖形組件庫。

一、圖標餅圖（一）

此示例演示如何使用CDML和參數替換格式化在扇區(qū)標簽中包含圖標。它還演示了漸變背景顏色，標題的玻璃著色效果和圖表框的圓角。

• 漸變背景顏色使用Chart.metalColor創(chuàng)建，藍色為基色，垂直方向。

• 使用BaseChart.setRoundedFrame配置圓角框架。

• 標題的玻璃著色效果使用Chart.glassEffect定義，然后使用標題TextBox對象的Box.setBackground應用于標題。

• 使用BaseChart.addExtraField將圖標文件名作為額外字段添加到圖表中。

• 扇區(qū)標簽格式字符串使用CDML和參數替換格式指定為：

  <* block，valign = absmiddle *> <* img = {field0} *> <* block *> {label} <* br *> {percent}％<* / *> <* / *>

  這意味著扇區(qū)標簽是一個塊，其中包含一個圖像，后跟另一個文本塊。圖像文件取自額外字段。文本塊包含兩行顯示扇區(qū)名稱和百分比。

• 格式字符串使用PieChart.setLabelFormat應用于圖表。

• 對于Web應用程序，我們需要設置搜索路徑以使用BaseChart.setSearchPath從當前腳本目錄加載圖標圖像。這是因為對于某些Web服務器（例如IIS），默認的當前目錄不是腳本目錄（例如，IIS使用IIS可執(zhí)行目錄），因此需要顯式設置搜索路徑。

源代碼清單

#include "chartdir.h"

int main(int argc, char *argv[])
{
    // The data for the pie chart
    double data[] = {72, 18, 15, 12};

    // The depths for the sectors
    double depths[] = {30, 20, 10, 10};

    // The labels for the pie chart
    const char *labels[] = {"Sunny", "Cloudy", "Rainy", "Snowy"};

    // The icons for the sectors
    const char *icons[] = {"sun.png", "cloud.png", "rain.png", "snowy.png"};

    // Create a PieChart object of size 400 x 310 pixels, with a blue (CCCCFF) vertical metal
    // gradient background, black border, 1 pixel 3D border effect and rounded corners
    PieChart *c = new PieChart(400, 310, Chart::metalColor(0xccccff, 0), 0x000000, 1);
    c->setRoundedFrame();

    // Set the center of the pie at (200, 180) and the radius to 100 pixels
    c->setPieSize(200, 180, 100);

    // Add a title box using 15pt Times Bold Italic font, on a blue (CCCCFF) background with glass
    // effect
    c->addTitle("Weather Profile in Wonderland", "timesbi.ttf", 15)->setBackground(0xccccff,
        0x000000, Chart::glassEffect());

    // Set the pie data and the pie labels
    c->setData(DoubleArray(data, (int)(sizeof(data) / sizeof(data[0]))), StringArray(labels, (int)(
        sizeof(labels) / sizeof(labels[0]))));

    // Add icons to the chart as a custom field
    c->addExtraField(StringArray(icons, (int)(sizeof(icons) / sizeof(icons[0]))));

    // Configure the sector labels using CDML to include the icon images
    c->setLabelFormat(
        "<*block,valign=absmiddle*><*img={field0}*> <*block*>{label}\n{percent}%<*/*><*/*>");

    // Draw the pie in 3D with variable 3D depths
    c->set3D(DoubleArray(depths, (int)(sizeof(depths) / sizeof(depths[0]))));

    // Set the start angle to 225 degrees may improve layout when the depths of the sector are
    // sorted in descending order, because it ensures the tallest sector is at the back.
    c->setStartAngle(225);

    // Output the chart
    c->makeChart("iconpie.png");

    //free up resources
    delete c;
    return 0;
}

二、圖標餅圖（二）

此示例擴展了Icon Pie Chart（1）示例，演示如何使用CDML在圖表標題，扇區(qū)標簽和繪制徽標中包含多種字體和顏色。它還演示了銀色背景顏色，圓角和標題的玻璃陰影效果。

• 銀背景通過使用實現Chart.silverColor創(chuàng)建銀色，然后用它在PieChart.PieChart作為圖表背景顏色。

• 使用BaseChart.setRoundedFrame配置圓角框架。

• 包含多種字體和顏色的標題以CDML編寫，并使用BaseChart.addTitle添加到圖表中。

• 標題的玻璃著色效果使用Chart.glassEffect定義，然后使用標題TextBox對象的Box.setBackground應用于標題。

• 使用CDML設計的徽標使用BaseChart.addTitle2與BottomRight對齊添加到圖表中作為另一個標題。

• 扇區(qū)標簽的圖標文件名使用BaseChart.addExtraField作為額外字段添加到圖表中。

• 扇區(qū)標簽格式字符串使用CDML和參數替換和格式指定為：

  <* block，valign = absmiddle *> <* img = {field0} *> {label}（{percent | 0}％）

  這意味著扇區(qū)標簽是一個塊，其中包含一個圖像，后跟扇區(qū)名稱和百分比。圖像文件取自額外字段。

• 格式字符串使用PieChart.setLabelFormat應用于圖表。

• 對于Web應用程序，我們需要設置搜索路徑以使用BaseChart.setSearchPath從當前腳本目錄加載圖標圖像。這是因為對于某些Web服務器（例如IIS），默認的當前目錄不是腳本目錄（例如，IIS使用IIS可執(zhí)行目錄），因此需要顯式設置搜索路徑。

源代碼清單

#include "chartdir.h"

int main(int argc, char *argv[])
{
    // The data for the pie chart
    double data[] = {28, 45, 5, 1, 12};

    // The labels for the pie chart
    const char *labels[] = {"Excellent", "Good", "Bad", "Very Bad", "Neutral"};

    // The icons for the sectors
    const char *icons[] = {"laugh.png", "smile.png", "sad.png", "angry.png", "nocomment.png"};

    // Create a PieChart object of size 560 x 300 pixels, with a silver background, black border, 1
    // pxiel 3D border effect and rounded corners
    PieChart *c = new PieChart(560, 300, Chart::silverColor(), 0x000000, 1);
    c->setRoundedFrame();

    // Set the center of the pie at (280, 150) and the radius to 120 pixels
    c->setPieSize(280, 150, 120);

    // Add a title box with title written in CDML, on a sky blue (A0C8FF) background with glass
    // effect
    c->addTitle(
        "<*block,valign=absmiddle*><*img=doc.png*> Customer Survey: "
        "<*font=timesi.ttf,color=000000*>Do you like our <*font,color=dd0000*>Hyper<*super*>TM"
        "<*/font*> molecules?", "timesbi.ttf", 15, 0x000080)->setBackground(0xa0c8ff, 0x000000,
        Chart::glassEffect());

    // Add a logo to the chart written in CDML as the bottom title aligned to the bottom right
    c->addTitle(Chart::BottomRight,
        "<*block,valign=absmiddle*><*img=molecule.png*> <*block*><*color=FF*>"
        "<*font=timesbi.ttf,size=12*>Molecular Engineering\n<*font=arial.ttf,size=10*>Creating "
        "better molecules");

    // Set the pie data and the pie labels
    c->setData(DoubleArray(data, (int)(sizeof(data) / sizeof(data[0]))), StringArray(labels, (int)(
        sizeof(labels) / sizeof(labels[0]))));

    // Set 3D style
    c->set3D();

    // Use the side label layout method
    c->setLabelLayout(Chart::SideLayout);

    // Set the label background color to transparent
    c->setLabelStyle()->setBackground(Chart::Transparent);

    // Add icons to the chart as a custom field
    c->addExtraField(StringArray(icons, (int)(sizeof(icons) / sizeof(icons[0]))));

    // Configure the sector labels using CDML to include the icon images
    c->setLabelFormat("<*block,valign=absmiddle*><*img={field0}*> {label} ({percent|0}%)");

    // Explode the 3rd and 4th sectors as a group (index = 2 and 3)
    c->setExplodeGroup(2, 3);

    // Set the start angle to 135 degrees may improve layout when there are many small sectors at
    // the end of the data array (that is, data sorted in descending order). It is because this
    // makes the small sectors position near the horizontal axis, where the text label has the least
    // tendency to overlap. For data sorted in ascending order, a start angle of 45 degrees can be
    // used instead.
    c->setStartAngle(135);

    // Output the chart
    c->makeChart("iconpie2.png");

    //free up resources
    delete c;
    return 0;
}

關于ChartDirector的教程將會持續(xù)更新，敬請關注~