此页面由 Cloud Translation API 翻译。

图片图表

ui.Chart.image 模块包含一组用于按地区缩减 Image 对象并根据结果渲染图表的函数。所选函数决定了图表中数据的排列方式，即决定了 x 轴和 y 轴值以及系列的定义。请参考以下函数说明和示例，确定最适合您用途的函数和图表类型。

图表函数

请参考以下图表，以直观的方式了解每个函数如何在图表中排列图片区域缩减结果；即，哪些元素定义了 x 值、y 值和系列。

ui.Chart.image.byRegion

缩减区域会沿 x 轴绘制，并标注所选地图项属性的值。系列由频段名称定义，其地区缩减结果会沿 y 轴绘制。

ui.Chart.image.regions

频段沿 x 轴绘制。系列的标签由地图项属性的值决定。由相应系列地图项的几何图形定义的区域的缩减量会沿着 y 轴绘制出来。

ui.Chart.image.byClass

数据带沿 x 轴绘制。系列由类别波段中的唯一值表示。Y 轴位置由组成每个系列的像素的区域缩减结果定义。

ui.Chart.image.histogram

所选频段值的频率直方图。

X 轴：所选波段值的直方图分桶
Y 轴：符合每个直方图分桶条件的像素的频率

示例数据

以下示例依赖于由三个生态区域地图项组成的 FeatureCollection，这些地图项用于定义要缩减图片数据的区域。Image 数据是 PRISM 气候常规数据，其中各个波段描述的是每月气候变量；例如，7 月降水量或 1 月平均气温。了解此素材资源的制作方式。

`ui.Chart.image.byRegion`

柱形图

在此示例中，表示月平均温度的图像波段会缩减为三个生态区域中每个交叉像素的平均值。结果按生态区绘制为每月柱状图，其中柱状图的高度表示相应的月平均温度。

Code Editor (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Load PRISM climate normals image collection; convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define the chart and print it to the console.
var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select('[0-9][0-9]_tmean'),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          xProperty: 'label'
        })
        .setSeriesNames([
          'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
          'Nov', 'Dec'
        ])
        .setChartType('ColumnChart')
        .setOptions({
          title: 'Average Monthly Temperature by Ecoregion',
          hAxis:
              {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}},
          vAxis: {
            title: 'Temperature (°C)',
            titleTextStyle: {italic: false, bold: true}
          },
          colors: [
            '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07',
            'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969'
          ]
        });
print(chart);

条形图

通过将 .setChartType() 输入从 'ColumnChart' 更改为 'BarChart'，您可以将上一个柱形图渲染为条形图。

var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select('[0-9][0-9]_tmean'),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          xProperty: 'label'
        })
        .setSeriesNames([
          'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
          'Nov', 'Dec'
        ])
        .setChartType('BarChart')
        .setOptions({
          title: 'Average Monthly Temperature by Ecoregion',
          hAxis: {
            title: 'Temperature (°C)',
            titleTextStyle: {italic: false, bold: true}
          },
          vAxis:
              {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}},
          colors: [
            '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07',
            'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969'
          ]
        });

堆叠柱形图

isStacked 图表选项用于指定图表列是否堆叠。系统提供了多种选项来实现堆叠。以下示例演示了如何使用 'absolute' 和 'relative' 选项。

绝对

绝对堆叠条形图会按贡献分类变量系列的增量来关联数值变量的总和。例如，在此示例中，降水总量按生态区绘制为一年内月降水量的累计值。每月降水总量是根据图像波段派生得出的，其中每个波段代表给定月份平均降水总量的网格，并化简为与三个生态区域相交的像素的平均值。将 isStacked 图表选项设置为 'absolute'，以将结果格式化为绝对值。

