স্টেপড এরিয়া চার্ট

  1. ওভারভিউ
  2. একটি সহজ উদাহরণ
  3. কিছু সাধারণ বিকল্প
  4. স্তুপীকৃত স্টেপড এরিয়া চার্ট
  5. লোড হচ্ছে
  6. উপাত্ত বিন্যাস
  7. কনফিগারেশন অপশন
  8. পদ্ধতি
  9. ঘটনা
  10. ডেটা নীতি

ওভারভিউ

একটি স্টেপড এরিয়া চার্ট যা ব্রাউজারের মধ্যে SVG বা VML ব্যবহার করে রেন্ডার করা হয়। ধাপের উপর ঘোরার সময় টিপস দেখায়।

একটি সহজ উদাহরণ

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Director (Year)', 'Rotten Tomatoes', 'IMDB'], ['Alfred Hitchcock (1935)', 8.4, 7.9], ['Ralph Thomas (1959)', 6.9, 6.5], ['Don Sharp (1978)', 6.5, 6.4], ['James Hawes (2008)', 4.4, 6.2] ]); var options = { title: 'The decline of \'The 39 Steps\'', vAxis: {title: 'Accumulated Rating'}, isStacked: true }; var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div')); chart.draw(data, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Director (Year)', 'Rotten Tomatoes', 'IMDB'], ['Alfred Hitchcock (1935)', 8.4, 7.9], ['Ralph Thomas (1959)', 6.9, 6.5], ['Don Sharp (1978)', 6.5, 6.4], ['James Hawes (2008)', 4.4, 6.2] ]); var options = { title: 'The decline of \'The 39 Steps\'', vAxis: {title: 'Accumulated Rating'}, isStacked: true }; var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div')); chart.draw(data, options); }
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
          ['Alfred Hitchcock (1935)', 8.4,         7.9],
          ['Ralph Thomas (1959)',     6.9,         6.5],
          ['Don Sharp (1978)',        6.5,         6.4],
          ['James Hawes (2008)',      4.4,         6.2]
        ]);

        var options = {
          title: 'The decline of \'The 39 Steps\'',
          vAxis: {title: 'Accumulated Rating'},
          isStacked: true
        };

        var chart = new google.visualization.SteppedAreaChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

কিছু সাধারণ বিকল্প

সমস্ত Google চার্টের মতো, স্টেপড এরিয়া চার্টে প্রচুর বিকল্প রয়েছে, এখানে দেখানো হয়েছে। এখানে সবচেয়ে সাধারণ কিছু প্রদর্শনের একটি উদাহরণ রয়েছে:

উপরের চার্টে, আমরা backgroundColor দিয়ে backgroundColor রঙ পরিবর্তন করেছি, legend.position দিয়ে কিংবদন্তীকে নীচে নিয়ে গিয়েছি, connectSteps কে মিথ্যাতে সেট করে উল্লম্ব রেখাগুলি সরিয়েছি এবং রঙগুলি কাস্টমাইজ করেছি। এটি কীভাবে করা হয়েছিল তা এখানে:

  var options = {
      backgroundColor: '#ddd',
      legend: { position: 'bottom' },
      connectSteps: false,
      colors: ['#4374E0', '#53A8FB', '#F1CA3A', '#E49307'],
      isStacked: true,
  };

স্তুপীকৃত স্টেপড এরিয়া চার্ট

স্টেপড এরিয়া চার্ট 100% স্ট্যাকিং সহ স্ট্যাকিং সমর্থন করে। একটি স্ট্যাকড স্টেপড এরিয়া চার্ট হল একটি স্টেপড এরিয়া চার্ট যা একে অপরের উপরে সম্পর্কিত মান রাখে। যদি কোনো নেতিবাচক মান থাকে, তাহলে সেগুলি চার্টের বেসলাইনের নিচে বিপরীত ক্রমে স্ট্যাক করা হয়। 100% স্ট্যাকিংয়ের জন্য, প্রতিটি ডোমেন-মানের উপাদানগুলির স্ট্যাকগুলিকে এমনভাবে পুনরায় স্কেল করা হয় যে তারা 100% পর্যন্ত যোগ করে। এর জন্য বিকল্পগুলি হল isStacked: 'percent' , যা প্রতিটি মানকে 100% শতাংশ হিসাবে ফর্ম্যাট করে এবং isStacked: 'relative' , যা প্রতিটি মানকে 1 এর ভগ্নাংশ হিসাবে ফর্ম্যাট করে। এছাড়াও একটি isStacked: 'absolute' বিকল্প রয়েছে, যা কার্যকরীভাবে isStacked: true ।

ডানদিকে 100% স্ট্যাক করা চার্টে দ্রষ্টব্য, টিক মানগুলি 1 এর ভগ্নাংশ হিসাবে আপেক্ষিক 0-1 স্কেলের উপর ভিত্তি করে লেখা হয়েছে।

