ChartDirector是一個非常理想的圖表工具，它擁有廣泛的圖表類型、分層架構、實時互動的大數據表、普遍適應于各種應用程序以及支持PDF和SVG圖標等的優點。此系列連載旨在介紹ChartDirector的實用教程，供大家學習討論。

一、盒須圖（一）

此示例演示了如何創建盒須圖。標準盒須圖使用盒須符號可以繪制最多5個數據集。這5個數據集盡管可以表示任何類型的量，但他們一般被稱為最大值、四分之三值、中間值、四分之一值和最小值。

在盒須符號中，四分之三和四分之一值表示方框。最大值、最小值和中間值表示水平標記。其中有一條垂直線連接最大值和最小值。 在ChartDirector中，XYChart.addBoxWhiskerLayer和XYChart.addBoxWhiskerLayer2可用于創建單色和多色盒須層。

創建盒須層時，不需要存在所有5個數據集。一種常見用法是僅提供四分之三和四分之一值的數據（將其他參數保留為空數組），以此僅繪制圖表的“Box”部分，形成浮動框圖。另一種常見用法是僅提供最大值和最小值以僅繪制圖表的“Whisker”部分，它們可用作“error symbols”。您甚至可以僅提供中間值數據來繪制浮動標記線。

源代碼清單

以下代碼可在“cppdemo/simplebar”中找到。MFC版本的代碼可在“mfcdemo / mfcdemo”中找到（僅限Windows版本）。QT版本的代碼可在“qtdemo/qtdemo”中找到。

#include "chartdir.h"