Code Editor (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Load PRISM climate normals image collection; convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define the chart and print it to the console.
var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select('[0-9][0-9]_ppt'),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          xProperty: 'label'
        })
        .setSeriesNames([
          'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
          'Nov', 'Dec'
        ])
        .setChartType('ColumnChart')
        .setOptions({
          title: 'Average Monthly Precipitation by Ecoregion',
          hAxis:
              {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}},
          vAxis: {
            title: 'Precipitation (mm)',
            titleTextStyle: {italic: false, bold: true}
          },
          colors: [
            '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07',
            'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969'
          ],
          isStacked: 'absolute'
        });
print(chart);

相对

将上一个绝对堆叠条形图转换为相对堆叠条形图，方法是将 isStacked 图表选项从 'absolute' 更改为 'relative'。相对堆叠条形图用于显示贡献分类变量系列的比例与数值变量的总和之间的关系。例如，在此示例中，按生态区划将月降雨量绘制为占年降雨量总和的百分比。

var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select('[0-9][0-9]_ppt'),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          xProperty: 'label'
        })
        .setSeriesNames([
          'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct',
          'Nov', 'Dec'
        ])
        .setChartType('ColumnChart')
        .setOptions({
          title: 'Average Monthly Precipitation by Ecoregion',
          hAxis:
              {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}},
          vAxis: {
            title: 'Precipitation (mm)',
            titleTextStyle: {italic: false, bold: true}
          },
          colors: [
            '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07',
            'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969'
          ],
          isStacked: 'relative'
        });

散点图

科罗拉多州随机抽取的几个地点的 1 月和 7 月平均温度随海拔高度的变化情况。系统使用 sample 函数对 DEM 进行采样，该函数会返回具有几何图形和海拔属性的 FeatureCollection。然后，生成的 FeatureCollection 将用作 ui.Chart.image.byRegion 函数的 regions 参数的参数。系列由输入气候正常值图像的选定波段定义。

Code Editor (JavaScript)

// Load SRTM elevation data.
var elev = ee.Image('CGIAR/SRTM90_V4').select('elevation');

// Subset Colorado from the TIGER States feature collection.
var colorado = ee.FeatureCollection('TIGER/2018/States')
                   .filter(ee.Filter.eq('NAME', 'Colorado'));

// Draw a random sample of elevation points from within Colorado.
var samp = elev.sample(
    {region: colorado, scale: 30, numPixels: 500, geometries: true});