স্তুপীকৃত
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
100% স্তুপীকৃত
        var options_fullStacked = {
          isStacked: 'relative',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

লোড হচ্ছে

google.charts.load প্যাকেজের নাম "corechart" ।

  google.charts.load("current", {packages: ["corechart"]});

ভিজ্যুয়ালাইজেশনের ক্লাসের নাম হল google.visualization.SteppedAreaChart ।

  var visualization = new google.visualization.SteppedAreaChart(container);

উপাত্ত বিন্যাস

সারি: টেবিলের প্রতিটি সারি বারগুলির একটি গ্রুপকে প্রতিনিধিত্ব করে।

কলাম:

কলাম 0 কলাম 1 ... কলাম এন
উদ্দেশ্য: X-অক্ষ গ্রুপ লেবেল এই গ্রুপে বার 1 মান ... এই গ্রুপে বার এন মান
ডেটা টাইপ: স্ট্রিং সংখ্যা ... সংখ্যা
ভূমিকা: ডোমেইন তথ্য ... তথ্য
ঐচ্ছিক কলাম ভূমিকা : ...

কনফিগারেশন অপশন

নাম
একত্রিত লক্ষ্য
কিভাবে একাধিক ডেটা নির্বাচন টুলটিপগুলিতে রোল আপ করা হয়:
  • 'category' : x-মান দ্বারা নির্বাচিত ডেটা গোষ্ঠীবদ্ধ করুন।
  • 'series' : সিরিজ অনুসারে নির্বাচিত ডেটা গ্রুপ করুন।
  • 'auto' : সমস্ত নির্বাচনের একই x-মান থাকলে এবং অন্যথায় সিরিজ অনুসারে নির্বাচিত ডেটাকে x-মান অনুসারে গোষ্ঠীবদ্ধ করুন।
  • 'none' : প্রতি নির্বাচনের জন্য শুধুমাত্র একটি টুলটিপ দেখান।
aggregationTarget প্রায়শই selectMode এবং tooltip.trigger selectionMode সাথে টেন্ডেম ব্যবহার করা হবে, যেমন:
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
প্রকার: স্ট্রিং
ডিফল্ট: 'অটো'
animation.duration

অ্যানিমেশনের সময়কাল, মিলিসেকেন্ডে। বিস্তারিত জানার জন্য, অ্যানিমেশন ডকুমেন্টেশন দেখুন।

প্রকার: সংখ্যা
ডিফল্ট: 0
animation.easing

অ্যানিমেশনে প্রয়োগ করা ইজিং ফাংশন। নিম্নলিখিত বিকল্পগুলি উপলব্ধ:

  • 'রৈখিক' - স্থির গতি।
  • 'ইন' - ইজ ইন - ধীরে শুরু করুন এবং গতি বাড়ান।
  • 'আউট' - সহজ আউট - দ্রুত শুরু করুন এবং ধীরে ধীরে করুন।
  • 'inAndOut' - সহজে প্রবেশ এবং আউট - ধীর শুরু করুন, গতি বাড়ান, তারপর ধীর করুন।
প্রকার: স্ট্রিং
ডিফল্ট: 'লিনিয়ার'
animation.startup

প্রাথমিক ড্রতে চার্ট অ্যানিমেট হবে কিনা তা নির্ধারণ করে। true হলে, চার্ট বেসলাইনে শুরু হবে এবং চূড়ান্ত অবস্থায় অ্যানিমেট হবে।

প্রকার: বুলিয়ান
ডিফল্ট মিথ্যা
এলাকার অস্বচ্ছতা

ধাপের নিচের এলাকার ডিফল্ট অস্বচ্ছতা, যেখানে 0.0 সম্পূর্ণ স্বচ্ছ এবং 1.0 সম্পূর্ণ অস্বচ্ছ। স্টেপড লাইনের অস্বচ্ছতা প্রভাবিত করে না। একটি ধাপযুক্ত লাইন চার্ট অর্জন করতে, এই মানটি 0 এ সেট করুন। একটি পৃথক সিরিজের জন্য অপাসিটি নির্দিষ্ট করতে, series বৈশিষ্ট্যে areaOpacity মান সেট করুন।

প্রকার: সংখ্যা, 0.0-1.0
ডিফল্ট: 0.3
axisTitlesPosition

চার্ট এলাকার তুলনায় কোথায় অক্ষ শিরোনাম স্থাপন করতে হবে। সমর্থিত মান:

  • in - চার্ট এলাকার ভিতরে অক্ষ শিরোনাম আঁকুন।
  • আউট - চার্ট এলাকার বাইরে অক্ষ শিরোনাম আঁকুন।
  • কোনোটিই নয় - অক্ষ শিরোনাম বাদ দিন।
প্রকার: স্ট্রিং
ডিফল্ট: 'আউট'
পেছনের রং

চার্টের প্রধান এলাকার জন্য পটভূমির রঙ। একটি সাধারণ HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' , অথবা নিম্নলিখিত বৈশিষ্ট্য সহ একটি বস্তু।

প্রকার: স্ট্রিং বা বস্তু
ডিফল্ট: 'সাদা'
backgroundColor.stroke

চার্ট সীমানার রঙ, একটি HTML রঙের স্ট্রিং হিসাবে।

প্রকার: স্ট্রিং
ডিফল্ট: '#666'
backgroundColor.strokeWidth

সীমানার প্রস্থ, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: 0
backgroundColor.fill

চার্ট ফিল কালার, একটি HTML কালার স্ট্রিং হিসেবে।

প্রকার: স্ট্রিং
ডিফল্ট: 'সাদা'
চার্ট এরিয়া

চার্ট এলাকার অবস্থান এবং আকার কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু (যেখানে অক্ষ এবং কিংবদন্তি বাদ দিয়ে চার্ট নিজেই আঁকা হয়)। দুটি বিন্যাস সমর্থিত: একটি সংখ্যা, বা একটি সংখ্যা অনুসরণ করে %৷ একটি সাধারণ সংখ্যা পিক্সেলের একটি মান; % দ্বারা অনুসরণ করা একটি সংখ্যা একটি শতাংশ। উদাহরণ: chartArea:{left:20,top:0,width:'50%',height:'75%'}

প্রকার: বস্তু
ডিফল্ট: নাল
chartArea.backgroundColor
চার্ট এলাকার পটভূমির রঙ। যখন একটি স্ট্রিং ব্যবহার করা হয়, এটি হয় একটি হেক্স স্ট্রিং (যেমন, '#fdc') বা একটি ইংরেজি রঙের নাম হতে পারে। যখন একটি বস্তু ব্যবহার করা হয়, নিম্নলিখিত বৈশিষ্ট্য প্রদান করা যেতে পারে:
  • stroke : রঙ, একটি হেক্স স্ট্রিং বা ইংরেজি রঙের নাম হিসাবে দেওয়া।
  • strokeWidth : প্রদান করা হলে, প্রদত্ত প্রস্থের চার্ট এলাকার চারপাশে একটি সীমানা আঁকে (এবং stroke রঙের সাথে)।
প্রকার: স্ট্রিং বা বস্তু
ডিফল্ট: 'সাদা'
chartArea.left

বাম সীমানা থেকে চার্টটি কতদূর আঁকতে হবে।

প্রকার: সংখ্যা বা স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
chartArea.top

উপরের বর্ডার থেকে চার্টটি কতদূর আঁকতে হবে।

প্রকার: সংখ্যা বা স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
chartArea.width

চার্ট এলাকা প্রস্থ.

প্রকার: সংখ্যা বা স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
chartArea.height

চার্ট এলাকার উচ্চতা।

প্রকার: সংখ্যা বা স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
রং

চার্ট উপাদানের জন্য ব্যবহার করা রং. স্ট্রিংগুলির একটি অ্যারে, যেখানে প্রতিটি উপাদান একটি HTML রঙের স্ট্রিং, উদাহরণস্বরূপ: colors:['red','#004411'] ।

প্রকার: স্ট্রিং এর অ্যারে
ডিফল্ট: ডিফল্ট রং
সংযোগ পদক্ষেপ

সত্যে সেট করা হলে, ধাপগুলিকে একটি ধাপযুক্ত রেখা তৈরি করতে সংযুক্ত করবে। অন্যথায়, শুধুমাত্র একটি শীর্ষ লাইন প্রদর্শিত হবে. ডিফল্ট হল ধাপগুলি সংযুক্ত করা।

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
ইন্টারঅ্যাক্টিভিটি সক্ষম করুন

চার্ট ব্যবহারকারী-ভিত্তিক ইভেন্টগুলি ছুঁড়েছে বা ব্যবহারকারীর মিথস্ক্রিয়ায় প্রতিক্রিয়া দেখায় কিনা। মিথ্যা হলে, চার্ট 'নির্বাচন' বা অন্যান্য মিথস্ক্রিয়া-ভিত্তিক ইভেন্টগুলি নিক্ষেপ করবে না (কিন্তু প্রস্তুত বা ত্রুটি ইভেন্টগুলি নিক্ষেপ করবে ), এবং ব্যবহারকারীর ইনপুটের উপর নির্ভর করে হোভারটেক্সট প্রদর্শন করবে না বা অন্যথায় পরিবর্তন করবে না।

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
ফোকাস টার্গেট

সত্তার ধরন যা মাউস হোভারে ফোকাস গ্রহণ করে। মাউস ক্লিক দ্বারা কোন সত্তা নির্বাচন করা হয়েছে এবং কোন ডেটা টেবিল উপাদান ইভেন্টের সাথে যুক্ত তাও প্রভাবিত করে। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • 'ডেটাম' - একটি একক ডেটা পয়েন্টে ফোকাস করুন। ডেটা টেবিলের একটি কক্ষের সাথে সম্পর্কযুক্ত।
  • 'শ্রেণি' - প্রধান অক্ষ বরাবর সমস্ত ডেটা পয়েন্টের একটি গ্রুপিংয়ের উপর ফোকাস করুন। ডেটা টেবিলের একটি সারির সাথে সম্পর্কযুক্ত।

ফোকাস টার্গেট 'বিভাগে' টুলটিপ সমস্ত বিভাগের মান প্রদর্শন করে। এটি বিভিন্ন সিরিজের মান তুলনা করার জন্য দরকারী হতে পারে।

প্রকার: স্ট্রিং
ডিফল্ট: 'ডেটাম'
অক্ষরের আকার

চার্টের সমস্ত পাঠ্যের ডিফল্ট ফন্টের আকার, পিক্সেলে। আপনি নির্দিষ্ট চার্ট উপাদানগুলির জন্য বৈশিষ্ট্য ব্যবহার করে এটি ওভাররাইড করতে পারেন।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
ফন্টের নাম

চার্টের সমস্ত পাঠ্যের জন্য ডিফল্ট ফন্ট ফেস। আপনি নির্দিষ্ট চার্ট উপাদানগুলির জন্য বৈশিষ্ট্য ব্যবহার করে এটি ওভাররাইড করতে পারেন।

প্রকার: স্ট্রিং
ডিফল্ট: 'Arial'
forceIFrame

একটি ইনলাইন ফ্রেমের ভিতরে চার্ট আঁকে। (উল্লেখ্য যে IE8 এ, এই বিকল্পটি উপেক্ষা করা হয়েছে; সমস্ত IE8 চার্ট আই-ফ্রেমে আঁকা হয়েছে।)

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
হ্যাক্সিস

বিভিন্ন অনুভূমিক অক্ষ উপাদান কনফিগার করার জন্য সদস্য সহ একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
প্রকার: বস্তু
ডিফল্ট: নাল
hAxis.direction

অনুভূমিক অক্ষ বরাবর মানগুলি যে দিকে বৃদ্ধি পায়। মানগুলির ক্রম বিপরীত করতে -1 নির্দিষ্ট করুন।

প্রকার: 1 বা -1
ডিফল্ট: 1
hAxis.textPosition

লেখচিত্র এলাকার সাপেক্ষে অনুভূমিক অক্ষ পাঠের অবস্থান। সমর্থিত মান: 'আউট', 'ইন', 'কোনটি নয়'।

প্রকার: স্ট্রিং
ডিফল্ট: 'আউট'
hAxis.textStyle

একটি বস্তু যা অনুভূমিক অক্ষ পাঠের শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

স্বয়ংক্রিয়ভাবে উৎপন্ন X-অক্ষ টিকগুলিকে নির্দিষ্ট অ্যারে দিয়ে প্রতিস্থাপন করে। অ্যারের প্রতিটি উপাদান একটি বৈধ টিক মান (যেমন একটি সংখ্যা, তারিখ, তারিখ সময়, বা timeofday), অথবা একটি বস্তু হওয়া উচিত। যদি এটি একটি বস্তু হয়, এটিতে টিক মানের জন্য একটি v বৈশিষ্ট্য থাকা উচিত এবং লেবেল হিসাবে প্রদর্শিত হবে আক্ষরিক স্ট্রিং ধারণকারী একটি ঐচ্ছিক f বৈশিষ্ট্য।

আপনি ওভাররাইড করার জন্য একটি viewWindow.min বা viewWindow.max নির্দিষ্ট না করলে ভিউউইন্ডো স্বয়ংক্রিয়ভাবে ন্যূনতম এবং সর্বোচ্চ টিক অন্তর্ভুক্ত করতে প্রসারিত হবে।

উদাহরণ:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
প্রকার: উপাদানের অ্যারে
ডিফল্ট: স্বয়ংক্রিয়
hAxis.title

hAxis সম্পত্তি যা অনুভূমিক অক্ষের শিরোনাম নির্দিষ্ট করে।

প্রকার: স্ট্রিং
ডিফল্ট: নাল
hAxis.titleTextStyle

একটি বস্তু যা অনুভূমিক অক্ষ শিরোনাম পাঠ শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

মিথ্যা হলে, চার্ট ধারক দ্বারা ক্রপ করার অনুমতি না দিয়ে বাইরেরতম লেবেলগুলিকে লুকিয়ে রাখবে৷ সত্য হলে, লেবেল ক্রপ করার অনুমতি দেবে।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
hAxis.slantedText

সত্য হলে, একটি কোণে অনুভূমিক অক্ষের পাঠ্য আঁকুন, অক্ষ বরাবর আরও পাঠ্য ফিট করতে সাহায্য করতে; মিথ্যা হলে, অনুভূমিক অক্ষের টেক্সট সোজা আঁকুন। ডিফল্ট আচরণ হল টেক্সটকে তির্যক করা যদি এটি সোজা আঁকার সময় সব ফিট না হয়। লক্ষ্য করুন যে এই বিকল্পটি তখনই পাওয়া যায় যখন hAxis.textPosition 'out' এ সেট করা থাকে (যা ডিফল্ট)। তারিখ এবং সময়ের জন্য ডিফল্ট false .

প্রকার: বুলিয়ান
ডিফল্ট: স্বয়ংক্রিয়
hAxis.slantedTextAngle

অনুভূমিক অক্ষ পাঠের কোণ, যদি এটি তির্যকভাবে আঁকা হয়। hAxis.slantedText false হলে বা স্বয়ংক্রিয় মোডে থাকলে উপেক্ষা করা হয়, এবং চার্ট অনুভূমিকভাবে পাঠ্য আঁকার সিদ্ধান্ত নিয়েছে। কোণটি ধনাত্মক হলে ঘূর্ণন ঘড়ির কাঁটার বিপরীতে এবং ঋণাত্মক হলে ঘড়ির কাঁটার দিকে।

প্রকার: সংখ্যা, -90-90
ডিফল্ট: 30
hAxis.max Alternation

অনুভূমিক অক্ষ পাঠের সর্বোচ্চ সংখ্যক স্তর। যদি অক্ষ টেক্সট লেবেলগুলি খুব বেশি জমজমাট হয়ে যায়, তাহলে সার্ভারটি পার্শ্ববর্তী লেবেলগুলিকে উপরে বা নীচে স্থানান্তরিত করতে পারে যাতে লেবেলগুলিকে কাছাকাছি ফিট করা যায়৷ এই মানটি ব্যবহার করার জন্য সর্বাধিক সংখ্যক স্তর নির্দিষ্ট করে; সার্ভার কম মাত্রা ব্যবহার করতে পারে, যদি লেবেল ওভারল্যাপিং ছাড়াই ফিট হতে পারে। তারিখ এবং সময়ের জন্য, ডিফল্ট হল 1।

প্রকার: সংখ্যা
ডিফল্ট: 2
hAxis.maxTextLines

পাঠ্য লেবেলগুলির জন্য সর্বাধিক সংখ্যক লাইন অনুমোদিত৷ লেবেলগুলি অনেক লম্বা হলে একাধিক লাইন বিস্তৃত করতে পারে, এবং লাইনের সংখ্যা, ডিফল্টরূপে, উপলব্ধ স্থানের উচ্চতা দ্বারা সীমিত।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
hAxis.minTextSpacing

ন্যূনতম অনুভূমিক ব্যবধান, পিক্সেলে, দুটি সংলগ্ন পাঠ্য লেবেলের মধ্যে অনুমোদিত৷ যদি লেবেলগুলি খুব ঘনভাবে ফাঁক করা হয়, বা সেগুলি খুব দীর্ঘ হয়, তাহলে ব্যবধান এই থ্রেশহোল্ডের নীচে নেমে যেতে পারে এবং এই ক্ষেত্রে একটি লেবেল-আনক্লাটার ব্যবস্থা প্রয়োগ করা হবে (যেমন, লেবেলগুলিকে ছাঁটাই করা বা তাদের কিছু বাদ দেওয়া)।

প্রকার: সংখ্যা
ডিফল্ট: hAxis.textStyle.fontSize এর মান
hAxis.showTextEvery

কয়টি অনুভূমিক অক্ষের লেবেল দেখাতে হবে, যেখানে 1 মানে প্রতিটি লেবেল দেখান, 2 মানে প্রত্যেকটি লেবেল দেখান ইত্যাদি। ডিফল্ট হল ওভারল্যাপ না করে যতটা সম্ভব লেবেল দেখানোর চেষ্টা করা।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
hAxis.viewWindow

অনুভূমিক অক্ষের ক্রপিং পরিসীমা নির্দিষ্ট করে।

প্রকার: বস্তু
ডিফল্ট: নাল
hAxis.viewWindow.max

শূন্য-ভিত্তিক সারি সূচক যেখানে ক্রপিং উইন্ডো শেষ হয়। এই সূচক এবং উচ্চতর ডেটা পয়েন্টগুলি কেটে ফেলা হবে৷ vAxis.viewWindowMode.min এর সাথে একত্রে, এটি একটি অর্ধ-খোলা পরিসীমা সংজ্ঞায়িত করে [মিনিট, সর্বোচ্চ) যা প্রদর্শনের জন্য উপাদান সূচকগুলিকে নির্দেশ করে। অন্য কথায়, প্রতিটি সূচক যেমন min <= index < max প্রদর্শিত হবে।

যখন hAxis.viewWindowMode 'সুন্দর' বা 'বড়ো' হয় তখন উপেক্ষা করা হয়।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
hAxis.viewWindow.min

শূন্য-ভিত্তিক সারি সূচক যেখানে ক্রপিং উইন্ডো শুরু হয়। এর চেয়ে কম সূচকে ডেটা পয়েন্টগুলি কেটে ফেলা হবে। vAxis.viewWindowMode.max এর সাথে একত্রে, এটি একটি অর্ধ-খোলা পরিসীমা সংজ্ঞায়িত করে [মিনিট, সর্বোচ্চ) যা প্রদর্শনের জন্য উপাদান সূচকগুলিকে নির্দেশ করে। অন্য কথায়, প্রতিটি সূচক যেমন min <= index < max প্রদর্শিত হবে।

যখন hAxis.viewWindowMode 'সুন্দর' বা 'বড়ো' হয় তখন উপেক্ষা করা হয়।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
উচ্চতা

চার্টের উচ্চতা, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: ধারণকারী উপাদানের উচ্চতা
স্ট্যাক করা

সত্য হিসাবে সেট করা হলে, প্রতিটি ডোমেন মানতে সমস্ত সিরিজের উপাদানগুলিকে স্ট্যাক করে। দ্রষ্টব্য: কলাম , এলাকা , এবং স্টেপডএরিয়া চার্টে, Google চার্টগুলি সিরিজের উপাদানগুলির স্ট্যাকিংয়ের সাথে আরও ভালভাবে মিলিত হওয়ার জন্য কিংবদন্তি আইটেমগুলির ক্রমকে বিপরীত করে (যেমন সিরিজ 0 হবে সবচেয়ে নীচের কিংবদন্তি আইটেম)। এটি বার চার্টের ক্ষেত্রে প্রযোজ্য নয় ।

isStacked বিকল্পটি 100% স্ট্যাকিংকেও সমর্থন করে, যেখানে প্রতিটি ডোমেন মানের উপাদানগুলির স্ট্যাকগুলি 100% পর্যন্ত যোগ করার জন্য পুনরায় স্কেল করা হয়।

isStacked এর বিকল্পগুলি হল:

  • false — উপাদানগুলি স্ট্যাক করা হবে না। এটি ডিফল্ট বিকল্প।
  • true — প্রতিটি ডোমেন মানতে সমস্ত সিরিজের জন্য উপাদানগুলিকে স্ট্যাক করে।
  • 'percent' — প্রতিটি ডোমেন মূল্যে সমস্ত সিরিজের জন্য উপাদানগুলিকে স্ট্যাক করে এবং সেগুলিকে এমনভাবে পুনরায় স্কেল করে যাতে তারা 100% পর্যন্ত যোগ করে, প্রতিটি উপাদানের মান 100% শতাংশ হিসাবে গণনা করা হয়।
  • 'relative' — প্রতিটি ডোমেন মূল্যে সমস্ত সিরিজের জন্য উপাদানগুলিকে স্ট্যাক করে এবং সেগুলিকে এমনভাবে পুনরায় স্কেল করে যাতে তারা 1 পর্যন্ত যোগ করে, প্রতিটি উপাদানের মান 1 এর ভগ্নাংশ হিসাবে গণনা করা হয়।
  • 'absolute' — isStacked: true ।

100% স্ট্যাকিংয়ের জন্য, প্রতিটি উপাদানের জন্য গণনা করা মান তার প্রকৃত মানের পরে টুলটিপে প্রদর্শিত হবে।

'relative' এর জন্য 1-এর ভগ্নাংশ হিসাবে আপেক্ষিক 0-1 স্কেলের উপর ভিত্তি করে মানগুলিকে লক্ষ্য অক্ষ ডিফল্ট করবে, এবং 'শতাংশ'-এর জন্য 0-100% ( দ্রষ্টব্য: 'percent' 'percent' বিকল্প ব্যবহার করার সময়, অক্ষ/টিক মানগুলি শতাংশ হিসাবে প্রদর্শিত হয়, তবে প্রকৃত মানগুলি আপেক্ষিক 0-1 স্কেলের মান। এর কারণ হল শতাংশ অক্ষ টিকগুলি আপেক্ষিক 0-1 স্কেলের মানগুলিতে "#.##%" ফর্ম্যাট প্রয়োগ করার ফলাফল। isStacked: 'percent' , আপেক্ষিক 0-1 স্কেল মান ব্যবহার করে যেকোনো টিক/গ্রিডলাইন নির্দিষ্ট করতে ভুলবেন না)। আপনি উপযুক্ত hAxis/vAxis বিকল্পগুলি ব্যবহার করে গ্রিডলাইন/টিক মান এবং বিন্যাস কাস্টমাইজ করতে পারেন।

100% স্ট্যাকিং শুধুমাত্র টাইপ number ডেটা মানকে সমর্থন করে এবং শূন্যের একটি বেসলাইন থাকতে হবে।

প্রকার: বুলিয়ান/স্ট্রিং
ডিফল্ট: মিথ্যা
কিংবদন্তি

কিংবদন্তির বিভিন্ন দিক কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
প্রকার: বস্তু
ডিফল্ট: নাল
legend.alignment

কিংবদন্তির প্রান্তিককরণ। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • 'শুরু' - কিংবদন্তির জন্য বরাদ্দ করা এলাকার শুরুতে সারিবদ্ধ।
  • 'সেন্টার' - কিংবদন্তির জন্য বরাদ্দকৃত এলাকায় কেন্দ্রীভূত।
  • 'শেষ' - কিংবদন্তির জন্য বরাদ্দ করা এলাকার শেষ প্রান্তে সারিবদ্ধ।

শুরু, কেন্দ্র এবং শেষ কিংবদন্তির শৈলী -- উল্লম্ব বা অনুভূমিক -- আপেক্ষিক। উদাহরণস্বরূপ, একটি 'ডান' কিংবদন্তিতে, 'শুরু' এবং 'শেষ' যথাক্রমে উপরে এবং নীচে থাকে; একটি 'শীর্ষ' কিংবদন্তির জন্য, 'শুরু' এবং 'শেষ' যথাক্রমে এলাকার বাম এবং ডানদিকে হবে।

ডিফল্ট মান কিংবদন্তির অবস্থানের উপর নির্ভর করে। 'নিচে' কিংবদন্তির জন্য, ডিফল্ট হল 'কেন্দ্র'; অন্যান্য কিংবদন্তি ডিফল্ট 'শুরু'।

প্রকার: স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
legend.maxLines

লিজেন্ডে সর্বাধিক সংখ্যক লাইন। আপনার কিংবদন্তিতে লাইন যোগ করতে এটিকে একের বেশি সংখ্যায় সেট করুন। দ্রষ্টব্য: রেন্ডার করা লাইনের প্রকৃত সংখ্যা নির্ধারণ করতে ব্যবহৃত সঠিক যুক্তিটি এখনও প্রবাহিত।

এই বিকল্পটি বর্তমানে শুধুমাত্র তখনই কাজ করে যখন legend.position 'শীর্ষ' হয়।

প্রকার: সংখ্যা
ডিফল্ট: 1
legend.position

কিংবদন্তির অবস্থান। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • 'নিচে' - চার্টের নিচে।
  • 'বাম' - চার্টের বাম দিকে, যদি বাম অক্ষের সাথে কোনো ধারা যুক্ত না থাকে। সুতরাং আপনি যদি বাম দিকের কিংবদন্তি চান, targetAxisIndex: 1 বিকল্পটি ব্যবহার করুন।
  • 'in' - চার্টের ভিতরে, উপরের বাম কোণে।
  • 'কোনোটি' - কোনো কিংবদন্তি প্রদর্শিত হয় না।
  • 'right' - চার্টের ডানদিকে। vAxes বিকল্পের সাথে বেমানান।
  • 'শীর্ষ' - চার্টের উপরে।
প্রকার: স্ট্রিং
ডিফল্ট: 'ডান'
legend.textStyle

একটি বস্তু যা কিংবদন্তি পাঠ্য শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
লাইনড্যাশস্টাইল

ড্যাশড লাইনের জন্য অন-অফ প্যাটার্ন। উদাহরণস্বরূপ, [4, 4] 4-দৈর্ঘ্যের ড্যাশের পুনরাবৃত্তি করবে এবং 4-দৈর্ঘ্যের ফাঁক দ্বারা অনুসরণ করবে, এবং [5, 1, 3] একটি 5-দৈর্ঘ্য ড্যাশ পুনরাবৃত্তি করবে, একটি 1-দৈর্ঘ্যের ব্যবধান, একটি 3-দৈর্ঘ্যের ড্যাশ, একটি 5-দৈর্ঘ্যের ব্যবধান, একটি 1-দৈর্ঘ্যের ড্যাশ এবং একটি 3-দৈর্ঘ্যের ব্যবধান। আরও তথ্যের জন্য ড্যাশড লাইন দেখুন।

প্রকার: সংখ্যার অ্যারে
ডিফল্ট: নাল
বিপরীত বিভাগ

সত্যে সেট করা হলে, ডান থেকে বামে সিরিজ আঁকা হবে। ডিফল্ট হল বাম থেকে ডানে আঁকা।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
নির্বাচন মোড

যখন selectionMode 'multiple' হয়, ব্যবহারকারীরা একাধিক ডেটা পয়েন্ট নির্বাচন করতে পারে।

প্রকার: স্ট্রিং
ডিফল্ট: 'একক'
সিরিজ

অবজেক্টের একটি অ্যারে, প্রতিটি চার্টে সংশ্লিষ্ট সিরিজের বিন্যাস বর্ণনা করে। একটি সিরিজের জন্য ডিফল্ট মান ব্যবহার করতে, একটি খালি বস্তু {} নির্দিষ্ট করুন৷ যদি একটি সিরিজ বা একটি মান নির্দিষ্ট করা না থাকে, তাহলে বিশ্বব্যাপী মান ব্যবহার করা হবে। প্রতিটি বস্তু নিম্নলিখিত বৈশিষ্ট্য সমর্থন করে:

  • areaOpacity - এই সিরিজের জন্য বিশ্বব্যাপী areaOpacity ওভাররাইড করে।
  • color - এই সিরিজের জন্য ব্যবহার করা রঙ। একটি বৈধ HTML রঙের স্ট্রিং নির্দিষ্ট করুন।
  • labelInLegend - তালিকার কিংবদন্তিতে প্রদর্শিত সিরিজের বর্ণনা।
  • lineDashStyle - এই সিরিজের জন্য গ্লোবাল lineDashStyle মান ওভাররাইড করে।
  • targetAxisIndex - এই সিরিজটি কোন অক্ষকে বরাদ্দ করতে হবে, যেখানে 0 হল ডিফল্ট অক্ষ এবং 1 হল বিপরীত অক্ষ। ডিফল্ট মান 0; একটি চার্ট সংজ্ঞায়িত করতে 1 এ সেট করুন যেখানে বিভিন্ন অক্ষের বিপরীতে বিভিন্ন সিরিজ রেন্ডার করা হয়। কমপক্ষে একটি সিরিজ ডিফল্ট অক্ষে বরাদ্দ করা হবে। আপনি বিভিন্ন অক্ষের জন্য একটি ভিন্ন স্কেল সংজ্ঞায়িত করতে পারেন।
  • visibleInLegend - একটি বুলিয়ান মান, যেখানে সত্য মানে সিরিজটিতে একটি কিংবদন্তি এন্ট্রি থাকা উচিত এবং মিথ্যা মানে এটি করা উচিত নয়৷ ডিফল্ট সত্য.

আপনি অবজেক্টের একটি অ্যারে নির্দিষ্ট করতে পারেন, যার প্রতিটি প্রদত্ত ক্রম অনুসারে সিরিজে প্রযোজ্য, অথবা আপনি এমন একটি বস্তু নির্দিষ্ট করতে পারেন যেখানে প্রতিটি শিশুর একটি সংখ্যাসূচক কী রয়েছে যা নির্দেশ করে যে এটি কোন সিরিজে প্রযোজ্য। উদাহরণস্বরূপ, নিম্নলিখিত দুটি ঘোষণা অভিন্ন, এবং প্রথম সিরিজটিকে কালো এবং কিংবদন্তি থেকে অনুপস্থিত হিসাবে ঘোষণা করে এবং চতুর্থটি কিংবদন্তি থেকে লাল এবং অনুপস্থিত হিসাবে ঘোষণা করে:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
প্রকার: অবজেক্টের অ্যারে, বা নেস্টেড অবজেক্ট সহ অবজেক্ট
ডিফল্ট: {}
থিম

একটি থিম হল পূর্বনির্ধারিত বিকল্প মানগুলির একটি সেট যা একটি নির্দিষ্ট চার্ট আচরণ বা ভিজ্যুয়াল প্রভাব অর্জন করতে একসাথে কাজ করে। বর্তমানে শুধুমাত্র একটি থিম উপলব্ধ:

  • 'সর্বোচ্চ' - চার্টের ক্ষেত্রফলকে সর্বাধিক করে, এবং লেজেন্ড এবং লেবেলের সমস্ত লেবেল আঁকে। নিম্নলিখিত বিকল্পগুলি সেট করে: 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
প্রকার: স্ট্রিং
ডিফল্ট: নাল
শিরোনাম

চার্টের উপরে দেখানোর জন্য পাঠ্য।

প্রকার: স্ট্রিং
ডিফল্ট: কোন শিরোনাম নেই
শিরোনাম অবস্থান

চার্ট এরিয়ার তুলনায় চার্টের শিরোনাম কোথায় রাখবেন। সমর্থিত মান:

  • in - চার্ট এলাকার ভিতরে শিরোনাম আঁকুন।
  • আউট - চার্ট এলাকার বাইরে শিরোনাম আঁকুন।
  • কোনোটিই নয় - শিরোনাম বাদ দিন।
প্রকার: স্ট্রিং
ডিফল্ট: 'আউট'
শিরোনাম টেক্সটস্টাইল

একটি বস্তু যা শিরোনাম পাঠ্য শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
টুলটিপ

বিভিন্ন টুলটিপ উপাদান কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

{textStyle: {color: '#FF0000'}, showColorCode: true}
প্রকার: বস্তু
ডিফল্ট: নাল
tooltip.ignoreBounds

যদি true সেট করা হয়, টুলটিপগুলির অঙ্কনকে চার্টের সীমার বাইরে সব দিকে প্রবাহিত করার অনুমতি দেয়।

দ্রষ্টব্য: এটি শুধুমাত্র HTML টুলটিপের ক্ষেত্রে প্রযোজ্য। এটি যদি SVG টুলটিপগুলির সাথে সক্ষম করা থাকে, তাহলে চার্টের সীমার বাইরে যেকোনও ওভারফ্লো ক্রপ করা হবে৷ আরও বিস্তারিত জানার জন্য টুলটিপ সামগ্রী কাস্টমাইজ করা দেখুন।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
tooltip.isHtml

সত্য হিসাবে সেট করা হলে, HTML-রেন্ডার করা (এসভিজি-রেন্ডারের পরিবর্তে) টুলটিপ ব্যবহার করুন। আরও বিস্তারিত জানার জন্য টুলটিপ সামগ্রী কাস্টমাইজ করা দেখুন।

দ্রষ্টব্য: টুলটিপ কলাম ডেটা ভূমিকার মাধ্যমে HTML টুলটিপ সামগ্রীর কাস্টমাইজেশন বাবল চার্ট ভিজ্যুয়ালাইজেশন দ্বারা সমর্থিত নয় ৷

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
tooltip.showColorCode

সত্য হলে, টুলটিপে সিরিজের তথ্যের পাশে রঙিন বর্গক্ষেত্র দেখান। ফোকাস টার্গেট 'বিভাগ' এ সেট করা হলে focusTarget সত্য, অন্যথায় ডিফল্ট মিথ্যা।

প্রকার: বুলিয়ান
ডিফল্ট: স্বয়ংক্রিয়
tooltip.textStyle

টুলটিপ টেক্সট শৈলী নির্দিষ্ট করে এমন একটি বস্তু। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

ব্যবহারকারীর ইন্টারঅ্যাকশন যার কারণে টুলটিপ প্রদর্শিত হয়:

  • 'ফোকাস' - ব্যবহারকারী যখন উপাদানটির উপর ঘোরায় তখন টুলটিপ প্রদর্শিত হবে।
  • 'none' - টুলটিপ প্রদর্শিত হবে না।
  • 'নির্বাচন' - ব্যবহারকারী উপাদান নির্বাচন করলে টুলটিপ প্রদর্শিত হবে।
প্রকার: স্ট্রিং
ডিফল্ট: 'ফোকাস'
ভ্যাক্স

যদি চার্টে একাধিক উল্লম্ব অক্ষ থাকে তবে পৃথক উল্লম্ব অক্ষগুলির জন্য বৈশিষ্ট্যগুলি নির্দিষ্ট করে৷ প্রতিটি চাইল্ড অবজেক্ট একটি vAxis অবজেক্ট, এবং এতে vAxis দ্বারা সমর্থিত সমস্ত বৈশিষ্ট্য থাকতে পারে। এই সম্পত্তির মান একই সম্পত্তির জন্য যেকোনো বিশ্বব্যাপী সেটিংসকে ওভাররাইড করে।

একাধিক উল্লম্ব অক্ষ সহ একটি চার্ট নির্দিষ্ট করতে, প্রথমে series.targetAxisIndex ব্যবহার করে একটি নতুন অক্ষ নির্ধারণ করুন, তারপর series.targetAxisIndex ব্যবহার করে vAxes কনফিগার করুন। নিম্নলিখিত উদাহরণটি ডান অক্ষে সিরিজ 2 বরাদ্দ করে এবং এটির জন্য একটি কাস্টম শিরোনাম এবং পাঠ্য শৈলী নির্দিষ্ট করে:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}

