本頁面由 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`

柱狀圖

在這個範例中，代表每月平均溫度的圖像頻帶會縮減為三個生態區交會點的像素平均值。結果會以每月為單位，依生態區塊繪製成資料欄，其中資料欄高度代表各個月份的平均溫度。

程式碼編輯器 (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'，即可將結果格式化為絕對值。

程式碼編輯器 (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 參數引數。系列是由輸入的氣候標準圖像中選取的頻帶定義。

程式碼編輯器 (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 軸。系列專屬符號 (點和欄) 可用於更輕鬆地區分兩個變數的不同單位。

程式碼編輯器 (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() 輸入內容。

程式碼編輯器 (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
                });

圓餅圖

每月平均降雨量會以森林生態區域的平均年降雨量百分比顯示。代表每月降雨量的圖像頻帶是從氣候標準資料集擷取的子集，並縮減為與生態區交會的像素平均值。

程式碼編輯器 (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'，以便平滑線條。

程式碼編輯器 (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 地表反射率頻帶，顯示美國猶他州鹽湖城周圍區域內的像素值直方圖。

程式碼編輯器 (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

柱狀圖

程式碼編輯器 (JavaScript)

長條圖

堆疊柱狀圖

絕對值

程式碼編輯器 (JavaScript)

相對時間

散佈圖

程式碼編輯器 (JavaScript)

組合圖

程式碼編輯器 (JavaScript)

ui.Chart.image.regions

設定範例

柱狀圖

程式碼編輯器 (JavaScript)

折線圖

面積圖

圓餅圖

程式碼編輯器 (JavaScript)

圓環圖

ui.Chart.image.byClass

折線圖

程式碼編輯器 (JavaScript)

ui.Chart.image.histogram

程式碼編輯器 (JavaScript)

圖片圖表

`ui.Chart.image.byRegion`

`ui.Chart.image.regions`

`ui.Chart.image.byClass`

`ui.Chart.image.histogram`