// Load PRISM climate normals image collection; convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define the chart and print it to the console.
var chart = ui.Chart.image
                .byRegion({
                  image: normClim.select(['01_tmean', '07_tmean']),
                  regions: samp,
                  reducer: ee.Reducer.mean(),
                  scale: 500,
                  xProperty: 'elevation'
                })
                .setSeriesNames(['Jan', 'Jul'])
                .setChartType('ScatterChart')
                .setOptions({
                  title: 'Average Monthly Colorado Temperature by Elevation',
                  hAxis: {
                    title: 'Elevation (m)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  vAxis: {
                    title: 'Temperature (°C)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  pointSize: 4,
                  dataOpacity: 0.6,
                  colors: ['1d6b99', 'cf513e'],
                });
print(chart);

组合图表

对于 ee.FeatureCollection 中的三个生态区，系统会绘制 6 月的平均温度和降水量。这些结果是通过对图像进行区域缩减得出的，其中每个波段都是一个气候正常值网格，用于描述每月降水量和温度；代表 6 月温度和降水量的波段是子集。由于降水量和温度采用不同的单位，因此需要设置 series 和 vAxes 选项来使用两个 y 轴。请注意，使用 series.targetAxisIndex 选项可定义将哪个变量绘制到右侧和左侧的 y 轴。系列专用符号（圆点和柱形）用于更轻松地区分两个变量是否具有不同的单位。

Code Editor (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Load PRISM climate normals image collection; convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define the chart and print it to the console.
var chart =
    ui.Chart.image
        .byRegion({
          image: normClim.select(['06_tmean', '06_ppt']),
          regions: ecoregions,
          reducer: ee.Reducer.mean(),
          scale: 500,
          xProperty: 'label'
        })
        .setSeriesNames(['Precipitation', 'Temperature'])
        .setChartType('ColumnChart')
        .setOptions({
          title: 'Average June Temperature and Precipitation by Ecoregion',
          series: {
            0: {targetAxisIndex: 1, type: 'bar', color: '1d6b99'},
            1: {
              targetAxisIndex: 0,
              type: 'line',
              lineWidth: 0,
              pointSize: 10,
              color: 'e37d05'
            }
          },
          hAxis:
              {title: 'Ecoregion', titleTextStyle: {italic: false, bold: true}},
          vAxes: {
            0: {
              title: 'Temperature (°C)',
              baseline: 0,
              titleTextStyle: {italic: false, bold: true, color: 'e37d05'}
            },
            1: {
              title: 'Precipitation (mm)',
              titleTextStyle: {italic: false, bold: true, color: '1d6b99'}
            },
          },
          bar: {groupWidth: '40%'},
        });
print(chart);

`ui.Chart.image.regions`

示例设置

ui.Chart.image.regions 函数接受一个列表，您可以通过为乐队名称分配数值来控制 x 轴上乐队名称的标签和顺序。以下图表使用此选项将频段名称设置为月份标签，并按时间顺序对每月平均降水量进行排序。

柱形图

此图表显示了三个生态区的每月平均降水量总和。这些结果是通过对图像进行区域缩减得出的，其中每个波段都是给定月份平均降水总量的网格。带会沿 x 轴绘制，而区域用于定义系列。请注意，用于为 xLabels 和 ticks 图表选项定义 x 轴自定义排列的输入的客户端操作；由于向 setOptions 函数提供的选项必须是客户端对象，因此需要执行客户端操作（如需了解区别，请参阅客户端与服务器）。如需转换为条形图，请使用 'BarChart' 作为 .setChartType() 输入。

Code Editor (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Load PRISM climate normals image collection, convert images to bands, and
// subset precipitation bands.
var precip = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m')
                 .toBands()
                 .select('[0-9][0-9]_ppt');

// Define a dictionary that associates band names with values and labels.
var precipInfo = {
  '01_ppt': {v: 1, f: 'Jan'},
  '02_ppt': {v: 2, f: 'Feb'},
  '03_ppt': {v: 3, f: 'Mar'},
  '04_ppt': {v: 4, f: 'Apr'},
  '05_ppt': {v: 5, f: 'May'},
  '06_ppt': {v: 6, f: 'Jun'},
  '07_ppt': {v: 7, f: 'Jul'},
  '08_ppt': {v: 8, f: 'Aug'},
  '09_ppt': {v: 9, f: 'Sep'},
  '10_ppt': {v: 10, f: 'Oct'},
  '11_ppt': {v: 11, f: 'Nov'},
  '12_ppt': {v: 12, f: 'Dec'}
};

// Organize precipitation information into objects for defining x values and
// their tick labels. Note that chart options provided to the .setOptions()
// function must be client-side objects, which is why a client-side for
// loop is used to iteratively populate lists from the above dictionary.
var xPropVals = [];    // List to codify x-axis band names as values.
var xPropLabels = [];  // Holds dictionaries that label codified x-axis values.
for (var key in precipInfo) {
  xPropVals.push(precipInfo[key].v);
  xPropLabels.push(precipInfo[key]);
}

// Define the chart and print it to the console.
var chart = ui.Chart.image
                .regions({
                  image: precip,
                  regions: ecoregions,
                  reducer: ee.Reducer.mean(),
                  scale: 5e3,
                  seriesProperty: 'label',
                  xLabels: xPropVals
                })
                .setChartType('ColumnChart')
                .setOptions({
                  title: 'Average Ecoregion Precipitation by Month',
                  hAxis: {
                    title: 'Month',
                    titleTextStyle: {italic: false, bold: true},
                    ticks: xPropLabels
                  },
                  vAxis: {
                    title: 'Precipitation (mm)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['f0af07', '0f8755', '76b349'],
                });
print(chart);

折线图

通过将 .setChartType() 输入从 'ColumnChart' 更改为 'LineChart'，您可以将上一个柱形图渲染为折线图。

var chart = ui.Chart.image
                .regions({
                  image: precip,
                  regions: ecoregions,
                  reducer: ee.Reducer.mean(),
                  scale: 500,
                  seriesProperty: 'label',
                  xLabels: xPropVals
                })
                .setChartType('LineChart')
                .setOptions({
                  title: 'Average Ecoregion Precipitation by Month',
                  hAxis: {
                    title: 'Month',
                    titleTextStyle: {italic: false, bold: true},
                    ticks: xPropLabels
                  },
                  vAxis: {
                    title: 'Precipitation (mm)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['f0af07', '0f8755', '76b349'],
                  lineSize: 5
                });

面积图

通过将 .setChartType() 输入从 'ColumnChart' 更改为 'AreaChart'，您可以将上图中的柱形图渲染为面积图。

var chart = ui.Chart.image
                .regions({
                  image: precip,
                  regions: ecoregions,
                  reducer: ee.Reducer.mean(),
                  scale: 500,
                  seriesProperty: 'label',
                  xLabels: xPropVals
                })
                .setChartType('AreaChart')
                .setOptions({
                  title: 'Average Ecoregion Precipitation by Month',
                  hAxis: {
                    title: 'Month',
                    titleTextStyle: {italic: false, bold: true},
                    ticks: xPropLabels
                  },
                  vAxis: {
                    title: 'Precipitation (mm)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['f0af07', '0f8755', '76b349'],
                  lineSize: 5
                });

饼图

每月平均降水量以森林生态区的平均年降水量总和的百分比显示。代表月降水量的图像波段是从气候正常值数据集中提取的子集，并化简为与生态区相交的像素的平均值。

Code Editor (JavaScript)

// Import the example feature collection, subset the forest ecoregion.
var forest = ee.FeatureCollection('projects/google/charts_feature_example')
                 .filter(ee.Filter.eq('label', 'Forest'));

// Load PRISM climate normals image collection, convert images to bands.
var normClim = ee.ImageCollection('OREGONSTATE/PRISM/Norm81m').toBands();

// Define x-axis labels to replace default band names.
var monthNames = [
  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov',
  'Dec'
];

// Define the chart and print it to the console.
var chart = ui.Chart.image
                .regions({
                  image: normClim.select('[0-9][0-9]_ppt'),
                  regions: forest,
                  reducer: ee.Reducer.mean(),
                  scale: 5e3,
                  seriesProperty: 'label',
                  xLabels: monthNames
                })
                .setChartType('PieChart')
                .setOptions({
                  title: 'Average Monthly Precipitation for Forest Ecoregion',
                  colors: [
                    '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07',
                    'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969'
                  ]
                });
print(chart);

圆环图

通过设置 pieHole 图表选项，将饼图示例转换为甜甜圈图。尝试将 0.4 和 0.6 用作初始值。

var chart = ui.Chart.image
                .regions({
                  image: normClim.select('[0-9][0-9]_ppt'),
                  regions: forest,
                  reducer: ee.Reducer.mean(),
                  scale: 5e3,
                  seriesProperty: 'label',
                  xLabels: monthNames
                })
                .setChartType('PieChart')
                .setOptions({
                  title: 'Average Monthly Precipitation for Forest Ecoregion',
                  colors: [
                    '604791', '1d6b99', '39a8a7', '0f8755', '76b349', 'f0af07',
                    'e37d05', 'cf513e', '96356f', '724173', '9c4f97', '696969'
                  ],
                  pieHole: 0.4
                });

`ui.Chart.image.byClass`

折线图

ui.Chart.image.byClass 函数用于绘制“类别带”分类区域内像素的带值统计信息。在此示例中，它用于显示三个生态区的光谱图谱。生态区地图项会被栅格化，并作为波段添加到 MODIS 地表反射率 (SR) 图像中。对于每个生态区类别和反射率波段，系统都会计算相应的像素均值，并将其绘制到 y 轴。MODIS SR 波段的中心波长定义了 x 轴刻度和标签。请注意，curveType 折线图选项已设置为 'function'，以使线条平滑。

Code Editor (JavaScript)

// Import the example feature collection.
var ecoregions = ee.FeatureCollection('projects/google/charts_feature_example');

// Convert ecoregion feature collection to a classified image.
var regionsBand =
    ecoregions
        .reduceToImage({properties: ['value'], reducer: ee.Reducer.first()})
        .rename('class');

// Define a MODIS surface reflectance composite.
var modisSr = ee.ImageCollection('MODIS/006/MOD09A1')
                  .filter(ee.Filter.date('2018-06-01', '2018-09-01'))
                  .select('sur_refl_b0[0-7]')
                  .mean();

// Reorder reflectance bands by ascending wavelength and
// add the classified ecoregions image as a band to the SR collection and
var modisSrClass = modisSr.select([2, 3, 0, 1, 4, 5, 6]).addBands(regionsBand);

// Define a list of MODIS SR wavelengths for x-axis labels.
var wavelengths = [469, 555, 655, 858, 1240, 1640, 2130];

// Define the chart and print it to the console.
var chart = ui.Chart.image
                .byClass({
                  image: modisSrClass,
                  classBand: 'class',
                  region: ecoregions,
                  reducer: ee.Reducer.mean(),
                  scale: 500,
                  classLabels: ['Desert', 'Forest', 'Grassland'],
                  xLabels: wavelengths
                })
                .setChartType('ScatterChart')
                .setOptions({
                  title: 'Ecoregion Spectral Signatures',
                  hAxis: {
                    title: 'Wavelength (nm)',
                    titleTextStyle: {italic: false, bold: true},
                    viewWindow: {min: wavelengths[0], max: wavelengths[6]}
                  },
                  vAxis: {
                    title: 'Reflectance (x1e4)',
                    titleTextStyle: {italic: false, bold: true}
                  },
                  colors: ['f0af07', '0f8755', '76b349'],
                  pointSize: 0,
                  lineSize: 5,
                  curveType: 'function'
                });
print(chart);

`ui.Chart.image.histogram`

显示了美国犹他州盐湖城周围区域内三个 MODIS 地表反射率波段的像素值直方图。

Code Editor (JavaScript)

// Define a MODIS surface reflectance composite.
var modisSr = ee.ImageCollection('MODIS/006/MOD09A1')
                  .filter(ee.Filter.date('2018-06-01', '2018-09-01'))
                  .select(['sur_refl_b01', 'sur_refl_b02', 'sur_refl_b06'])
                  .mean();

// Define a region to calculate histogram for.
var histRegion = ee.Geometry.Rectangle([-112.60, 40.60, -111.18, 41.22]);

// Define the chart and print it to the console.
var chart =
    ui.Chart.image.histogram({image: modisSr, region: histRegion, scale: 500})
        .setSeriesNames(['Red', 'NIR', 'SWIR'])
        .setOptions({
          title: 'MODIS SR Reflectance Histogram',
          hAxis: {
            title: 'Reflectance (x1e4)',
            titleTextStyle: {italic: false, bold: true},
          },
          vAxis:
              {title: 'Count', titleTextStyle: {italic: false, bold: true}},
          colors: ['cf513e', '1d6b99', 'f0af07']
        });
print(chart);

图片图表 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

图表函数

示例数据

ui.Chart.image.byRegion

柱形图

Code Editor (JavaScript)

条形图

堆叠柱形图

绝对

Code Editor (JavaScript)

相对

散点图

Code Editor (JavaScript)

组合图表

Code Editor (JavaScript)

ui.Chart.image.regions

示例设置

柱形图

Code Editor (JavaScript)

折线图

面积图

饼图

Code Editor (JavaScript)

圆环图

ui.Chart.image.byClass

折线图

Code Editor (JavaScript)

ui.Chart.image.histogram

Code Editor (JavaScript)

图片图表

`ui.Chart.image.byRegion`

`ui.Chart.image.regions`

`ui.Chart.image.byClass`

`ui.Chart.image.histogram`