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

গুরুত্বপূর্ণ: 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':['imagepiechart']}); </script> <div id="chart_div" style="width: 400px; height: 240px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div')); chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'}); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagepiechart']}); </script> <div id="chart_div" style="width: 400px; height: 240px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div')); chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'}); }
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagepiechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',        11],
          ['Eat',         2],
          ['Commute',     2],
          ['Watch TV',    2],
          ['Sleep',       7]
        ]);

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

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

লোড হচ্ছে

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

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

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

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

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

দুই কলাম। প্রথম কলামটি একটি স্ট্রিং হওয়া উচিত এবং এতে স্লাইস লেবেল থাকা উচিত। দ্বিতীয় কলামটি একটি সংখ্যা হওয়া উচিত এবং এতে স্লাইস মান থাকতে হবে।

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

ভিজ্যুয়ালাইজেশনের draw() পদ্ধতিতে পাস করা অপশন অবজেক্টের অংশ হিসাবে আপনি নিম্নলিখিত বিকল্পগুলি নির্দিষ্ট করতে পারেন।

নাম টাইপ ডিফল্ট বর্ণনা
পেছনের রং স্ট্রিং '#FFFFFF' (সাদা) চার্ট API রঙ বিন্যাসে চার্টের জন্য পটভূমির রঙ।
রঙ স্ট্রিং অটো সমস্ত সিরিজের জন্য ব্যবহার করার জন্য একটি বেস রঙ নির্দিষ্ট করে; প্রতিটি সিরিজ নির্দিষ্ট রঙের একটি গ্রেডেশন হবে। রঙগুলি চার্ট API রঙ বিন্যাসে নির্দিষ্ট করা হয়েছে। colors নির্দিষ্ট করা থাকলে উপেক্ষা করা হয়।
রং অ্যারে<string> অটো প্রতিটি ডেটা সিরিজে নির্দিষ্ট রং বরাদ্দ করতে এটি ব্যবহার করুন। রঙগুলি চার্ট API রঙ বিন্যাসে নির্দিষ্ট করা হয়েছে। ডাটা কলাম i এর জন্য কালার i ব্যবহার করা হয়, যদি রঙের চেয়ে বেশি ডাটা কলাম থাকে তাহলে শুরুতে মোড়ানো। যদি একটি একক রঙের বৈচিত্র সব সিরিজের জন্য গ্রহণযোগ্য হয়, তবে পরিবর্তে color বিকল্পটি ব্যবহার করুন।
ইভেন্ট সক্রিয় করুন বুলিয়ান মিথ্যা চার্টগুলি ব্যবহারকারীর দ্বারা ট্রিগার করা ইভেন্টগুলি যেমন ক্লিক বা মাউস ওভার ছুঁড়ে দেয়। শুধুমাত্র নির্দিষ্ট চার্ট ধরনের জন্য সমর্থিত. নীচে ইভেন্ট দেখুন.
উচ্চতা সংখ্যা পাত্রের উচ্চতা চার্টের উচ্চতা পিক্সেলে।
is3D বুলিয়ান মিথ্যা সত্য হিসাবে সেট করা হলে, একটি ত্রিমাত্রিক চার্ট প্রদর্শন করে।
লেবেল স্ট্রিং 'কেউ না'

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

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

পদ্ধতি

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

ঘটনা

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

ডেটা নীতি

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