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

অবচয়

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

  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:["barchart"]});
      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.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

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

লোড হচ্ছে

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

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

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

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

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

টেবিলের প্রতিটি সারি সংলগ্ন বারগুলির একটি গ্রুপকে প্রতিনিধিত্ব করে।

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

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

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

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

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

  • 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 স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ কিংবদন্তি পাঠ্যের রঙ। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
লগস্কেল বুলিয়ান মিথ্যা সত্য হলে, মূল অক্ষটি লগারিদমিকভাবে স্কেল করা উচিত।
সর্বোচ্চ সংখ্যা স্বয়ংক্রিয় সর্বোচ্চ Y অক্ষ গ্রিড লাইন নির্দিষ্ট করে। প্রকৃত গ্রিড লাইন দুটি মানের বড় হবে: সর্বোচ্চ বিকল্প মান, বা সর্বোচ্চ ডেটা মান, পরবর্তী উচ্চতর গ্রিড চিহ্ন পর্যন্ত বৃত্তাকার।
মিনিট সংখ্যা স্বয়ংক্রিয় সর্বনিম্ন Y অক্ষ গ্রিড লাইন নির্দিষ্ট করে। প্রকৃত গ্রিড লাইনটি দুটি মানের নিম্ন হবে: ন্যূনতম বিকল্প মান, বা সর্বনিম্ন ডেটা মান, পরবর্তী নিম্ন গ্রিড চিহ্নে বৃত্তাকার।
বিপরীত অক্ষ বুলিয়ান সত্য সত্য (ডিফল্ট) হিসাবে সেট করা হলে, শীর্ষ-নিচে বিভাগগুলি আঁকবে। মিথ্যা সেট করা হলে, নীচে-উপরে বারগুলি আঁকবে৷
বিভাগ প্রদর্শন করুন বুলিয়ান সত্য সত্য হলে, বিভাগ লেবেল দেখাবে। মিথ্যা হলে হবে না।
শিরোনাম স্ট্রিং কোনো শিরোনাম নেই চার্টের উপরে দেখানোর জন্য পাঠ্য।
titleX স্ট্রিং কোনো শিরোনাম নেই অনুভূমিক অক্ষের নীচে প্রদর্শনের জন্য পাঠ্য।
titleY স্ট্রিং কোনো শিরোনাম নেই উল্লম্ব অক্ষ দ্বারা প্রদর্শনের জন্য পাঠ্য।
শিরোনামের রঙ স্ট্রিং বা অবজেক্ট ডিফল্ট রঙ চার্টের শিরোনামের রঙ। সম্ভাব্য মানগুলি ব্যাকগ্রাউন্ড কালার কনফিগারেশন বিকল্পের মতো।
শিরোনাম ফন্ট সাইজ সংখ্যা স্বয়ংক্রিয় চার্টের শিরোনামের জন্য ফন্টের আকার, পিক্সেলে।

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

পদ্ধতি

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

ঘটনা

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

ডেটা নীতি

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