世俱杯 2025

二维的地面天气图十分常见，而作为非专业人士，你是否会被那些弯弯曲曲的等高线图形绕晕？今天就跟大家展示如何用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的这种图表样式绘制海面天气图、地面气压图等，应用范围非常广泛。