এই বৈশিষ্ট্যটি হয় একটি বস্তু বা একটি অ্যারে হতে পারে: বস্তুটি বস্তুর একটি সংগ্রহ, প্রতিটিতে একটি সাংখ্যিক লেবেল রয়েছে যা অক্ষটি নির্দিষ্ট করে যা এটি সংজ্ঞায়িত করে--এটি উপরে দেখানো বিন্যাস; অ্যারে হল বস্তুর একটি অ্যারে, প্রতি অক্ষে একটি। উদাহরণ স্বরূপ, নিচের অ্যারে-শৈলীর স্বরলিপিটি উপরে দেখানো vAxis বস্তুর অনুরূপ:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
প্রকার: অবজেক্টের অ্যারে, বা চাইল্ড অবজেক্ট সহ অবজেক্ট
ডিফল্ট: নাল
ভ্যাক্সিস

বিভিন্ন উল্লম্ব অক্ষ উপাদান কনফিগার করার জন্য সদস্য সহ একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
প্রকার: বস্তু
ডিফল্ট: নাল
vAxis.baseline

vAxis সম্পত্তি যা উল্লম্ব অক্ষের জন্য বেসলাইন নির্দিষ্ট করে। যদি বেসলাইনটি সর্বোচ্চ গ্রিড লাইনের চেয়ে বড় বা সর্বনিম্ন গ্রিড লাইনের চেয়ে ছোট হয়, তাহলে এটি নিকটতম গ্রিডলাইনে বৃত্তাকার হবে।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
vAxis.baselineColor

