ভিজ্যুয়ালাইজেশন: পাই চার্ট (পুরানো সংস্করণ)

অবচয়

এই ভিজ্যুয়ালাইজেশন একটি নতুন সংস্করণ দিয়ে প্রতিস্থাপিত হয়েছে; পরিবর্তে যে ব্যবহার করুন. সহজে স্থানান্তরের জন্য, অনুগ্রহ করে রিলিজ নোট পৃষ্ঠা দেখুন।

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

ওভারভিউ

একটি পাই চার্ট যা ব্রাউজারের মধ্যে SVG বা VML ব্যবহার করে রেন্ডার করা হয়। স্লাইসগুলিতে ক্লিক করার সময় টিপস প্রদর্শন করে। লিজেন্ড এন্ট্রিতে ক্লিক করার সময় স্লাইস অ্যানিমেট করে।

দ্বারা: Google

উদাহরণ

ভিজ্যুয়ালাইজেশন খেলার মাঠে এটি নিজেই কোড করুন

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["piechart"]});
      google.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.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

লোড হচ্ছে

google.load প্যাকেজের নাম "piechart"

  google.load("visualization", "1", {packages: ["piechart"]});

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

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

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

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

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

নাম টাইপ ডিফল্ট বর্ণনা
পেছনের রং স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ চার্টের প্রধান এলাকার জন্য পটভূমির রঙ। নিম্নলিখিত বিকল্পগুলির মধ্যে একটি:
  • HTML দ্বারা সমর্থিত রঙ সহ একটি স্ট্রিং, উদাহরণস্বরূপ 'লাল' বা '#00cc00', বা
  • নিম্নলিখিত বৈশিষ্ট্য সহ একটি বস্তুর একটি বিবরণ:
    • stroke - একটি HTML রঙের স্ট্রিং যা চার্টের বর্ডার রঙের বর্ণনা দেয়।
    • fill করুন - একটি HTML রঙের স্ট্রিং যা চার্টের পটভূমির রঙ বর্ণনা করে।
    • strokeSize - চার্ট সীমানার বেধ, পিক্সেলে বর্ণনা করে এমন একটি সংখ্যা। কোন সীমানা ছাড়া, এটি 0 এ সেট করা যেতে পারে।
      উদাহরণ : {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1} ।
সীমান্ত রঙ স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ চার্ট উপাদানের চারপাশে সীমানা। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
রং স্ট্রিং বা বস্তুর অ্যারে ডিফল্ট রং

রঙের একটি অ্যারে, যেখানে প্রতিটি উপাদান একটি সিরিজের রঙ নির্দিষ্ট করে। প্রতিটি সিরিজের জন্য আপনাকে একটি অ্যারে উপাদান নির্দিষ্ট করতে হবে।

  • is3D=false হলে, এটি HTML রঙের একটি অ্যারে। উদাহরণ: রং:['#00FF00', 'কমলা']
  • is3D=true হলে, এটি হয় HTML রঙের একটি অ্যারে, অথবা এই ধরনের বস্তু: {color: face_color , darker: shade_color } যেখানে color হল উপাদানটির মুখের রঙ, এবং darker হল ছায়ার রঙ। যাইহোক, যদি আপনি একটি 3D বস্তুর জন্য একটি HTML রঙ নির্দিষ্ট করেন, তাহলে মুখ এবং ছায়া একই রঙ হবে এবং 3D প্রভাব হ্রাস পাবে। উদাহরণ: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
সক্রিয় টুলটিপ বুলিয়ান সত্য যদি সত্যে সেট করা হয়, ব্যবহারকারী যখন একটি স্লাইসে ক্লিক করে তখন টুলটিপ দেখানো হয়।
ফোকাস বর্ডার কালার স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ চার্ট উপাদানগুলির চারপাশে সীমানা যা ফোকাসে রয়েছে (মাউস দ্বারা নির্দেশিত)। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
উচ্চতা সংখ্যা পাত্রের উচ্চতা চার্টের উচ্চতা পিক্সেলে।
is3D বুলিয়ান মিথ্যা সত্য হিসাবে সেট করা হলে, একটি ত্রিমাত্রিক চার্ট প্রদর্শন করে।
কিংবদন্তি স্ট্রিং 'ঠিক' কিংবদন্তির অবস্থান এবং প্রকার। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:
  • 'right' - চার্টের ডানদিকে।
  • 'বাম' - চার্টের বাম দিকে।
  • 'শীর্ষ' - চার্টের উপরে।
  • 'নিচে' - চার্টের নিচে।
  • 'লেবেল' - স্লাইসের কাছাকাছি লেবেল।
  • 'কোনোটি' - কোনো কিংবদন্তি প্রদর্শিত হয় না।
লেজেন্ড ব্যাকগ্রাউন্ড কালার স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ চার্টের কিংবদন্তি এলাকার জন্য পটভূমির রঙ। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
legendFontSize সংখ্যা স্বয়ংক্রিয় কিংবদন্তি ফন্টের আকার, পিক্সেলে।
legendTextColor স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ কিংবদন্তি পাঠ্যের রঙ। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
pieJoinAngle সংখ্যা 0 এই কোণের চেয়ে কম যে কোনো স্লাইস "অন্যান্য" লেবেলযুক্ত একটি জেনেরিক স্লাইসে একত্রিত হবে।
pie MinimalAngle সংখ্যা 0

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

