یک ظاهر طراحی شده نمودار

نمودارهای تولید شده توسط ماژول ui.Chart در ویرایشگر کد Earth Engine را می توان با استفاده از روش .setOptions() استایل بندی کرد. این روش یک شی جاوا اسکریپت سمت سرویس گیرنده از گزینه های پیکربندی را به عنوان ورودی می گیرد. گزینه های پیکربندی برای هر نوع نمودار در اسناد مربوط به نمودارهای Google در بخش تنظیمات پیکربندی ارائه شده است، به عنوان مثال: نمودار خطی .

مثال گزینه های پیکربندی

در اینجا، استایل نمودار سفارشی برای مثال ui.Chart.image.doySeries اعمال می شود. این راهنمای نحوه قالب بندی یک شی گزینه های پیکربندی و اعمال آن در ee.Chart را ارائه می دهد.

// Import the example feature collection and subset the glassland feature.
var grassland = ee.FeatureCollection('projects/google/charts_feature_example')
                    .filter(ee.Filter.eq('label', 'Grassland'));

// Load MODIS vegetation indices data and subset a decade of images.
var vegIndices = ee.ImageCollection('MODIS/006/MOD13A1')
                     .filter(ee.Filter.date('2010-01-01', '2020-01-01'))
                     .select(['NDVI', 'EVI']);

// Set chart style properties.
var chartStyle = {
  title: 'Average Vegetation Index Value by Day of Year for Grassland',
  hAxis: {
    title: 'Day of year',
    titleTextStyle: {italic: false, bold: true},
    gridlines: {color: 'FFFFFF'}
  },
  vAxis: {
    title: 'Vegetation index (x1e4)',
    titleTextStyle: {italic: false, bold: true},
    gridlines: {color: 'FFFFFF'},
    format: 'short',
    baselineColor: 'FFFFFF'
  },
  series: {
    0: {lineWidth: 3, color: 'E37D05', pointSize: 7},
    1: {lineWidth: 7, color: '1D6B99', lineDashStyle: [4, 4]}
  },
  chartArea: {backgroundColor: 'EBEBEB'}
};

// Define the chart.
var chart =
    ui.Chart.image
        .doySeries({
          imageCollection: vegIndices,
          region: grassland,
          regionReducer: ee.Reducer.mean(),
          scale: 500,
          yearReducer: ee.Reducer.mean(),
          startDay: 1,
          endDay: 365
        })
        .setSeriesNames(['EVI', 'NDVI']);

// Apply custom style properties to the chart.
chart.setOptions(chartStyle);

// Print the chart to the console.
print(chart);

توجه: تنظیم ویژگی‌های سری جداگانه، ویژگی‌های سطح بالا را لغو می‌کند.

چطوری...

مثال‌های زیر اشیاء جاوا اسکریپت را ارائه می‌کنند که فقط گزینه‌های پیکربندی مربوطه را برای پاسخ به سؤال تعریف می‌کنند. در صورت نیاز گزینه های اضافی را به شی اضافه کنید و نتیجه را به روش .setOptions() یک ee.Chart ارسال کنید.

عنوان نمودار را تنظیم کنید؟

{
  title: 'The Chart Title'
}

عنوان نمودار را پنهان کنید؟

{
  titlePosition: 'none'
}

افسانه را پنهان کنیم؟

{
  legend: {position: 'none'}
}

حدود محور را تعریف کنید؟

{
  hAxis: {  // x-axis
    viewWindow: {min: 10, max: 100}
  },
  vAxis: {  // y-axis
    viewWindow: {min: -10, max: 50}
  }
}

اندازه و رنگ نماد را تنظیم کنید؟

شما می توانید ویژگی های نماد را برای همه سری ها با استفاده از ویژگی های سطح بالا تنظیم کنید، به عنوان مثال:

{
  colors: ['blue'],
  pointSize: 10,
  lineWidth: 5,
  lineDashStyle: [4, 4],
  pointShape: 'diamond'  // 'circle', 'triangle', 'square', 'star', or 'polygon'
}

یا خصوصیات را برای سری های انتخابی تنظیم کنید:

{
  series: {
    0: {lineWidth: 3, color: 'yellow', pointSize: 7},
    2: {lineWidth: 7, color: '1D6D99', lineDashStyle: [4, 4]}
  }
}

همچنین می‌توانید با ارائه یک آرایه رنگی متناسب با طول و ترتیب سری، رنگ‌ها را برای هر سری تنظیم کنید.

{
  colors: ['blue', 'yellow', 'red']
}

سریالی را از افسانه پنهان کنیم؟

{
  series: {
    0: {visibleInLegend: false},  // hides the 1st series in the legend
    2: {visibleInLegend: false}  // hides the 3rd series in the legend
  }
}