উল্লম্ব অক্ষের জন্য বেসলাইনের রঙ নির্দিষ্ট করে। যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' ।

প্রকার: সংখ্যা
ডিফল্ট: 'কালো'
vAxis.direction

উল্লম্ব অক্ষ বরাবর মানগুলি যে দিকে বৃদ্ধি পায়। ডিফল্টরূপে, কম মানগুলি চার্টের নীচে থাকে৷ মানগুলির ক্রম বিপরীত করতে -1 নির্দিষ্ট করুন।

প্রকার: 1 বা -1
ডিফল্ট: 1
vAxis.format

সাংখ্যিক অক্ষ লেবেলের জন্য একটি বিন্যাস স্ট্রিং। এটি আইসিইউ প্যাটার্ন সেটের একটি উপসেট। উদাহরণস্বরূপ, {format:'#,###%'} 10, 7.5 এবং 0.5 মানগুলির জন্য "1,000%", "750%", এবং "50%" মান প্রদর্শন করবে। এছাড়াও আপনি নিম্নলিখিত যে কোনো সরবরাহ করতে পারেন:

  • {format: 'none'} : কোন ফরম্যাটিং ছাড়াই সংখ্যা প্রদর্শন করে (যেমন, 8000000)
  • {format: 'decimal'} : হাজার হাজার বিভাজক সহ সংখ্যা প্রদর্শন করে (যেমন, 8,000,000)
  • {format: 'scientific'} : বৈজ্ঞানিক স্বরলিপিতে সংখ্যা প্রদর্শন করে (যেমন, 8e6)
  • {format: 'currency'} : স্থানীয় মুদ্রায় সংখ্যা প্রদর্শন করে (যেমন, $8,000,000.00)
  • {format: 'percent'} : সংখ্যাগুলিকে শতাংশ হিসাবে প্রদর্শন করে (যেমন, 800,000,000%)
  • {format: 'short'} : সংক্ষিপ্ত সংখ্যা প্রদর্শন করে (যেমন, 8M)
  • {format: 'long'} : সংখ্যাগুলিকে পূর্ণ শব্দ হিসাবে প্রদর্শন করে (যেমন, 8 মিলিয়ন)