স্লাইসগুলির আকার গণনা করতে, পাইজয়ন অ্যাঙ্গেলের চেয়ে ছোট কোণগুলিকে "অন্যান্য" স্লাইসের সাথে যুক্ত করা হয় এবং তারপরে পাই-মিনিমাল অ্যাঙ্গেলের চেয়ে বড় সমস্ত স্লাইস আঁকা হয়

শিরোনাম স্ট্রিং কোনো শিরোনাম নেই চার্টের উপরে দেখানোর জন্য পাঠ্য।
শিরোনামের রঙ স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ চার্টের শিরোনামের রঙ। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
শিরোনাম ফন্ট সাইজ সংখ্যা স্বয়ংক্রিয় চার্টের শিরোনামের জন্য ফন্টের আকার, পিক্সেলে।

টুলটিপফন্ট সাইজ		 সংখ্যা 11 টুলটিপ পাঠ্যের ফন্টের আকার। নির্দিষ্ট ফন্টে টেক্সট ধরে রাখার জন্য টুলটিপটি খুব ছোট হলে এটি হ্রাস হতে পারে।
টুলটিপ উচ্চতা
 সংখ্যা 60 টুলটিপের উচ্চতা, পিক্সেলে। টুলটিপ উচ্চতা স্থির করা হয়; পাঠ্যের দৈর্ঘ্য বা ফন্টের আকারের সাথে মানানসই হওয়ার জন্য এটি কখনই বৃদ্ধি বা সঙ্কুচিত হবে না। কিন্তু চার্টের উচ্চতা 1/3-এর বেশি কিছু ক্রপ করা হবে।
টুলটিপ প্রস্থ সংখ্যা 120 টুলটিপের প্রস্থ, পিক্সেলে। টুলটিপ প্রস্থ স্থির করা হয়; পাঠ্যের দৈর্ঘ্য বা ফন্টের আকারের সাথে মানানসই হওয়ার জন্য এটি কখনই বৃদ্ধি বা সঙ্কুচিত হবে না। কিন্তু চার্টের প্রস্থের চেয়ে বড় কিছু ক্রপ করা হবে।
প্রস্থ সংখ্যা পাত্রের প্রস্থ চার্টের প্রস্থ পিক্সেলে।

পদ্ধতি

পদ্ধতি রিটার্ন টাইপ বর্ণনা
draw(data, options) কোনটি চার্ট আঁকে।
getSelection() নির্বাচন উপাদানের অ্যারে স্ট্যান্ডার্ড getSelection() বাস্তবায়ন। নির্বাচিত উপাদান হল সারি এবং ঘর উপাদান। একাধিক সারি এবং/অথবা একটি একক কক্ষ ব্যবহারকারী দ্বারা একবারে নির্বাচন করা যেতে পারে।
setSelection() কোনটি স্ট্যান্ডার্ড setSelection() বাস্তবায়ন, কিন্তু একাধিক সারি এবং/অথবা একটি কক্ষ নির্বাচন সমর্থন করে। প্রতিটি নির্বাচন এন্ট্রিকে সারি বা ঘর নির্বাচন হিসাবে বিবেচনা করে।

ঘটনা

নাম বর্ণনা বৈশিষ্ট্য
onmouseover ব্যবহারকারী যখন একটি স্লাইসের উপর মাউস দেয় এবং সংশ্লিষ্ট কক্ষের সারি এবং কলাম সূচীতে পাস করে তখন বহিস্কার হয়। সারি কলাম
onmouseout ব্যবহারকারী যখন একটি স্লাইস থেকে দূরে মাউস করে, এবং সংশ্লিষ্ট কক্ষের সারি এবং কলাম সূচীতে পাস করে তখন বহিস্কার করা হয়। সারি কলাম
ready চার্টটি বাহ্যিক পদ্ধতি কলের জন্য প্রস্তুত। আপনি যদি চার্টের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে draw পদ্ধতিতে কল করার আগে আপনাকে এই ইভেন্টের জন্য একজন শ্রোতা সেট আপ করতে হবে এবং ইভেন্টটি বরখাস্ত হওয়ার পরেই তাদের কল করতে হবে কোনোটিই নয়
select

ব্যবহারকারী একটি স্লাইস বা কিংবদন্তি ক্লিক করলে বহিস্কার করা হয়। যখন একটি স্লাইস নির্বাচন করা হয়, ডেটা টেবিলের সংশ্লিষ্ট ঘরটি নির্বাচন করা হয়; যখন একটি কিংবদন্তি নির্বাচন করা হয়, ডেটা টেবিলের সংশ্লিষ্ট কলামটি নির্বাচন করা হয়। কি নির্বাচন করা হয়েছে তা জানতে, getSelection() কল করুন।

দ্রষ্টব্য: একটি স্লাইস ক্লিক করা একটি ঘর নির্বাচন এবং অনির্বাচনের মধ্যে টগল করে না; একটি স্লাইস ক্লিক করা সর্বদা এটি নির্বাচন করে। একটি কিংবদন্তি এন্ট্রিতে ক্লিক করা, অন্যদিকে, সারি নির্বাচন এবং অনির্বাচনের মধ্যে টগল করে।

 কোনোটিই নয়

ডেটা নীতি

সমস্ত কোড এবং ডেটা ব্রাউজারে প্রসেস এবং রেন্ডার করা হয়। কোনো সার্ভারে কোনো ডেটা পাঠানো হয় না।