ui.Chart.image モジュールには、Image オブジェクトをリージョン別に減らし、結果からグラフをレンダリングするための一連の関数が含まれています。関数を選択すると、グラフ内のデータの配置（X 軸と Y 軸の値を定義するもの、シリーズを定義するもの）が決まります。次の関数の説明と例を使用して、目的に最適な関数とグラフタイプを決定します。
グラフ関数
次のプロット図を視覚的なガイドとして使用して、各関数が画像領域の縮小結果をグラフに配置する方法（x 値、y 値、シリーズを定義する要素）を理解します。
削減領域は X 軸に沿ってプロットされ、選択した特徴プロパティの値でラベル付けされます。シリーズはバンド名で定義され、リージョンの縮小結果が Y 軸にプロットされます。
帯は X 軸に沿ってプロットされます。シリーズは、特徴プロパティの値でラベル付けされます。各シリーズ対象物のジオメトリで定義された領域の縮小率が Y 軸にプロットされます。
データ帯は X 軸に沿ってプロットされます。シリーズは、クラス帯内の一意の値で表されます。Y 軸の位置は、各シリーズを構成するピクセルの領域縮小結果によって定義されます。
選択したバンドの値の頻度ヒストグラム。
- X 軸: 選択したバンドの値のヒストグラム バケット
- Y 軸: 各ヒストグラム バケットに該当するピクセルの頻度
データの例
次の例では、画像データを削減する領域を定義する 3 つのエコリージョン フィーチャで構成される FeatureCollection を使用します。Image データは PRISM 気候標準値です。バンドは月ごとの気候変数を表します（例:7 月の降水量または 1 月の平均気温。このアセットの作成方法
ui.Chart.image.byRegion
縦棒グラフ
この例では、月平均気温を表す画像バンドが、3 つのエコリージョンのそれぞれと交差するピクセルの平均に減らされます。結果は、エコリージョンごとに月ごとの列としてプロットされます。列の高さは、それぞれの月平均気温を示します。
コードエディタ（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' オプションの使用方法を示しています。
絶対
絶対積み上げ横棒グラフは、数値変数の合計を、貢献しているカテゴリ変数系列の増分と関連付けます。たとえば、この例では、総降水量がエコリージョンごとに 1 年間の月ごとの降水量の累積としてプロットされています。月ごとの降水量の合計は、画像バンドから導出されます。各バンドは、特定の月の平均降水量のグリッドを表し、3 つのエコリージョンのそれぞれと交差するピクセルの平均に減らされます。結果を絶対値としてフォーマットするには、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 月の平均気温が、標高の関数としてプロットされています。DEM は、ジオメトリと標高プロパティを持つ FeatureCollection を返す sample 関数を使用してサンプリングされます。生成された 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 内の 3 つのエコリージョンについて、6 月の平均気温と降水量がプロットされています。結果は、画像の領域の縮小から得られます。各バンドは、月ごとの降水量と気温を記述する気候の標準のグリッドです。6 月の気温と降水量を表すバンドはサブセットです。降水量と気温は単位が異なるため、series オプションと vAxes オプションを設定して2 つの Y 軸を使用します。series.targetAxisIndex オプションを使用して、右側と左側の Y 軸にプロットする変数を定義していることに注意してください。シリーズ固有の記号（点と列）を使用すると、2 つの変数を単位が異なるものとして簡単に区別できます。
コードエディタ（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 軸に沿ったバンド名のラベルと順序を制御できます。次のグラフでは、このオプションを使用して、帯の名前を月ラベルとして設定し、月平均降水量を時系列で並べ替えています。
縦棒グラフ
このグラフは、3 つのエコリージョンの月ごとの平均総降水量を示しています。結果は、画像の領域の縮小から得られます。各バンドは、特定の月の平均総降水量のグリッドです。帯は X 軸に沿ってプロットされ、リージョンがシリーズを定義します。x 軸のカスタム配置用の xLabels グラフ オプションと ticks グラフ オプションの入力を定義するために使用されるクライアントサイド オペレーションに注意してください。setOptions 関数に渡されるオプションはクライアントサイド オブジェクトである必要があるため、クライアント オペレーションが必要です（違いについては、クライアントとサーバーをご覧ください）。棒グラフに変換するには、.setChartType() 入力として 'BarChart' を使用します。
コードエディタ（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 関数は、「クラスバンド」の分類された領域内のピクセルのバンド値統計をプロットします。この例では、3 つのエコリージョンのスペクトル プロファイルを表示するために使用されています。エコリージョンの特徴はラスター化され、バンドとして 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
米国ユタ州ソルトレイクシティ周辺の領域内のピクセル値のヒストグラムが、3 つの 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);