লেবেলে প্রয়োগ করা প্রকৃত বিন্যাসটি API লোড করা হয়েছে এমন লোকেল থেকে প্রাপ্ত। আরও বিশদ বিবরণের জন্য, একটি নির্দিষ্ট লোকেল সহ লোডিং চার্ট দেখুন।

টিক মান এবং গ্রিডলাইন গণনা করার ক্ষেত্রে, সমস্ত প্রাসঙ্গিক গ্রিডলাইন বিকল্পগুলির বেশ কয়েকটি বিকল্প সমন্বয় বিবেচনা করা হবে এবং বিকল্পগুলি প্রত্যাখ্যান করা হবে যদি ফর্ম্যাট করা টিক লেবেলগুলি ডুপ্লিকেট বা ওভারল্যাপ করা হয়। সুতরাং আপনি format:"#" যদি আপনি শুধুমাত্র পূর্ণসংখ্যার টিক মান দেখাতে চান, তবে সচেতন থাকুন যে যদি কোন বিকল্প এই শর্তটি পূরণ না করে, তাহলে কোন গ্রিডলাইন বা টিক দেখানো হবে না।

প্রকার: স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
vAxis.gridlines

উল্লম্ব অক্ষের গ্রিডলাইনগুলি কনফিগার করার জন্য সদস্য সহ একটি বস্তু৷ উল্লেখ্য যে উল্লম্ব অক্ষ গ্রিডলাইন অনুভূমিকভাবে আঁকা হয়। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

