二維的地面天氣圖十分常見，而作為非專業人士，你是否會被那些彎彎曲曲的等高線圖形繞暈？今天就跟大家展示如何用Web圖表控件ChartDirector繪制三維地面天氣圖，保證讓你耳目一新。

三維地面天氣圖效果：

主要步驟：

• 首先用SurfaceChart.SurfaceChart創建一個SurfaceChart對象
• 用ThreeDChart.setPlotRegion指定繪圖區域的位置和大小
• SurfaceChart.setData設置圖表的數據
• 用SurfaceChart.setInterpolation插入新數據
• ThreeDChart.setColorAxis設置顏色軸的位置
• 用BaseChart.addTitle 和 Axis.setTitle分別為圖表和軸添加標題
• 最后用BaseChart.makeChart生成圖表就OK了！

ChartDirector繪制三維地面天氣圖示例代碼：

#include "chartdir.h"
#include <math.h>

int main(int argc, char *argv[])
{
    // The x and y coordinates of the grid
    double dataX[] = {-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6,
        7, 8, 9, 10};
    double dataY[] = {-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6,
        7, 8, 9, 10};

    // The values at the grid points. In this example, we will compute the values
    // using the formula z = x * sin(y) + y * sin(x).
    double dataZ[(int)(sizeof(dataX) / sizeof(dataX[0])) * (int)(sizeof(dataY) /
        sizeof(dataY[0]))];
    int yIndex;
    for(yIndex = 0; yIndex < (int)(sizeof(dataY) / sizeof(dataY[0])); ++yIndex) {
        double y = dataY[yIndex];
        int xIndex;
        for(xIndex = 0; xIndex < (int)(sizeof(dataX) / sizeof(dataX[0])); ++xIndex) {
            double x = dataX[xIndex];
            dataZ[yIndex * (int)(sizeof(dataX) / sizeof(dataX[0])) + xIndex] = x *
                sin(y) + y * sin(x);
        }
    }

    // Create a SurfaceChart object of size 720 x 600 pixels
    SurfaceChart *c = new SurfaceChart(720, 600);

    // Add a title to the chart using 20 points Times New Roman Italic font
    c->addTitle("Surface Energy Density   ", "timesi.ttf", 20);

    // Set the center of the plot region at (350, 280), and set width x depth x
    // height to 360 x 360 x 270 pixels
    c->setPlotRegion(350, 280, 360, 360, 270);

    // Set the data to use to plot the chart
    c->setData(DoubleArray(dataX, (int)(sizeof(dataX) / sizeof(dataX[0]))),
        DoubleArray(dataY, (int)(sizeof(dataY) / sizeof(dataY[0]))), DoubleArray(
        dataZ, (int)(sizeof(dataZ) / sizeof(dataZ[0]))));

    // Spline interpolate data to a 80 x 80 grid for a smooth surface
    c->setInterpolation(80, 80);

    // Add a color axis (the legend) in which the left center is anchored at (645,
    // 270). Set the length to 200 pixels and the labels on the right side.
    c->setColorAxis(645, 270, Chart::Left, 200, Chart::Right);

    // Set the x, y and z axis titles using 10 points Arial Bold font
    c->xAxis()->setTitle("X (nm)", "arialbd.ttf", 10);
    c->yAxis()->setTitle("Y (nm)", "arialbd.ttf", 10);
    c->zAxis()->setTitle("Energy Density (J/m<*font,super*>2<*/font*>)",
        "arialbd.ttf", 10);

    // Output the chart
    c->makeChart("surface.jpg");

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

除此之外，你還可以用ChartDirector的這種圖表樣式繪制海面天氣圖、地面氣壓圖等，應用范圍非常廣泛。