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

অবচয়

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

ওভারভিউ

একটি এলাকা চার্ট যা ব্রাউজারের মধ্যে 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:["areachart"]});
      google.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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

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

লোড হচ্ছে

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

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

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

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

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

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

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

নাম টাইপ ডিফল্ট বর্ণনা
axiscolor স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ অক্ষের রঙ। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
অক্ষ ব্যাকগ্রাউন্ড কালার স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ অক্ষের পটভূমির চারপাশে সীমানা। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
axisFontSize সংখ্যা স্বয়ংক্রিয় চার্ট অক্ষ পাঠের হরফের আকার, পিক্সেলে।
পেছনের রং স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ চার্টের প্রধান এলাকার জন্য পটভূমির রঙ। নিম্নলিখিত বিকল্পগুলির মধ্যে একটি হতে পারে:
  • HTML দ্বারা সমর্থিত রঙ সহ একটি স্ট্রিং, উদাহরণস্বরূপ 'লাল' বা '#00cc00'
  • stroke fill এবং স্ট্রোক strokeSize বৈশিষ্ট্য সহ একটি বস্তু। stroke এবং fill একটি রঙের সাথে একটি স্ট্রিং হওয়া উচিত। স্ট্রোক সাইজ একটি সংখ্যা। যেমন: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1} । স্ট্রোক ছাড়া শুধু ফিল ব্যবহার করতে, stroke:null, strokeSize: 0 ব্যবহার করুন।
সীমান্ত রঙ স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ চার্ট উপাদানের চারপাশে সীমানা। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
রং স্ট্রিং এর অ্যারে ডিফল্ট রং চার্ট উপাদানের জন্য ব্যবহার করা রং. স্ট্রিং একটি অ্যারে. প্রতিটি উপাদান হল একটি স্ট্রিং যা HTML দ্বারা সমর্থিত একটি রঙ, উদাহরণস্বরূপ 'লাল' বা '#00cc00'।
সক্রিয় টুলটিপ বুলিয়ান সত্য সত্য হিসাবে সেট করা হলে, ব্যবহারকারী যখন ডেটা পয়েন্টে ক্লিক করে তখন টুলটিপগুলি দেখানো হয়।
ফোকাস বর্ডার কালার স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ চার্ট উপাদানগুলির চারপাশে সীমানা যা ফোকাসে রয়েছে (মাউস দ্বারা নির্দেশিত)। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
উচ্চতা সংখ্যা পাত্রের উচ্চতা চার্টের উচ্চতা পিক্সেলে।
স্ট্যাক করা বুলিয়ান মিথ্যা সত্যে সেট করা হলে, লাইনের মানগুলি স্ট্যাক করা হয় (সঞ্চিত)।
কিংবদন্তি স্ট্রিং 'ঠিক' কিংবদন্তির অবস্থান এবং প্রকার। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:
  • 'right' - চার্টের ডানদিকে।
  • 'বাম' - চার্টের বাম দিকে।
  • 'শীর্ষ' - চার্টের উপরে।
  • 'নিচে' - চার্টের নিচে।
  • 'কোনোটি' - কোনো কিংবদন্তি প্রদর্শিত হয় না।
লেজেন্ড ব্যাকগ্রাউন্ড কালার স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ চার্টের কিংবদন্তি এলাকার জন্য পটভূমির রঙ। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
legendFontSize সংখ্যা স্বয়ংক্রিয় কিংবদন্তি ফন্টের আকার, পিক্সেলে।
legendTextColor স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ কিংবদন্তি পাঠ্যের রঙ। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
লাইন সাইজ সংখ্যা 2 লাইনের প্রস্থ পিক্সেলে। সমস্ত লাইন লুকানোর জন্য শূন্য ব্যবহার করুন এবং শুধুমাত্র পয়েন্টগুলি দেখান।
লগস্কেল বুলিয়ান মিথ্যা সত্য হলে, মূল অক্ষটি লগারিদমিকভাবে স্কেল করা উচিত।
সর্বোচ্চ সংখ্যা স্বয়ংক্রিয় সর্বোচ্চ Y অক্ষ গ্রিড লাইন নির্দিষ্ট করে। প্রকৃত গ্রিড লাইন দুটি মানের বড় হবে: সর্বোচ্চ বিকল্প মান, বা সর্বোচ্চ ডেটা মান, পরবর্তী উচ্চতর গ্রিড চিহ্ন পর্যন্ত বৃত্তাকার।
মিনিট সংখ্যা স্বয়ংক্রিয় সর্বনিম্ন Y অক্ষ গ্রিড লাইন নির্দিষ্ট করে। প্রকৃত গ্রিড লাইনটি দুটি মানের নিম্ন হবে: ন্যূনতম বিকল্প মান, বা সর্বনিম্ন ডেটা মান, পরবর্তী নিম্ন গ্রিড চিহ্নে বৃত্তাকার।
পয়েন্ট সাইজ সংখ্যা 3 পিক্সেলে প্রদর্শিত পয়েন্টের আকার। সমস্ত পয়েন্ট লুকানোর জন্য শূন্য ব্যবহার করুন।
বিপরীত অক্ষ বুলিয়ান মিথ্যা সত্যে সেট করা হলে, ডান থেকে বামে বিভাগগুলি আঁকবে। ডিফল্ট হল বাম থেকে ডানে আঁকা।
বিভাগ প্রদর্শন করুন বুলিয়ান সত্য সত্য হলে, বিভাগ লেবেল দেখাবে। মিথ্যা হলে হবে না।
শিরোনাম স্ট্রিং কোনো শিরোনাম নেই চার্টের উপরে দেখানোর জন্য পাঠ্য।
titleX স্ট্রিং কোনো শিরোনাম নেই অনুভূমিক অক্ষের নীচে প্রদর্শনের জন্য পাঠ্য।
titleY স্ট্রিং কোনো শিরোনাম নেই উল্লম্ব অক্ষ দ্বারা প্রদর্শনের জন্য পাঠ্য।
শিরোনামের রঙ স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ চার্টের শিরোনামের রঙ। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
শিরোনাম ফন্ট সাইজ সংখ্যা স্বয়ংক্রিয় চার্টের শিরোনামের জন্য ফন্টের আকার, পিক্সেলে।

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

পদ্ধতি

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

ঘটনা

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

ডেটা নীতি

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