चार्ट की स्टाइल

Earth Engine कोड एडिटर में ui.Chart मॉड्यूल से जनरेट किए गए चार्ट को .setOptions() तरीके का इस्तेमाल करके स्टाइल किया जा सकता है. यह तरीका, कॉन्फ़िगरेशन के विकल्पों के क्लाइंट-साइड JavaScript ऑब्जेक्ट को इनपुट के तौर पर लेता है. हर चार्ट टाइप के लिए कॉन्फ़िगरेशन के विकल्प, Google Charts के दस्तावेज़ में दिए गए हैं. ये विकल्प, कॉन्फ़िगरेशन के विकल्प सेक्शन में मौजूद होते हैं. उदाहरण के लिए: लाइन चार्ट.

कॉन्फ़िगरेशन के विकल्पों का उदाहरण

यहां, 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 ऑब्जेक्ट दिए गए हैं. इनमें सवाल के जवाब के लिए, सिर्फ़ काम के कॉन्फ़िगरेशन विकल्प बताए गए हैं. ज़रूरत के हिसाब से ऑब्जेक्ट में और विकल्प जोड़ें और नतीजे को ee.Chart के .setOptions() तरीके में पास करें.

चार्ट का टाइटल सेट किया जा सकता है?

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

चार्ट के ऐक्सिस को ज़ूम और पैन किया जा सकता है?

Google चार्ट के अलग-अलग टाइप के लिए explorer विकल्प देखें. इनका इस्तेमाल करने पर, दोनों ऐक्सिस पर ज़ूम और पैन किया जा सकता है.

{
  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-ऐक्सिस की शून्य वैल्यू इंटरपोलेशन करें?

अगर लाइन चार्ट में 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,
    }
  }
}