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

গুরুত্বপূর্ণ: Google চার্ট টুলের ইমেজ চার্টের অংশটি 20 এপ্রিল, 2012 থেকে আনুষ্ঠানিকভাবে অবমুক্ত করা হয়েছে। এটি আমাদের অবচয় নীতি অনুযায়ী কাজ করতে থাকবে।

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

ওভারভিউ

একক বা একাধিক স্পার্কলাইন যা Google চার্ট API ব্যবহার করে চিত্রের সাথে রেন্ডার করা হয়। ছবিগুলো একটি HTML টেবিলে রয়েছে।

উদাহরণ

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagesparkline']}); </script> <div id="chart_div" style="width: 120px; height: 40px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); } <span class="notranslate"><input type='submit' value="JSFiddle এ এটি নিজেই কোড করুন" class='button'/><input type='hidden' name='title' value='Image Spark Line Chart Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagesparkline']}); </script> <div id="chart_div" style="width: 120px; height: 40px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Image Spark Line.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span> <span class="notranslate"><input type='submit' value="JSFiddle এ এটি নিজেই কোড করুন" class='button'/><input type='hidden' name='title' value='Image Spark Line Chart Example'/> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagesparkline']}); </script> <div id="chart_div" style="width: 120px; height: 40px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); }<input type='hidden' name='css' value=''/><input type='hidden' name='description' value='An example of a Google Image Spark Line.'/><input type='hidden' name='dtd' value='html 5'/><input type='hidden' name='wrap' value='b'/></span> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['imagesparkline']}); </script> <div id="chart_div" style="width: 120px; height: 40px;"></div> google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Revenue', 'Licenses'], [435, 132], [438, 131], [512, 137], [460, 142], [491, 140], [487, 139], [552, 147], [511, 146], [505, 151], [509, 149] ]); var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div')); chart.draw(data, {width: 120, height: 40, showAxisLines: false, showValueLabels: false, labelPosition: 'left'}); }

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagesparkline"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

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

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

লোড হচ্ছে

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

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

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

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

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

যেকোন সংখ্যক কলাম। সমস্ত কলাম সংখ্যা হতে হবে. প্রতিটি কলাম একটি একক স্পার্কলাইন হিসাবে প্রদর্শিত হয়।

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

নাম	টাইপ	ডিফল্ট	বর্ণনা
রঙ	স্ট্রিং		সমস্ত চার্টের জন্য ব্যবহার করার জন্য একটি রঙ নির্দিষ্ট করে। #rrggbb বিন্যাসে একটি স্ট্রিং। যেমন: '#00cc00'। শুধুমাত্র colors বিকল্প নির্দিষ্ট না হলেই ব্যবহৃত হয়।
রং	স্ট্রিং এর অ্যারে	ডিফল্ট রং	ডাটা কলামের জন্য ব্যবহার করা রং। স্ট্রিংয়ের একটি অ্যারে যেখানে প্রতিটি উপাদান #rrggbb ফরম্যাটে একটি স্ট্রিং। যেমন: '#00cc00'। ডাটা কলাম i এর জন্য কালার i ব্যবহার করা হয়। যদি রঙের সংখ্যা কলামের সংখ্যার চেয়ে ছোট হয়, তাহলে রঙ নির্বাচন চারপাশে মোড়ানো হবে।
পূরণ	বুলিয়ান	মিথ্যা	সত্য হলে, লাইনের নীচের অংশটি রঙে পূরণ করবে।
উচ্চতা	সংখ্যা	পাত্রের উচ্চতা	ছবির উচ্চতা, পিক্সেলে।
লেবেল অবস্থান	স্ট্রিং	কোনটি	লেবেলের অবস্থান। সমর্থিত মানগুলি হল 'কোনোটি', 'বাম', 'ডান'।
সর্বোচ্চ	সংখ্যার অ্যারে	প্রতিটি স্পার্কলাইনের সর্বোচ্চ ডেটা মান	প্রতিটি স্পার্কলাইনের ডেটা মান পরিসরের সর্বোচ্চ মান। অ্যারের সূচী অবশ্যই DataTable এর কলাম সূচীর সাথে মিলবে। যদি সমস্ত মান শূন্য হয় তবে এটি সিরিজের সর্বাধিক মান হবে।
মিনিট	সংখ্যার অ্যারে	প্রতিটি স্পার্কলাইনের ন্যূনতম ডেটা মান	প্রতিটি স্পার্কলাইনের ডেটা মান পরিসরের সর্বনিম্ন মান। অ্যারের সূচী অবশ্যই DataTable এর কলাম সূচীর সাথে মিলবে। যদি সমস্ত মান শূন্য হয় তবে এটি সিরিজের সর্বনিম্ন মান হবে।
এক্সিসলাইনস দেখান	বুলিয়ান	সত্য	সত্য হলে, অক্ষরেখা দেখানো হয়। মিথ্যা হলে, সেগুলি নয়, এবং showValueLabels-এর জন্য ডিফল্ট মিথ্যা।
শোভ্যালু লেবেল	বুলিয়ান	true, showAxisLines মিথ্যা না হলে।	সত্য হলে, মান অক্ষ লেবেল দেখানো হয়।
শিরোনাম	স্ট্রিং এর অ্যারে	কোন শিরোনাম প্রদর্শিত হয় না	প্রতিটি স্পার্কলাইনের জন্য ব্যবহার করার জন্য শিরোনাম।
প্রস্থ	সংখ্যা	পাত্রের প্রস্থ	চার্টের প্রস্থ, পিক্সেলে।
বিন্যাস	স্ট্রিং	'v'	উল্লম্ব বা অনুভূমিক বিন্যাস: উল্লম্বের জন্য 'v', অনুভূমিকের জন্য 'h'।

পদ্ধতি

পদ্ধতি	রিটার্ন টাইপ	বর্ণনা
draw(data, options)	কোনটি	চার্ট আঁকে।
getSelection()	নির্বাচন উপাদানের অ্যারে	অবজেক্টের অ্যারে হিসাবে নির্বাচিত চার্টের সূচী প্রদান করে। প্রতিটি বস্তুর একটি নির্বাচিত স্পার্কলাইনের কলাম নম্বর ধারণকারী একটি কলাম বৈশিষ্ট্য আছে। একাধিক নির্বাচিত কলাম ফেরত দিতে পারে।
setSelection(selection)	কোনটি	নির্দিষ্ট করা স্পার্কলাইন নির্বাচন করে, এবং নির্দিষ্ট করা হয়নি এমন কোনো স্পার্কলাইন নির্বাচন না করে। নির্বাচন হল বস্তুর একটি বিন্যাস, প্রতিটিতে একটি সাংখ্যিক column বৈশিষ্ট্য রয়েছে, যা নির্বাচিত স্পার্কলাইনের সূচক। আরো তথ্যের জন্য setSelection() দেখুন।

ঘটনা

নাম	বর্ণনা	বৈশিষ্ট্য
নির্বাচন করুন	স্ট্যান্ডার্ড নির্বাচন ইভেন্ট।	কোনোটিই নয়

ডেটা নীতি

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