{color: '#333', minSpacing: 20}
প্রকার: বস্তু
ডিফল্ট: নাল
vAxis.gridlines.color

চার্ট এলাকার ভিতরে উল্লম্ব গ্রিডলাইনের রঙ। একটি বৈধ HTML রঙের স্ট্রিং নির্দিষ্ট করুন।

প্রকার: স্ট্রিং
ডিফল্ট: '#CCC'
vAxis.gridlines.count

চার্ট এলাকার ভিতরে অনুভূমিক গ্রিডলাইনের আনুমানিক সংখ্যা। আপনি gridlines.count এর জন্য একটি ধনাত্মক সংখ্যা উল্লেখ করলে, এটি gridlines.count মধ্যে minSpacing গণনা করতে ব্যবহৃত হবে। আপনি শুধুমাত্র একটি গ্রিডলাইন আঁকতে 1 এর মান নির্দিষ্ট করতে পারেন, অথবা কোন গ্রিডলাইন আঁকতে 0 এর মান উল্লেখ করতে পারেন। অন্যান্য বিকল্পের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে গ্রিডলাইনের সংখ্যা গণনা করতে -1 নির্দিষ্ট করুন, যা ডিফল্ট।

প্রকার: সংখ্যা
ডিফল্ট: -1
vAxis.minorGridlines

