تصميم الرسم البياني

يمكن تصميم الرسوم البيانية التي تنتجها وحدة ui.Chart في "محرر الرموز البرمجية" في Earth Engine باستخدام طريقة .setOptions(). تأخذ الطريقة كائن JavaScript من جهة العميل لخيارات الضبط كإدخال. يتم توفير خيارات الضبط لكل نوع من أنواع الرسوم البيانية في مستندات "رسومات 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);

ملاحظة: يؤدي ضبط خصائص السلسلة الفردية إلى إلغاء الخصائص ذات المستوى الأعلى.

كيف يمكنني...

تقدّم الأمثلة التالية عناصر JavaScript تحدّد فقط خيارات الضبط ذات الصلة للإجابة عن السؤال. أضِف خيارات إضافية إلى العنصر حسب الحاجة وأرسِل النتيجة إلى طريقة .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'
}

ضبط نمط النص؟

يتم تحديد خيارات تنسيق النص وفقًا لكائن JavaScript التالي:

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 في الرسم البياني الخطي إلى حدوث فواصل أسطر. استخدِم 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,
    }
  }
}