int main(int argc, char *argv[])
{
    // Sample data for the Box-Whisker chart. Represents the minimum, 1st quartile, medium, 3rd
    // quartile and maximum values of some quantities
    double Q0Data[] = {40, 45, 40, 30, 20, 50, 25, 44};
    double Q1Data[] = {55, 60, 50, 40, 38, 60, 51, 60};
    double Q2Data[] = {62, 70, 60, 50, 48, 70, 62, 70};
    double Q3Data[] = {70, 80, 65, 60, 53, 78, 69, 76};
    double Q4Data[] = {80, 90, 75, 70, 60, 85, 80, 84};

    // The labels for the chart
    const char *labels[] = {"Group A", "Group B", "Group C", "Group D", "Group E", "Group F",
        "Group G", "Group H"};

    // Create a XYChart object of size 550 x 250 pixels
    XYChart *c = new XYChart(550, 250);

    // Set the plotarea at (50, 25) and of size 450 x 200 pixels. Enable both horizontal and
    // vertical grids by setting their colors to grey (0xc0c0c0)
    c->setPlotArea(50, 25, 450, 200)->setGridColor(0xc0c0c0, 0xc0c0c0);

    // Add a title to the chart
    c->addTitle("Computer Vision Test Scores");

    // Set the labels on the x axis and the font to Arial Bold
    c->xAxis()->setLabels(StringArray(labels, (int)(sizeof(labels) / sizeof(labels[0])))
        )->setFontStyle("arialbd.ttf");

    // Set the font for the y axis labels to Arial Bold
    c->yAxis()->setLabelStyle("arialbd.ttf");

    // Add a Box Whisker layer using light blue 0x9999ff as the fill color and blue (0xcc) as the
    // line color. Set the line width to 2 pixels
    c->addBoxWhiskerLayer(DoubleArray(Q3Data, (int)(sizeof(Q3Data) / sizeof(Q3Data[0]))),
        DoubleArray(Q1Data, (int)(sizeof(Q1Data) / sizeof(Q1Data[0]))), DoubleArray(Q4Data, (int)(
        sizeof(Q4Data) / sizeof(Q4Data[0]))), DoubleArray(Q0Data, (int)(sizeof(Q0Data) / sizeof(
        Q0Data[0]))), DoubleArray(Q2Data, (int)(sizeof(Q2Data) / sizeof(Q2Data[0]))), 0x9999ff,
        0x0000cc)->setLineWidth(2);

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

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

二、盒須圖（二）

此示例擴展了盒須圖（一）的示例，演示了控制圖表外觀的各種方法，包括使用不同的顏色和不同的字體大小，以及使用漸變著色和圓角的方法。

源代碼清單

以下代碼可在“cppdemo/simplebar”中找到。MFC版本的代碼可在“mfcdemo / mfcdemo”中找到（僅限Windows版本）。QT版本的代碼可在“qtdemo/qtdemo”中找到。

#include "chartdir.h"

int main(int argc, char *argv[])
{
    // Sample data for the Box-Whisker chart. Represents the minimum, 1st quartile, medium, 3rd
    // quartile and maximum values of some quantities
    double Q0Data[] = {40, 45, 40, 30, 20, 50, 25, 44};
    double Q1Data[] = {55, 60, 50, 40, 38, 60, 51, 60};
    double Q2Data[] = {62, 70, 60, 50, 48, 70, 62, 70};
    double Q3Data[] = {70, 80, 65, 60, 53, 78, 69, 76};
    double Q4Data[] = {80, 90, 75, 70, 60, 85, 80, 84};

    // The labels for the chart
    const char *labels[] = {"A", "B", "C", "D", "E", "F", "G", "H"};

    // Create a XYChart object of size 450 x 400 pixels
    XYChart *c = new XYChart(450, 400);

    // Set the plotarea at (50, 30) and of size 380 x 340 pixels, with transparent background and
    // border and light grey (0xcccccc) horizontal grid lines
    c->setPlotArea(50, 30, 380, 340, Chart::Transparent, -1, Chart::Transparent, 0xcccccc);

    // Add a title box using grey (0x555555) 18pt Arial font
    TextBox *title = c->addTitle("     Pattern Recognition Accuracy", "arial.ttf", 18, 0x555555);

    // Set the x and y axis stems to transparent and the label font to 12pt Arial
    c->xAxis()->setColors(Chart::Transparent);
    c->yAxis()->setColors(Chart::Transparent);
    c->xAxis()->setLabelStyle("arial.ttf", 12);
    c->yAxis()->setLabelStyle("arial.ttf", 12);

    // Set the labels on the x axis
    c->xAxis()->setLabels(StringArray(labels, (int)(sizeof(labels) / sizeof(labels[0]))));

    // For the automatic y-axis labels, set the minimum spacing to 30 pixels.
    c->yAxis()->setTickDensity(30);

    // Add a box whisker layer using light blue (0x99ccee) for the fill color and blue (0x6688aa)
    // for the whisker color. Set line width to 2 pixels. Use rounded corners and bar lighting
    // effect.
    BoxWhiskerLayer *b = c->addBoxWhiskerLayer(DoubleArray(Q3Data, (int)(sizeof(Q3Data) / sizeof(
        Q3Data[0]))), DoubleArray(Q1Data, (int)(sizeof(Q1Data) / sizeof(Q1Data[0]))), DoubleArray(
        Q4Data, (int)(sizeof(Q4Data) / sizeof(Q4Data[0]))), DoubleArray(Q0Data, (int)(sizeof(Q0Data)
         / sizeof(Q0Data[0]))), DoubleArray(Q2Data, (int)(sizeof(Q2Data) / sizeof(Q2Data[0]))),
        0x99ccee, 0x6688aa);
    b->setLineWidth(2);
    b->setRoundedCorners();
    b->setBorderColor(Chart::Transparent, Chart::barLighting());

    // Adjust the plot area to fit under the title with 10-pixel margin on the other three sides.
    c->packPlotArea(10, title->getHeight(), c->getWidth() - 10, c->getHeight() - 10);

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

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

想要購買ChartDirector正版授權，或者獲取更多該產品相關信息的朋友可以點擊" "~

海量產品正在參加年終大促，價格優惠！詳情請點擊" 年終巔峰鉅惠 "~