עיצוב התרשים

אפשר לשנות את הסגנון של תרשימים שנוצרו על ידי המודול ui.Chart בכלי לעריכת קוד ב-Earth Engine באמצעות השיטה .setOptions(). השיטה מקבלת כקלט אובייקט JavaScript של אפשרויות תצורה בצד הלקוח. אפשרויות ההגדרה של כל סוג תרשים מפורטות במסמכי העזרה של Google Charts, בקטע Configuration Options (אפשרויות הגדרה). לדוגמה: Line Chart (תרשים קו).

דוגמה לאפשרויות הגדרה אישיות

כאן חל סגנון תרשים בהתאמה אישית על הדוגמה 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 שמגדירים רק את אפשרויות ההגדרה הרלוונטיות כדי לענות על השאלה. מוסיפים אפשרויות נוספות לאובייקט לפי הצורך ומעבירים את התוצאה ל-method‏ .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 Chart. הפקודה הבאה תאפשר שינוי מרחק התצוגה (zoom) ותנועה בכיוונים השונים בשני הצירים.

{
  explorer: {}
}

הגבלת ההזזה והמרחק מהתצוגה לציר אחד:

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

הערה: הכלי פועל רק עם צירים רציפים (כמו מספרים או תאריכים).

set point symbol opacity?

{
  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
}

set chart background color?

{
  chartArea: {backgroundColor: 'EBEBEB'}
}

set chart grid line color?

{
  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
  }
}

אינטרפולציה של ערכי null בציר ה-Y?

ערכים חסרים או ערכים null בציר ה-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,
    }
  }
}