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

গুরুত্বপূর্ণ: 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':['imagebarchart']}); </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.ImageBarChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagebarchart']}); </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.ImageBarChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, min: 0}); }
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagebarchart"]});
      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.ImageBarChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

লোড হচ্ছে

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

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

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

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

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

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

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

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

পদ্ধতি

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

ঘটনা

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

ডেটা নীতি

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