نقاط روی نمودار خطی را نشان دهید؟

نمایش امتیاز برای همه سری ها:

{
  pointSize: 10
}

یا برای سری های فردی:

{
  series: {
    0: {pointSize: 10},  // shows size 10 points for the 1st line series
    2: {pointSize: 10}  // shows size 10 points for the 3rd line series
  }
}

خطوط روی نمودار نقطه ای را نشان دهید؟

نمایش خطوط برای همه سریال ها:

{
  lineWidth: 10
}

یا برای سری های فردی:

{
  series: {
    0: {lineWidth: 10},  // shows size 10 lines for the 1st point series
    2: {lineWidth: 10}  // shows size 10 lines for the 3rd point series
  }
}

مقیاس ورود به سیستم را به یک محور اعمال کنید؟

{
  hAxis: {logScale: true},  // x-axis
  vAxis: {logScale: true}  // y-axis
}

یک تابع هموارسازی را به یک خط اعمال کنید؟

یک تابع هموارسازی را برای هر سری خط اعمال کنید:

{
  curveType: 'function'
}

یا سری های فردی:

{
  series: {
    0: {curveType: 'function'},  // apply smoothing function to 1st line series
    2: {curveType: 'function'}  // apply smoothing function to 3rd line series
  }
}

محورهای نمودار بزرگنمایی و حرکت؟

گزینه های explorer را برای انواع نمودار Google مربوطه ببینید. موارد زیر به بزرگنمایی و حرکت در هر دو محور اجازه می دهد.

{
  explorer: {}
}

حرکت و بزرگنمایی را به یک محور محدود کنید:

{
  explorer: {axis: 'vertical'}  // or 'horizontal'
}

توجه: کاوشگر فقط با محورهای پیوسته (مانند اعداد یا تاریخ) کار می کند.

کدورت نماد نقطه تنظیم؟

{
  dataOpacity: 0.5
}

توجه: کدورت خط را نمی توان تنظیم کرد.

محورهای چرخشی؟

{
  orientation: 'vertical'  // or 'horizontal'
}

تنظیم سبک متن؟

گزینه های سبک متن با توجه به شی جاوا اسکریپت زیر مشخص می شود:

var textStyle = {
  color: 'grey',
  fontName: 'arial',
  fontSize: 14,
  bold: true,
  italic: false
}

تنظیم سبک متن محور x:

{
  hAxis: {
    textStyle: textStyle,  // tick label text style
    titleTextStyle: textStyle  // axis title text style
  }
}

تنظیم سبک متن محور y:

{
  vAxis: {
    textStyle: textStyle,  // tick label text style
    titleTextStyle: textStyle  // axis title text style
  }
}

تنظیم سبک متن افسانه:

{
  legend: {textStyle: textStyle}
}

همچنین می توانید نام و اندازه قلم را برای همه عناصر متن تنظیم کنید:

{
  fontName: 'arial',
  fontSize: 14
}

رنگ پس زمینه نمودار را تنظیم کنید؟

{
  chartArea: {backgroundColor: 'EBEBEB'}
}

رنگ خط شبکه نمودار را تنظیم کنید؟

{
  hAxis: {  // x-axis
    gridlines: {color: 'FFFFFF'}
  },
  vAxis: {  // y-axis
    gridlines: {color: 'FFFFFF'}
  }
}

خطوط شبکه حذف شود؟

{
  hAxis: {  // x-axis
    gridlines: {count: 0}
  },
  vAxis: {  // y-axis
    gridlines: {count: 0}
  }
}

فرمت برچسب های ارزش محور؟

برای فهرست کامل گزینه‌های قالب برچسب ارزش محور، این راهنما را ببینید.

{
  hAxis: {  // x-axis
    format: 'short'  // applies the 'short' format option
  },
  vAxis: {  // y-axis
    format: 'scientific'  // applies the 'scientific' format option
  }
}

مقادیر تهی محور y را درون یابی کنیم؟

از دست دادن یا تهی بودن مقادیر محور y در نمودار خطی می تواند باعث شکست خط شود. برای رسم یک خط پیوسته از interpolateNulls: true استفاده کنید.

{
  interpolateNulls: true
}

یک خط روند اضافه کنید؟

یک خط روند می تواند به طور خودکار برای نمودارهای پراکنده، میله ای، ستونی و خطی ایجاد شود. برای جزئیات کامل به این صفحه مراجعه کنید.

{
  trendlines: {
    0: {  // add a trend line to the 1st series
      type: 'linear',  // or 'polynomial', 'exponential'
      color: 'green',
      lineWidth: 5,
      opacity: 0.2,
      visibleInLegend: true,
    }
  }
}