ভিজ্যুয়ালাইজেশন: এরিয়া চার্ট (ছবি)

গুরুত্বপূর্ণ: Google চার্ট টুলের ইমেজ চার্টের অংশটি 20 এপ্রিল, 2012 থেকে আনুষ্ঠানিকভাবে অবমুক্ত করা হয়েছে। এটি আমাদের অবচয় নীতি অনুযায়ী কাজ করতে থাকবে।

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

ওভারভিউ

একটি এলাকা চার্ট যা Google চার্ট API ব্যবহার করে একটি চিত্র হিসাবে রেন্ডার করা হয়।

উদাহরণ

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imageareachart']}); </script> <div id="chart_div" style="width: 400px; height: 240px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'}); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imageareachart']}); </script> <div id="chart_div" style="width: 400px; height: 240px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var chart = new google.visualization.ImageAreaChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'}); }
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imageareachart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

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

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

লোড হচ্ছে

google.charts.load প্যাকেজের নাম হল "imageareachart"

  google.charts.load('current', {packages: ['imageareachart']});

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

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

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

প্রতিটি কলাম চার্টে একটি লাইন প্রতিনিধিত্ব করে; প্রতিটি এন্ট্রি একই X অক্ষ বিন্দুতে Y অক্ষের মান, এবং ভিজ্যুয়ালাইজেশন তাদের একটি সরল রেখার সাথে সংযুক্ত করে, তারপর লাইনের নীচের অংশে পূরণ করে।

ডেটা কলাম দ্বারা প্রক্রিয়া করা হয়, কলাম শূন্য থেকে শুরু হয় এবং বৃদ্ধি পায়। আপনাকে প্রথমে সর্বোচ্চ লাইন লিখতে হবে, তারপর নিচের লাইনগুলি লিখতে হবে, কারণ আপনি যদি প্রথমে একটি নীচের লাইনটি আঁকেন, তাহলে একটি উচ্চ রেখাটি আঁকবে এবং নিচের লাইনগুলিকে আড়াল করবে। তাই কলাম 1-এ কলাম 2 থেকে উচ্চতর পয়েন্ট, কলাম 3 থেকে কলাম 2 বেশি, ইত্যাদি করার চেষ্টা করুন। আপনার যদি বাম কলামের চেয়ে ডান কলামে এক বা দুটি পয়েন্ট বেশি থাকে তবে এটি নীচের লাইনটিকে আংশিকভাবে অস্পষ্ট করতে পারে, তবে এটি এখনও দৃশ্যমান হওয়া উচিত।

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

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

নাম টাইপ ডিফল্ট বর্ণনা
পেছনের রং স্ট্রিং '#FFFFFF' (সাদা) চার্ট API রঙ বিন্যাসে চার্টের জন্য পটভূমির রঙ।
রং অ্যারে<string> অটো প্রতিটি ডেটা সিরিজে নির্দিষ্ট রং বরাদ্দ করতে এটি ব্যবহার করুন। রঙগুলি চার্ট API রঙ বিন্যাসে নির্দিষ্ট করা হয়েছে। ডাটা কলাম i এর জন্য কালার i ব্যবহার করা হয়, যদি রঙের চেয়ে বেশি ডাটা কলাম থাকে তাহলে শুরুতে মোড়ানো। যদি একটি একক রঙের বৈচিত্র সব সিরিজের জন্য গ্রহণযোগ্য হয়, তবে পরিবর্তে color বিকল্পটি ব্যবহার করুন।
ইভেন্ট সক্রিয় করুন বুলিয়ান মিথ্যা চার্টগুলি ব্যবহারকারীর দ্বারা ট্রিগার করা ইভেন্টগুলি যেমন ক্লিক বা মাউস ওভার ছুঁড়ে দেয়। শুধুমাত্র নির্দিষ্ট চার্ট ধরনের জন্য সমর্থিত. নীচে ইভেন্ট দেখুন.
উচ্চতা সংখ্যা পাত্রের উচ্চতা চার্টের উচ্চতা পিক্সেলে।
কিংবদন্তি স্ট্রিং 'ঠিক' কিংবদন্তির অবস্থান এবং প্রকার। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:
  • 'right' - চার্টের ডানদিকে।
  • 'বাম' - চার্টের বাম দিকে।
  • 'শীর্ষ' - চার্টের উপরে।
  • 'নিচে' - চার্টের নিচে।
  • 'কোনোটি' - কোনো কিংবদন্তি প্রদর্শিত হয় না।
সর্বোচ্চ সংখ্যা স্বয়ংক্রিয় Y অক্ষে দেখানো সর্বাধিক মান৷
মিনিট সংখ্যা স্বয়ংক্রিয় Y অক্ষে দেখানোর জন্য সর্বনিম্ন মান।
ক্যাটাগরি লেবেল দেখান বুলিয়ান সত্য মিথ্যাতে সেট করা থাকলে, বিভাগগুলির লেবেলগুলি সরিয়ে দেয় (X অক্ষের লেবেলগুলি)৷
শোভ্যালু লেবেল বুলিয়ান সত্য মিথ্যাতে সেট করা থাকলে, মানগুলির লেবেলগুলি সরিয়ে দেয় (Y অক্ষের লেবেলগুলি)৷
শিরোনাম স্ট্রিং কোনো শিরোনাম নেই চার্টের উপরে দেখানোর জন্য পাঠ্য।
valueLabelsInterval সংখ্যা অটো যে ব্যবধানে মান অক্ষ লেবেল দেখাতে হবে৷ উদাহরণস্বরূপ, যদি min 0 হয়, max 100 হয় এবং মান লেবেল valueLabelsInterval 20 হয়, চার্টটি (0, 20, 40, 60, 80 100) এ অক্ষ লেবেল দেখাবে।
প্রস্থ সংখ্যা পাত্রের প্রস্থ চার্টের প্রস্থ পিক্সেলে।

পদ্ধতি

পদ্ধতি রিটার্ন টাইপ বর্ণনা
draw(data, options) কোনটি চার্ট আঁকে।

ঘটনা

জেনেরিক ইমেজ চার্ট পৃষ্ঠায় বর্ণিত ঘটনাগুলি শুনতে আপনি নিবন্ধন করতে পারেন।

ডেটা নীতি

অনুগ্রহ করে চার্ট API লগিং নীতি পড়ুন।