vAxis.gridlines বিকল্পের অনুরূপ উল্লম্ব অক্ষের ছোট গ্রিডলাইনগুলি কনফিগার করার জন্য সদস্য সহ একটি বস্তু৷

প্রকার: বস্তু
ডিফল্ট: নাল
vAxis.minorGridlines.color

চার্ট এলাকার ভিতরে উল্লম্ব ক্ষুদ্র গ্রিডলাইনের রঙ। একটি বৈধ HTML রঙের স্ট্রিং নির্দিষ্ট করুন।

প্রকার: স্ট্রিং
ডিফল্ট: গ্রিডলাইন এবং পটভূমির রঙের মিশ্রণ
vAxis.minorGridlines.count

minorGridlines.count বিকল্পটি বেশিরভাগই অবহেলিত, কাউন্ট 0 তে সেট করে ছোট গ্রিডলাইনগুলি নিষ্ক্রিয় করা ছাড়া। ছোট গ্রিডলাইনের সংখ্যা প্রধান গ্রিডলাইনগুলির মধ্যে ব্যবধানের উপর নির্ভর করে (vAxis.gridlines.interval দেখুন) এবং ন্যূনতম প্রয়োজনীয় স্থান (vAxis দেখুন)। minorGridlines.minSpacing)।

প্রকার: সংখ্যা
ডিফল্ট: 1
vAxis.logScale

সত্য হলে, উল্লম্ব অক্ষকে লগারিদমিক স্কেল করে। দ্রষ্টব্য: সমস্ত মান ইতিবাচক হতে হবে।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
vAxis.scaleType

vAxis সম্পত্তি যা উল্লম্ব অক্ষকে লগারিদমিক স্কেল করে। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • null - কোন লগারিদমিক স্কেলিং সঞ্চালিত হয় না।
  • 'লগ' - লগারিদমিক স্কেলিং। নেতিবাচক এবং শূন্য মান প্লট করা হয় না। এই বিকল্পটি vAxis সেট করার vAxis: { logscale: true } ।
  • 'মিররলগ' - লগারিদমিক স্কেলিং যাতে ঋণাত্মক এবং শূন্য মান প্লট করা হয়। একটি ঋণাত্মক সংখ্যার প্লট করা মান হল পরম মানের লগের ঋণাত্মক। 0 এর কাছাকাছি মান একটি রৈখিক স্কেলে প্লট করা হয়।
প্রকার: স্ট্রিং
ডিফল্ট: নাল
vAxis.textPosition

উল্লম্ব অক্ষ পাঠের অবস্থান, চার্ট এলাকার সাপেক্ষে। সমর্থিত মান: 'আউট', 'ইন', 'কোনটি নয়'।

প্রকার: স্ট্রিং
ডিফল্ট: 'আউট'
vAxis.textStyle

একটি বস্তু যা উল্লম্ব অক্ষ পাঠের শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

স্বয়ংক্রিয়ভাবে উৎপন্ন Y-অক্ষ টিকগুলিকে নির্দিষ্ট অ্যারে দিয়ে প্রতিস্থাপন করে। অ্যারের প্রতিটি উপাদান একটি বৈধ টিক মান (যেমন একটি সংখ্যা, তারিখ, তারিখ সময়, বা timeofday), অথবা একটি বস্তু হওয়া উচিত। যদি এটি একটি বস্তু হয়, এটিতে টিক মানের জন্য একটি v বৈশিষ্ট্য থাকা উচিত এবং লেবেল হিসাবে প্রদর্শিত হবে আক্ষরিক স্ট্রিং ধারণকারী একটি ঐচ্ছিক f বৈশিষ্ট্য।

আপনি ওভাররাইড করার জন্য একটি viewWindow.min বা viewWindow.max নির্দিষ্ট না করলে ভিউউইন্ডো স্বয়ংক্রিয়ভাবে ন্যূনতম এবং সর্বোচ্চ টিক অন্তর্ভুক্ত করতে প্রসারিত হবে।

উদাহরণ:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
প্রকার: উপাদানের অ্যারে
ডিফল্ট: স্বয়ংক্রিয়
vAxis.title

vAxis সম্পত্তি যা উল্লম্ব অক্ষের জন্য একটি শিরোনাম নির্দিষ্ট করে।

প্রকার: স্ট্রিং
ডিফল্ট: কোন শিরোনাম নেই
vAxis.titleTextStyle

একটি বস্তু যা উল্লম্ব অক্ষ শিরোনাম পাঠ শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

উল্লম্ব অক্ষের সর্বোচ্চ মানকে নির্দিষ্ট মানের দিকে নিয়ে যায়; এটি বেশিরভাগ চার্টে উর্ধ্বগামী হবে। উপেক্ষা করা হয় যদি এটি ডেটার সর্বোচ্চ y-মানের থেকে ছোট একটি মান সেট করা থাকে। vAxis.viewWindow.max এই সম্পত্তি ওভাররাইড করে।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
vAxis.minValue

উল্লম্ব অক্ষের সর্বনিম্ন মানকে নির্দিষ্ট মানের দিকে নিয়ে যায়; এটি বেশিরভাগ চার্টে নিম্নগামী হবে। উপেক্ষা করা হয় যদি এটি ডেটার ন্যূনতম y-মানের চেয়ে বেশি একটি মান সেট করা থাকে। vAxis.viewWindow.min এই সম্পত্তি ওভাররাইড করে।

প্রকার: সংখ্যা
ডিফল্ট: নাল
vAxis.viewWindowMode

লেখচিত্র এলাকার মধ্যে মান রেন্ডার করার জন্য উল্লম্ব অক্ষ স্কেল কিভাবে নির্দিষ্ট করে। নিম্নলিখিত স্ট্রিং মান সমর্থিত:

  • 'সুন্দর' - উল্লম্ব মানগুলিকে স্কেল করুন যাতে সর্বাধিক এবং সর্বনিম্ন ডেটা মানগুলি চার্ট এলাকার নীচে এবং উপরের দিকে কিছুটা রেন্ডার করা হয়৷ ভিউউইন্ডো সংখ্যার জন্য নিকটতম প্রধান গ্রিডলাইনে বা তারিখ এবং সময়ের জন্য নিকটতম ছোট গ্রিডলাইনে প্রসারিত হয়।
  • 'সর্বোচ্চ' - উল্লম্ব মানগুলিকে স্কেল করুন যাতে সর্বাধিক এবং সর্বনিম্ন ডেটা মানগুলি চার্ট এলাকার উপরে এবং নীচে স্পর্শ করে৷ এর ফলে vaxis.viewWindow.min এবং vaxis.viewWindow.max উপেক্ষা করা হবে।
  • 'স্পষ্ট' - চার্ট এলাকার উপরের এবং নীচের স্কেলের মানগুলি নির্দিষ্ট করার জন্য একটি অবচয় বিকল্প। (অপ্রচলিত কারণ এটি vaxis.viewWindow.min এবং vaxis.viewWindow.max এর সাথে অপ্রয়োজনীয়। এই মানগুলির বাইরের ডেটা মানগুলি ক্রপ করা হবে। আপনাকে দেখানোর জন্য সর্বাধিক এবং সর্বনিম্ন মানগুলি বর্ণনা করে একটি vAxis.viewWindow বস্তু নির্দিষ্ট করতে হবে।
প্রকার: স্ট্রিং
ডিফল্ট: 'সুন্দর'-এর সমতুল্য, কিন্তু ব্যবহার করা হলে vaxis.viewWindow.min এবং vaxis.viewWindow.max অগ্রাধিকার পাবে।
vAxis.viewWindow

উল্লম্ব অক্ষের ক্রপিং পরিসীমা নির্দিষ্ট করে।

প্রকার: বস্তু
ডিফল্ট: নাল
vAxis.viewWindow.max

রেন্ডার করার জন্য সর্বাধিক উল্লম্ব ডেটা মান৷

উপেক্ষা করা হয় যখন vAxis.viewWindowMode 'সুন্দর' বা 'সর্বোচ্চ' হয়।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
vAxis.viewWindow.min

রেন্ডার করার জন্য ন্যূনতম উল্লম্ব ডেটা মান৷

উপেক্ষা করা হয় যখন vAxis.viewWindowMode 'সুন্দর' বা 'সর্বোচ্চ' হয়।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
প্রস্থ

চার্টের প্রস্থ, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: ধারণকারী উপাদানের প্রস্থ

পদ্ধতি

পদ্ধতি
draw(data, options)

চার্ট আঁকে। ready ইভেন্ট ফায়ার হওয়ার পরেই চার্টটি আরও মেথড কল গ্রহণ করে। Extended description .

রিটার্ন টাইপ: কোনোটিই নয়
getAction(actionID)

অনুরোধ actionID সহ টুলটিপ অ্যাকশন অবজেক্ট ফেরত দেয়।

রিটার্ন টাইপ: অবজেক্ট
getBoundingBox(id)

চার্ট এলিমেন্ট id বাম, উপরে, প্রস্থ এবং উচ্চতা সম্বলিত একটি বস্তু প্রদান করে। id বিন্যাসটি এখনও নথিভুক্ত করা হয়নি (এগুলি ইভেন্ট হ্যান্ডলারের রিটার্ন মান), তবে এখানে কিছু উদাহরণ রয়েছে:

var cli = chart.getChartLayoutInterface();

চার্ট এলাকার উচ্চতা
cli.getBoundingBox('chartarea').height
একটি বার বা কলাম চার্টের প্রথম সিরিজের তৃতীয় বারের প্রস্থ
cli.getBoundingBox('bar#0#2').width
পাই চার্টের পঞ্চম ওয়েজের বাউন্ডিং বক্স
cli.getBoundingBox('slice#4')
একটি উল্লম্ব (যেমন, কলাম) চার্টের চার্ট ডেটার বাউন্ডিং বক্স:
cli.getBoundingBox('vAxis#0#gridline')
একটি অনুভূমিক (যেমন, বার) চার্টের চার্ট ডেটার বাউন্ডিং বক্স:
cli.getBoundingBox('hAxis#0#gridline')

মানগুলি চার্টের কন্টেইনারের সাথে আপেক্ষিক। চার্ট আঁকা পরে এটি কল.

রিটার্ন টাইপ: অবজেক্ট
getChartAreaBoundingBox()

চার্টের বিষয়বস্তুর বাম, শীর্ষ, প্রস্থ এবং উচ্চতা সহ একটি বস্তু ফেরত দেয় (যেমন, লেবেল এবং কিংবদন্তি বাদ দিয়ে):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

মানগুলি চার্টের কন্টেইনারের সাথে আপেক্ষিক। চার্ট আঁকা পরে এটি কল.

রিটার্ন টাইপ: অবজেক্ট
getChartLayoutInterface()

চার্টের অনস্ক্রিন বসানো এবং এর উপাদান সম্পর্কে তথ্য সম্বলিত একটি বস্তু প্রদান করে।

প্রত্যাবর্তিত বস্তুতে নিম্নলিখিত পদ্ধতিগুলি কল করা যেতে পারে:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

চার্ট আঁকা পরে এটি কল.

রিটার্ন টাইপ: অবজেক্ট
getHAxisValue(xPosition, optional_axis_index)

xPosition এ অনুভূমিক ডেটা মান প্রদান করে, যা চার্ট কন্টেইনারের বাম প্রান্ত থেকে একটি পিক্সেল অফসেট। নেতিবাচক হতে পারে।

উদাহরণ: chart.getChartLayoutInterface().getHAxisValue(400) ।

চার্ট আঁকা পরে এটি কল.

রিটার্ন টাইপ: নম্বর
getImageURI()

একটি চিত্র URI হিসাবে ক্রমিককৃত চার্ট ফেরত দেয়।

চার্ট আঁকা পরে এটি কল.

প্রিন্টিং PNG চার্ট দেখুন।

রিটার্ন টাইপ: স্ট্রিং
getSelection()

নির্বাচিত চার্ট সত্তাগুলির একটি অ্যারে প্রদান করে। নির্বাচনযোগ্য সত্তা হল ধাপ, কিংবদন্তি এন্ট্রি এবং বিভাগ। A step corresponds to a cell in the data table, a legend entry to a column (row index is null), and a category to a row (column index is null). For this chart, only one entity can be selected at any given moment. Extended description .

Return Type: Array of selection elements
getVAxisValue(yPosition, optional_axis_index)

Returns the vertical data value at yPosition , which is a pixel offset down from the chart container's top edge. Can be negative.

Example: chart.getChartLayoutInterface().getVAxisValue(300) .

Call this after the chart is drawn.

Return Type: number
getXLocation(dataValue, optional_axis_index)

Returns the pixel x-coordinate of dataValue relative to the left edge of the chart's container.

Example: chart.getChartLayoutInterface().getXLocation(400) .

Call this after the chart is drawn.

Return Type: number
getYLocation(dataValue, optional_axis_index)

Returns the pixel y-coordinate of dataValue relative to the top edge of the chart's container.

Example: chart.getChartLayoutInterface().getYLocation(300) .

Call this after the chart is drawn.

Return Type: number
removeAction(actionID)

Removes the tooltip action with the requested actionID from the chart.

Return Type: none
setAction(action)

Sets a tooltip action to be executed when the user clicks on the action text.

The setAction method takes an object as its action parameter. This object should specify 3 properties: id — the ID of the action being set, text —the text that should appear in the tooltip for the action, and action — the function that should be run when a user clicks on the action text.

Any and all tooltip actions should be set prior to calling the chart's draw() method. Extended description .

Return Type: none
setSelection()

Selects the specified chart entities. Cancels any previous selection. Selectable entities are steps, legend entries and categories. A step corresponds to a cell in the data table, a legend entry to a column (row index is null), and a category to a row (column index is null). For this chart, only one entity can be selected at a time. Extended description .

Return Type: none
clearChart()

Clears the chart, and releases all of its allocated resources.

Return Type: none

Events

For more information on how to use these events, see Basic Interactivity , Handling Events , and Firing Events .

Name
animationfinish

Fired when transition animation is complete.

Properties: none
click

Fired when the user clicks inside the chart. Can be used to identify when the title, data elements, legend entries, axes, gridlines, or labels are clicked.

Properties: targetID
error

Fired when an error occurs when attempting to render the chart.

Properties: id, message
legendpagination

Fired when the user clicks legend pagination arrows. Passes back the current legend zero-based page index and the total number of pages.

Properties: currentPageIndex, totalPages
onmouseover

Fired when the user mouses over a visual entity. Passes back the row and column indices of the corresponding data table element.

Properties: row, column
onmouseout

Fired when the user mouses away from a visual entity. Passes back the row and column indices of the corresponding data table element.

Properties: row, column
ready

The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the draw method, and call them only after the event was fired.

Properties: none
select

Fired when the user clicks a visual entity. To learn what has been selected, call getSelection() .

Properties: none

Data Policy

All code and data are processed and rendered in the browser. No data is sent to any server.