বার চার্ট

ওভারভিউ

Google বার চার্টগুলি ব্রাউজারে SVG বা VML ব্যবহার করে রেন্ডার করা হয়, যেটি ব্যবহারকারীর ব্রাউজারের জন্য উপযুক্ত। সমস্ত Google চার্টের মতো, বার চার্টগুলি টুলটিপগুলি প্রদর্শন করে যখন ব্যবহারকারী ডেটার উপর ঘোরাফেরা করে। এই চার্টের একটি উল্লম্ব সংস্করণের জন্য, কলাম চার্টটি দেখুন।

উদাহরণ

রং বার

চারটি মূল্যবান ধাতুর ঘনত্ব চার্ট করা যাক:

উপরে, সমস্ত রং ডিফল্ট নীল। কারণ তারা সবাই একই সিরিজের অংশ; যদি দ্বিতীয় সিরিজ থাকত, তাহলে সেটা লাল রঙের হতো। আমরা শৈলী ভূমিকা সঙ্গে এই রং কাস্টমাইজ করতে পারেন:

রং বেছে নেওয়ার তিনটি ভিন্ন উপায় আছে, এবং আমাদের ডেটা টেবিল সেগুলি সবগুলিকে দেখায়: RGB মান, ইংরেজি রঙের নাম এবং একটি CSS-এর মতো ঘোষণা:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

বার শৈলী

শৈলীর ভূমিকা আপনাকে CSS-এর মতো ঘোষণার সাথে বার উপস্থিতির বিভিন্ন দিক নিয়ন্ত্রণ করতে দেয়:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

আমরা সুপারিশ করি না যে আপনি একটি চার্টের মধ্যে খুব অবাধে শৈলীগুলি মিশ্রিত করুন—একটি শৈলী বেছে নিন এবং এটির সাথে লেগে থাকুন—কিন্তু সমস্ত শৈলী বৈশিষ্ট্যগুলি প্রদর্শন করতে, এখানে একটি নমুনা দেওয়া হল:

প্রথম দুটি বার প্রতিটি একটি নির্দিষ্ট color ব্যবহার করে (প্রথমটি একটি ইংরেজি নাম সহ, দ্বিতীয়টি একটি RGB মান সহ)। কোনো opacity বেছে নেওয়া হয়নি, তাই ডিফল্ট 1.0 (সম্পূর্ণ অস্বচ্ছ) ব্যবহার করা হয়; এই কারণেই দ্বিতীয় বারটি এর পিছনে গ্রিডলাইনটিকে অস্পষ্ট করে। তৃতীয় বারে, 0.2 এর একটি opacity ব্যবহার করা হয়, গ্রিডলাইনটি প্রকাশ করে। চতুর্থ বারে, তিনটি শৈলী বৈশিষ্ট্য ব্যবহার করা হয়েছে: সীমানা আঁকতে stroke-color এবং stroke-width , এবং ভিতরে আয়তক্ষেত্রের রঙ নির্দিষ্ট করতে fill-color । ডানদিকের বারটি অতিরিক্তভাবে সীমানা এবং পূরণের জন্য অস্বচ্ছতা চয়ন করতে stroke-opacity এবং fill-opacity ব্যবহার করে:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

লেবেল বার

চার্টে বিভিন্ন ধরণের লেবেল রয়েছে, যেমন টিক লেবেল, কিংবদন্তি লেবেল এবং টুলটিপগুলিতে লেবেল। এই বিভাগে, আমরা দেখব কিভাবে একটি বার চার্টে বারের ভিতরে (বা কাছাকাছি) লেবেল লাগাতে হয়।

ধরা যাক আমরা প্রতিটি বারকে উপযুক্ত রাসায়নিক চিহ্ন দিয়ে টীকা করতে চেয়েছিলাম। আমরা টীকা ভূমিকা দিয়ে এটি করতে পারি:

আমাদের ডেটা টেবিলে, আমরা আমাদের বার লেবেল ধরে রাখতে { role: 'annotation' } সহ একটি নতুন কলাম সংজ্ঞায়িত করি:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

ব্যবহারকারীরা ডেটা মানগুলি দেখতে বারগুলির উপর ঘোরাফেরা করতে পারে, আপনি তাদের নিজেরাই বারগুলিতে অন্তর্ভুক্ত করতে চাইতে পারেন:

এটি হওয়া উচিত তার চেয়ে একটু বেশি জটিল, কারণ আমরা প্রতিটি বারের জন্য টীকা নির্দিষ্ট করার জন্য একটি DataView তৈরি করি।

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

যদি আমরা মানটিকে ভিন্নভাবে বিন্যাস করতে চাই, আমরা একটি ফরম্যাটারকে সংজ্ঞায়িত করতে পারি এবং এটিকে এভাবে একটি ফাংশনে মোড়ানো করতে পারি:

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

তারপরে আমরা এটিকে calc: getValueAt.bind(undefined, 1) ।

যদি লেবেলটি বারের ভিতরে সম্পূর্ণরূপে ফিট করার জন্য খুব বড় হয় তবে এটি বাইরে প্রদর্শিত হয়:

স্ট্যাক করা বার চার্ট

একটি স্ট্যাকড বার চার্ট হল একটি বার চার্ট যা একে অপরের উপরে সম্পর্কিত মান রাখে। কোনো নেতিবাচক মান থাকলে, সেগুলি চার্টের অক্ষের বেসলাইনের নীচে বিপরীত ক্রমে স্ট্যাক করা হয়। স্ট্যাকড বার চার্টগুলি সাধারণত ব্যবহৃত হয় যখন একটি বিভাগ স্বাভাবিকভাবে উপাদানগুলিতে বিভক্ত হয়। উদাহরণস্বরূপ, কিছু অনুমানমূলক বই বিক্রয় বিবেচনা করুন, যা জেনার দ্বারা বিভক্ত এবং সময়ের সাথে তুলনা করা হয়েছে:

আপনি isStacked বিকল্পটিকে true সেট করে একটি স্ট্যাকড বার চার্ট তৈরি করুন:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

স্ট্যাক করা বার চার্টগুলিও 100% স্ট্যাকিং সমর্থন করে, যেখানে প্রতিটি ডোমেন-মূল্যের উপাদানগুলির স্ট্যাকগুলিকে পুনরায় স্কেল করা হয় যাতে তারা 100% পর্যন্ত যোগ করে। এর জন্য বিকল্পগুলি হল isStacked: 'percent' , যা প্রতিটি মানকে 100% শতাংশ হিসাবে ফর্ম্যাট করে এবং isStacked: 'relative' , যা প্রতিটি মানকে 1 এর ভগ্নাংশ হিসাবে ফর্ম্যাট করে। এছাড়াও একটি isStacked: 'absolute' বিকল্প রয়েছে, যা কার্যকরীভাবে isStacked: true ।

ডানদিকে 100% স্ট্যাক করা চার্টে নোট করুন, টিক মানগুলি 1 এর ভগ্নাংশ হিসাবে আপেক্ষিক 0-1 স্কেলের উপর ভিত্তি করে, কিন্তু অক্ষের মানগুলি শতাংশ হিসাবে প্রদর্শিত হয়। এর কারণ হল শতাংশ অক্ষ টিকগুলি আপেক্ষিক 0-1 স্কেলের মানগুলিতে "#.##%" ফর্ম্যাট প্রয়োগ করার ফলাফল। isStacked: 'percent' ব্যবহার করার সময়, আপেক্ষিক 0-1 স্কেল ব্যবহার করে যেকোন টিক নির্দিষ্ট করতে ভুলবেন না।

স্তুপীকৃত
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
100% স্তুপীকৃত
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

উপাদান বার চার্ট তৈরি

2014 সালে, Google তার বৈশিষ্ট্য এবং অ্যাপ্লিকেশানগুলি (যেমন অ্যান্ড্রয়েড অ্যাপস) যেগুলি Google প্ল্যাটফর্মে চলে সেগুলি জুড়ে একটি সাধারণ চেহারা এবং অনুভূতি সমর্থন করার উদ্দেশ্যে নির্দেশিকা ঘোষণা করেছিল৷ এই প্রচেষ্টাকে আমরা মেটেরিয়াল ডিজাইন বলি। আমরা আমাদের সমস্ত মূল চার্টের "উপাদান" সংস্করণ প্রদান করব; আপনি যদি সেগুলি দেখতে পছন্দ করেন তবে আপনাকে সেগুলি ব্যবহার করতে স্বাগত জানাই৷

একটি মেটেরিয়াল বার চার্ট তৈরি করা একই রকম যাকে আমরা এখন "ক্লাসিক" বার চার্ট বলব। আপনি Google ভিজ্যুয়ালাইজেশন এপিআই লোড করুন (যদিও 'corechart' প্যাকেজের পরিবর্তে 'bar' প্যাকেজ দিয়ে), আপনার ডেটা টেবিল সংজ্ঞায়িত করুন এবং তারপরে একটি অবজেক্ট তৈরি করুন (কিন্তু google.visualization.BarChart এর পরিবর্তে google.charts.Bar ক্লাস)।

দ্রষ্টব্য: ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণে উপাদান চার্ট কাজ করবে না। (IE8 এবং পূর্ববর্তী সংস্করণগুলি SVG সমর্থন করে না, যা উপাদান চার্টের প্রয়োজন।)

মেটেরিয়াল বার চার্টে ক্লাসিক বার চার্টের তুলনায় অনেক ছোট উন্নতি রয়েছে, যার মধ্যে রয়েছে একটি উন্নত রঙ প্যালেট, গোলাকার কোণ, পরিষ্কার লেবেল বিন্যাস, সিরিজের মধ্যে ডিফল্ট ডিফল্ট ব্যবধান, নরম গ্রিডলাইন এবং শিরোনাম (এবং সাবটাইটেল সংযোজন)।

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

উপাদান চার্ট বিটা মধ্যে আছে. চেহারা এবং ইন্টারঅ্যাক্টিভিটি মূলত চূড়ান্ত, তবে ক্লাসিক চার্টে উপলব্ধ অনেকগুলি বিকল্প এখনও সেগুলিতে উপলব্ধ নয়। আপনি বিকল্পগুলির একটি তালিকা খুঁজে পেতে পারেন যা এই সমস্যাটিতে এখনও সমর্থিত নয়।

এছাড়াও, বিকল্পগুলি যেভাবে ঘোষণা করা হয়েছে তা চূড়ান্ত করা হয়নি, তাই আপনি যদি কোনও ক্লাসিক বিকল্প ব্যবহার করেন তবে আপনাকে অবশ্যই এই লাইনটি প্রতিস্থাপন করে উপাদান বিকল্পগুলিতে রূপান্তর করতে হবে:

chart.draw(data, options);

...এর সাথে:

chart.draw(data, google.charts.Bar.convertOptions(options));

google.charts.Bar.convertOptions() ব্যবহার করা আপনাকে নির্দিষ্ট বৈশিষ্ট্যগুলির সুবিধা নিতে দেয়, যেমন hAxis/vAxis.format প্রিসেট বিকল্পগুলি।

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> <br/> <div id="btn-group"> <button class="button button-blue" id="none">No Format</button> <button class="button button-blue" id="scientific">Scientific Notation</button> <button class="button button-blue" id="decimal">Decimal</button> <button class="button button-blue" id="short">Short</button> </div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', }, bars: 'horizontal', // Required for Material Bar Charts. hAxis: {format: 'decimal'}, height: 400, colors: ['#1b9e77', '#d95f02', '#7570b3'] }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); var btns = document.getElementById('btn-group'); btns.onclick = function (e) { if (e.target.tagName === 'BUTTON') { options.hAxis.format = e.target.id === 'none' ? '' : e.target.id; chart.draw(data, google.charts.Bar.convertOptions(options)); } } } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div> <br/> <div id="btn-group"> <button class="button button-blue" id="none">No Format</button> <button class="button button-blue" id="scientific">Scientific Notation</button> <button class="button button-blue" id="decimal">Decimal</button> <button class="button button-blue" id="short">Short</button> </div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', }, bars: 'horizontal', // Required for Material Bar Charts. hAxis: {format: 'decimal'}, height: 400, colors: ['#1b9e77', '#d95f02', '#7570b3'] }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); var btns = document.getElementById('btn-group'); btns.onclick = function (e) { if (e.target.tagName === 'BUTTON') { options.hAxis.format = e.target.id === 'none' ? '' : e.target.id; chart.draw(data, google.charts.Bar.convertOptions(options)); } } }

ডুয়াল-এক্স চার্ট

দ্রষ্টব্য: ডুয়াল-এক্স অক্ষ শুধুমাত্র উপাদান চার্টের জন্য উপলব্ধ (অর্থাৎ, প্যাকেজ bar সহ)।

কখনও কখনও আপনি দুটি স্বাধীন এক্স-অক্ষ সহ একটি বার চার্টে দুটি সিরিজ প্রদর্শন করতে চান: একটি সিরিজের জন্য একটি শীর্ষ অক্ষ এবং অন্যটির জন্য একটি নীচের অক্ষ:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="dual_x_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar(document.getElementById('dual_x_div')); chart.draw(data, options); }; <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="dual_x_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar(document.getElementById('dual_x_div')); chart.draw(data, options); };

মনে রাখবেন যে আমাদের দুটি এক্স-অক্ষকে শুধুমাত্র আলাদাভাবে লেবেল করা হয় না ("পার্সেক" বনাম "আপাত মাত্রা") তবে তাদের প্রত্যেকের নিজস্ব স্বতন্ত্র স্কেল এবং গ্রিডলাইন রয়েছে। আপনি যদি এই আচরণটি কাস্টমাইজ করতে চান তবে hAxis.gridlines বিকল্পগুলি ব্যবহার করুন৷

নীচের কোডে, axes এবং series বিকল্পগুলি একসাথে চার্টের ডুয়াল-এক্স উপস্থিতি নির্দিষ্ট করে৷ series বিকল্পটি নির্দিষ্ট করে যে প্রতিটির জন্য কোন অক্ষ ব্যবহার করতে হবে ( 'distance' এবং 'brightness' ; ডেটা টেবিলের কলামের নামের সাথে তাদের কোন সম্পর্ক নেই)। axes বিকল্পটি তারপর এই চার্টটিকে একটি ডুয়াল-এক্স চার্ট করে, উপরে 'apparent magnitude' অক্ষ এবং নীচে 'parsecs' অক্ষ স্থাপন করে।

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
            }
          }
        };

      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="dual_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

শীর্ষ-এক্স চার্ট

দ্রষ্টব্য: Top-X অক্ষগুলি শুধুমাত্র উপাদান চার্টের জন্য উপলব্ধ (অর্থাৎ, প্যাকেজ bar সহ)।

আপনি যদি X-অক্ষ লেবেল এবং শিরোনাম আপনার চার্টের উপরে নীচে না দিয়ে রাখতে চান, তাহলে আপনি axes.x বিকল্পের সাথে উপাদান চার্টে তা করতে পারেন:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="top_x_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Opening Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { title: 'Chess opening moves', width: 900, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, bars: 'horizontal', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: 'Percentage'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, options); }; <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="top_x_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Opening Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { title: 'Chess opening moves', width: 900, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, bars: 'horizontal', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: 'Percentage'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, options); };

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Opening Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          title: 'Chess opening moves',
          width: 900,
          legend: { position: 'none' },
          chart: { title: 'Chess opening moves',
                   subtitle: 'popularity by percentage' },
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'top', label: 'Percentage'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        chart.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

লোড হচ্ছে

google.charts.load প্যাকেজের নাম "corechart" । ভিজ্যুয়ালাইজেশনের ক্লাসের নাম হল google.visualization.BarChart ।

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

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

ম্যাটেরিয়াল বার চার্টের জন্য, google.charts.load প্যাকেজের নাম "bar" । ভিজ্যুয়ালাইজেশনের ক্লাসের নাম হল google.charts.Bar ।

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

  var chart = new google.charts.Bar(container);

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

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

কলাম:

কলাম 0 কলাম 1 ... কলাম এন
উদ্দেশ্য: এই গ্রুপে বার 1 মান ... এই গ্রুপে বার এন মান
ডেটা টাইপ: সংখ্যা ... সংখ্যা
ভূমিকা: ডোমেইন তথ্য ... তথ্য
ঐচ্ছিক কলাম ভূমিকা : ...

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

নাম
animation.duration

অ্যানিমেশনের সময়কাল, মিলিসেকেন্ডে। বিস্তারিত জানার জন্য, অ্যানিমেশন ডকুমেন্টেশন দেখুন।

প্রকার: সংখ্যা
ডিফল্ট: 0
animation.easing

অ্যানিমেশনে প্রয়োগ করা ইজিং ফাংশন। নিম্নলিখিত বিকল্পগুলি উপলব্ধ:

  • 'রৈখিক' - স্থির গতি।
  • 'ইন' - ইজ ইন - ধীরে শুরু করুন এবং গতি বাড়ান।
  • 'আউট' - সহজ আউট - দ্রুত শুরু করুন এবং ধীরে ধীরে করুন।
  • 'inAndOut' - সহজে প্রবেশ এবং আউট - ধীর শুরু করুন, গতি বাড়ান, তারপর ধীর করুন।
প্রকার: স্ট্রিং
ডিফল্ট: 'লিনিয়ার'
animation.startup

প্রাথমিক ড্রতে চার্ট অ্যানিমেট হবে কিনা তা নির্ধারণ করে। true হলে, চার্ট বেসলাইনে শুরু হবে এবং চূড়ান্ত অবস্থায় অ্যানিমেট হবে।

প্রকার: বুলিয়ান
ডিফল্ট মিথ্যা
annotations.alwaysOutside

বার এবং কলাম চার্টে, যদি true সেট করা হয়, বার/কলামের বাইরে সমস্ত টীকা আঁকে।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
annotations.datum
টীকা সমর্থন করে এমন চার্টগুলির জন্য, annotations.datum অবজেক্ট আপনাকে পৃথক ডেটা উপাদানগুলির জন্য দেওয়া টীকাগুলির জন্য Google চার্টের পছন্দকে ওভাররাইড করতে দেয় (যেমন একটি বার চার্টে প্রতিটি বারের সাথে প্রদর্শিত মান)। আপনি annotations.datum.style দিয়ে রঙ, annotations.datum.stem.color সহ স্টেমের দৈর্ঘ্য এবং annotations.datum.stem.length সহ শৈলী নিয়ন্ত্রণ করতে পারেন।
প্রকার: বস্তু
ডিফল্ট: রঙ হল "কালো"; দৈর্ঘ্য 12; শৈলী হল "বিন্দু"।
annotations.domain
টীকা সমর্থন করে এমন চার্টের জন্য, annotations.domain অবজেক্ট আপনাকে একটি ডোমেনের জন্য দেওয়া টীকাগুলির জন্য Google চার্টের পছন্দকে ওভাররাইড করতে দেয় (চার্টের প্রধান অক্ষ, যেমন একটি সাধারণ লাইন চার্টে X অক্ষ)। আপনি annotations.domain.style দিয়ে রঙ নিয়ন্ত্রণ করতে পারেন, annotations.domain.stem.color দিয়ে স্টেমের দৈর্ঘ্য এবং annotations.domain.stem.length দিয়ে শৈলী নিয়ন্ত্রণ করতে পারেন।
প্রকার: বস্তু
ডিফল্ট: রঙ হল "কালো"; দৈর্ঘ্য 5; শৈলী হল "বিন্দু"।
annotations.boxStyle

টীকাগুলিকে সমর্থন করে এমন চার্টগুলির জন্য, annotations.boxStyle অবজেক্ট টিকাগুলির আশেপাশের বাক্সগুলির উপস্থিতি নিয়ন্ত্রণ করে:

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

এই বিকল্পটি বর্তমানে এলাকা, বার, কলাম, কম্বো, লাইন এবং স্ক্যাটার চার্টের জন্য সমর্থিত। এটি টীকা চার্ট দ্বারা সমর্থিত নয়।

প্রকার: বস্তু
ডিফল্ট: নাল
annotations.high Contrast
টীকা সমর্থন করে এমন চার্টের জন্য, annotations.highContrast বুলিয়ান আপনাকে টীকা রঙের Google চার্টের পছন্দকে ওভাররাইড করতে দেয়৷ ডিফল্টরূপে, annotations.highContrast সত্য, যার কারণে চার্টগুলি ভাল বৈসাদৃশ্য সহ একটি টীকা রঙ নির্বাচন করে: অন্ধকার ব্যাকগ্রাউন্ডে হালকা রং এবং আলোতে গাঢ়। আপনি যদি annotations.highContrast কে মিথ্যাতে সেট করেন এবং আপনার নিজস্ব টীকা রঙ নির্দিষ্ট না করেন, Google চার্ট টীকাটির জন্য ডিফল্ট সিরিজের রঙ ব্যবহার করবে:
প্রকার: বুলিয়ান
ডিফল্ট: সত্য
annotations.stem
টীকা সমর্থন করে এমন চার্টের জন্য, annotations.stem অবজেক্ট আপনাকে স্টেম শৈলীর জন্য Google চার্টের পছন্দকে ওভাররাইড করতে দেয়। আপনি annotations.stem.length দিয়ে রঙ এবং annotations.stem.color দিয়ে স্টেমের দৈর্ঘ্য নিয়ন্ত্রণ করতে পারেন। মনে রাখবেন যে স্টেম দৈর্ঘ্য বিকল্পটি 'line' শৈলী সহ টীকাগুলির উপর কোন প্রভাব ফেলে না : 'line' ডেটাম টীকাগুলির জন্য, স্টেমের দৈর্ঘ্য সর্বদা পাঠ্যের মতোই হয় এবং 'line' ডোমেন টীকাগুলির জন্য, স্টেমটি পুরো চার্ট জুড়ে প্রসারিত হয় .
প্রকার: বস্তু
ডিফল্ট: রঙ হল "কালো"; ডোমেন টীকাগুলির জন্য দৈর্ঘ্য 5 এবং ডেটাম টীকাগুলির জন্য 12৷
annotations.style
টীকা সমর্থন করে এমন চার্টের জন্য, annotations.style বিকল্পটি আপনাকে Google চার্টের টীকা প্রকারের পছন্দকে ওভাররাইড করতে দেয়৷ এটি হয় 'line' বা 'point' হতে পারে।
প্রকার: স্ট্রিং
ডিফল্ট: 'পয়েন্ট'
annotations.textStyle
টীকা সমর্থন করে এমন চার্টের জন্য, annotations.textStyle অবজেক্ট টিকাটির পাঠ্যের উপস্থিতি নিয়ন্ত্রণ করে:
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

এই বিকল্পটি বর্তমানে এলাকা, বার, কলাম, কম্বো, লাইন এবং স্ক্যাটার চার্টের জন্য সমর্থিত। এটি টীকা চার্ট দ্বারা সমর্থিত নয়।

প্রকার: বস্তু
ডিফল্ট: নাল
axisTitlesPosition

চার্ট এলাকার তুলনায় কোথায় অক্ষ শিরোনাম স্থাপন করতে হবে। সমর্থিত মান:

  • in - চার্ট এলাকার ভিতরে অক্ষ শিরোনাম আঁকুন।
  • আউট - চার্ট এলাকার বাইরে অক্ষ শিরোনাম আঁকুন।
  • কোনোটিই নয় - অক্ষ শিরোনাম বাদ দিন।
প্রকার: স্ট্রিং
ডিফল্ট: 'আউট'
পেছনের রং

চার্টের প্রধান এলাকার জন্য পটভূমির রঙ। একটি সাধারণ HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' , অথবা নিম্নলিখিত বৈশিষ্ট্য সহ একটি বস্তু।

প্রকার: স্ট্রিং বা বস্তু
ডিফল্ট: 'সাদা'
backgroundColor.stroke

চার্ট সীমানার রঙ, একটি HTML রঙের স্ট্রিং হিসাবে।

প্রকার: স্ট্রিং
ডিফল্ট: '#666'
backgroundColor.strokeWidth

সীমানার প্রস্থ, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: 0
backgroundColor.fill

চার্ট ফিল কালার, একটি HTML কালার স্ট্রিং হিসেবে।

প্রকার: স্ট্রিং
ডিফল্ট: 'সাদা'
bar.groupwidth
এই ফর্ম্যাটে যেকোন একটিতে নির্দিষ্ট করা বারগুলির একটি গ্রুপের প্রস্থ:
  • পিক্সেল (যেমন 50)।
  • প্রতিটি গোষ্ঠীর জন্য উপলব্ধ প্রস্থের শতাংশ (যেমন '20%'), যেখানে '100%' মানে গ্রুপগুলির মধ্যে কোনও স্থান নেই৷
প্রকার: সংখ্যা বা স্ট্রিং
ডিফল্ট: গোল্ডেন রেশিও , প্রায় '61.8%'।
বার

মেটেরিয়াল বার চার্টের বারগুলি উল্লম্ব বা অনুভূমিক কিনা। এই বিকল্পটি ক্লাসিক বার চার্ট বা ক্লাসিক কলাম চার্টের উপর কোন প্রভাব ফেলবে না।

প্রকার: 'অনুভূমিক' বা 'উল্লম্ব'
ডিফল্ট: 'উল্লম্ব'
চার্ট এরিয়া

চার্ট এলাকার অবস্থান এবং আকার কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু (যেখানে অক্ষ এবং কিংবদন্তি বাদ দিয়ে চার্ট নিজেই আঁকা হয়)। দুটি বিন্যাস সমর্থিত: একটি সংখ্যা, বা একটি সংখ্যা অনুসরণ করে %৷ একটি সাধারণ সংখ্যা পিক্সেলের একটি মান; % দ্বারা অনুসরণ করা একটি সংখ্যা একটি শতাংশ। উদাহরণ: chartArea:{left:20,top:0,width:'50%',height:'75%'}

প্রকার: বস্তু
ডিফল্ট: নাল
chartArea.backgroundColor
চার্ট এলাকার পটভূমির রঙ। যখন একটি স্ট্রিং ব্যবহার করা হয়, এটি হয় একটি হেক্স স্ট্রিং (যেমন, '#fdc') বা একটি ইংরেজি রঙের নাম হতে পারে। যখন একটি বস্তু ব্যবহার করা হয়, নিম্নলিখিত বৈশিষ্ট্য প্রদান করা যেতে পারে:
  • stroke : রঙ, একটি হেক্স স্ট্রিং বা ইংরেজি রঙের নাম হিসাবে দেওয়া।
  • strokeWidth : প্রদান করা হলে, প্রদত্ত প্রস্থের চার্ট এলাকার চারপাশে একটি সীমানা আঁকে (এবং stroke রঙের সাথে)।
প্রকার: স্ট্রিং বা বস্তু
ডিফল্ট: 'সাদা'
chartArea.left

বাম সীমানা থেকে চার্টটি কতদূর আঁকতে হবে।

প্রকার: সংখ্যা বা স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
chartArea.top

উপরের বর্ডার থেকে চার্টটি কতদূর আঁকতে হবে।

প্রকার: সংখ্যা বা স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
chartArea.width

চার্ট এলাকা প্রস্থ.

প্রকার: সংখ্যা বা স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
chartArea.height

চার্ট এলাকার উচ্চতা।

প্রকার: সংখ্যা বা স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
chart.subtitle

উপাদান চার্টের জন্য, এই বিকল্পটি সাবটাইটেল নির্দিষ্ট করে। শুধুমাত্র উপাদান চার্ট সাবটাইটেল সমর্থন করে.

প্রকার: স্ট্রিং
ডিফল্ট: নাল
chart.title

উপাদান চার্টের জন্য, এই বিকল্পটি শিরোনাম নির্দিষ্ট করে।

প্রকার: স্ট্রিং
ডিফল্ট: নাল
রং

চার্ট উপাদানের জন্য ব্যবহার করা রং. স্ট্রিংগুলির একটি অ্যারে, যেখানে প্রতিটি উপাদান একটি HTML রঙের স্ট্রিং, উদাহরণস্বরূপ: colors:['red','#004411'] ।

প্রকার: স্ট্রিং এর অ্যারে
ডিফল্ট: ডিফল্ট রং
ডেটা অপাসিটি

ডেটা পয়েন্টের স্বচ্ছতা, 1.0 সম্পূর্ণ অস্বচ্ছ এবং 0.0 সম্পূর্ণ স্বচ্ছ। স্ক্যাটার, হিস্টোগ্রাম, বার এবং কলাম চার্টে, এটি দৃশ্যমান ডেটা বোঝায়: স্ক্যাটার চার্টে বিন্দু এবং অন্যগুলিতে আয়তক্ষেত্র। চার্টে যেখানে ডেটা নির্বাচন করা একটি বিন্দু তৈরি করে, যেমন লাইন এবং এলাকা চার্ট, এটি হোভার বা নির্বাচনের সময় প্রদর্শিত বৃত্তগুলিকে বোঝায়। কম্বো চার্ট উভয় আচরণই প্রদর্শন করে এবং এই বিকল্পটি অন্যান্য চার্টের উপর কোন প্রভাব ফেলে না। (একটি ট্রেন্ডলাইনের অস্বচ্ছতা পরিবর্তন করতে, ট্রেন্ডলাইনের অস্বচ্ছতা দেখুন।)

প্রকার: সংখ্যা
ডিফল্ট: 1.0
ইন্টারঅ্যাক্টিভিটি সক্ষম করুন

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

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
অনুসন্ধানকারী

explorer বিকল্পটি ব্যবহারকারীদের Google চার্ট প্যান এবং জুম করতে দেয়। explorer: {} ডিফল্ট এক্সপ্লোরার আচরণ প্রদান করে, ব্যবহারকারীদের টেনে এনে অনুভূমিকভাবে এবং উল্লম্বভাবে প্যান করতে এবং স্ক্রল করার মাধ্যমে জুম ইন এবং আউট করতে সক্ষম করে।

এই বৈশিষ্ট্যটি পরীক্ষামূলক এবং ভবিষ্যতে রিলিজে পরিবর্তন হতে পারে।

দ্রষ্টব্য: এক্সপ্লোরার শুধুমাত্র অবিচ্ছিন্ন অক্ষের সাথে কাজ করে (যেমন সংখ্যা বা তারিখ)।

প্রকার: বস্তু
ডিফল্ট: নাল
explorer.actions

গুগল চার্ট এক্সপ্লোরার তিনটি ক্রিয়া সমর্থন করে:

  • dragToPan : চার্টের চারপাশে অনুভূমিকভাবে এবং উল্লম্বভাবে প্যান করতে টেনে আনুন। শুধুমাত্র অনুভূমিক অক্ষ বরাবর প্যান করতে, explorer: { axis: 'horizontal' } । একইভাবে উল্লম্ব অক্ষের জন্য।
  • dragToZoom : ব্যবহারকারী স্ক্রোল করার সময় এক্সপ্লোরারের ডিফল্ট আচরণ হল জুম ইন এবং আউট করা। যদি explorer: { actions: ['dragToZoom', 'rightClickToReset'] } ব্যবহার করা হয়, একটি আয়তক্ষেত্রাকার এলাকা জুড়ে টেনে সেই এলাকায় জুম করা হয়। যখনই dragToZoom ব্যবহার করা হয় তখন আমরা rightClickToReset ব্যবহার করার পরামর্শ দিই। জুম কাস্টমাইজেশনের জন্য explorer.maxZoomIn , explorer.maxZoomOut এবং explorer.zoomDelta দেখুন।
  • rightClickToReset : চার্টে রাইট ক্লিক করলে তা মূল প্যান এবং জুম স্তরে ফিরে আসে।
প্রকার: স্ট্রিং এর অ্যারে
ডিফল্ট: ['dragToPan', 'rightClickToReset']
explorer.axis

ডিফল্টরূপে, ব্যবহারকারীরা অনুভূমিকভাবে এবং উল্লম্বভাবে উভয় প্যান করতে পারেন যখন explorer বিকল্পটি ব্যবহার করা হয়। আপনি যদি ব্যবহারকারীদের শুধুমাত্র অনুভূমিকভাবে প্যান করতে চান, explorer: { axis: 'horizontal' } । একইভাবে, explorer: { axis: 'vertical' } উল্লম্ব-শুধু প্যানিং সক্ষম করে।

প্রকার: স্ট্রিং
ডিফল্ট: অনুভূমিক এবং উল্লম্ব উভয় প্যানিং
explorer.keepInBounds

ডিফল্টরূপে, ডেটা যেখানেই থাকুক না কেন ব্যবহারকারীরা চারপাশে প্যান করতে পারে। ব্যবহারকারীরা যাতে মূল চার্টের বাইরে প্যান না করে তা নিশ্চিত করতে, explorer: { keepInBounds: true } ।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
explorer.maxZoomIn

এক্সপ্লোরার সর্বাধিক যেটি জুম করতে পারে৷ ডিফল্টরূপে, ব্যবহারকারীরা যথেষ্ট পরিমাণে জুম করতে সক্ষম হবেন যে তারা আসল দৃশ্যের মাত্র 25% দেখতে পাবেন৷ সেটিং explorer: { maxZoomIn: .5 } ব্যবহারকারীদের মূল দৃশ্যের অর্ধেক দেখতে যথেষ্ট পরিমাণে জুম করতে দেয়৷

প্রকার: সংখ্যা
ডিফল্ট: 0.25
explorer.maxZoomOut

এক্সপ্লোরার জুম আউট করতে পারে এমন সর্বোচ্চ। ডিফল্টরূপে, ব্যবহারকারীরা যথেষ্ট পরিমাণে জুম আউট করতে সক্ষম হবেন যে চার্টটি উপলব্ধ স্থানের মাত্র 1/4 গ্রহণ করবে। explorer: { maxZoomOut: 8 } ব্যবহারকারীদের এতটা জুম আউট করতে দেয় যে চার্টটি উপলব্ধ স্থানের মাত্র 1/8 অংশ নেয়৷

প্রকার: সংখ্যা
ডিফল্ট: 4
explorer.zoomDelta

ব্যবহারকারীরা যখন জুম ইন বা আউট করে, তখন তারা কতটা জুম করবে তা explorer.zoomDelta নির্ধারণ করে। সংখ্যা যত ছোট হবে, জুম তত মসৃণ এবং ধীর হবে।

প্রকার: সংখ্যা
ডিফল্ট: 1.5
ফোকাস টার্গেট

সত্তার ধরন যা মাউস হোভারে ফোকাস গ্রহণ করে। মাউস ক্লিক দ্বারা কোন সত্তা নির্বাচন করা হয়েছে এবং কোন ডেটা টেবিল উপাদান ইভেন্টের সাথে যুক্ত তাও প্রভাবিত করে। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • 'ডেটাম' - একটি একক ডেটা পয়েন্টে ফোকাস করুন। ডেটা টেবিলের একটি কক্ষের সাথে সম্পর্কযুক্ত।
  • 'শ্রেণি' - প্রধান অক্ষ বরাবর সমস্ত ডেটা পয়েন্টের একটি গ্রুপিংয়ের উপর ফোকাস করুন। ডেটা টেবিলের একটি সারির সাথে সম্পর্কযুক্ত।

ফোকাস টার্গেট 'বিভাগে' টুলটিপ সমস্ত বিভাগের মান প্রদর্শন করে। এটি বিভিন্ন সিরিজের মান তুলনা করার জন্য দরকারী হতে পারে।

প্রকার: স্ট্রিং
ডিফল্ট: 'ডেটাম'
অক্ষরের আকার

চার্টের সমস্ত পাঠ্যের ডিফল্ট ফন্টের আকার, পিক্সেলে। আপনি নির্দিষ্ট চার্ট উপাদানগুলির জন্য বৈশিষ্ট্য ব্যবহার করে এটি ওভাররাইড করতে পারেন।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
ফন্টের নাম

চার্টের সমস্ত পাঠ্যের জন্য ডিফল্ট ফন্ট ফেস। আপনি নির্দিষ্ট চার্ট উপাদানগুলির জন্য বৈশিষ্ট্য ব্যবহার করে এটি ওভাররাইড করতে পারেন।

প্রকার: স্ট্রিং
ডিফল্ট: 'Arial'
forceIFrame

একটি ইনলাইন ফ্রেমের ভিতরে চার্ট আঁকে। (উল্লেখ্য যে IE8 এ, এই বিকল্পটি উপেক্ষা করা হয়েছে; সমস্ত IE8 চার্ট আই-ফ্রেমে আঁকা হয়েছে।)

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
হ্যাক্স

পৃথক অনুভূমিক অক্ষের জন্য বৈশিষ্ট্য নির্দিষ্ট করে, যদি চার্টে একাধিক অনুভূমিক অক্ষ থাকে। প্রতিটি চাইল্ড অবজেক্ট একটি hAxis অবজেক্ট এবং এতে hAxis দ্বারা সমর্থিত সমস্ত বৈশিষ্ট্য থাকতে পারে। এই সম্পত্তির মান একই সম্পত্তির জন্য যেকোনো বিশ্বব্যাপী সেটিংসকে ওভাররাইড করে।

একাধিক অনুভূমিক অক্ষ সহ একটি চার্ট নির্দিষ্ট করতে, প্রথমে series.targetAxisIndex ব্যবহার করে একটি নতুন অক্ষ নির্ধারণ করুন, তারপর series.targetAxisIndex ব্যবহার করে hAxes কনফিগার করুন। নিম্নলিখিত উদাহরণটি নীচের অক্ষে সিরিজ 1 বরাদ্দ করে এবং এটির জন্য একটি কাস্টম শিরোনাম এবং পাঠ্য শৈলী নির্দিষ্ট করে:

series:{1:{targetAxisIndex:1{% raw %}}}{% endraw %}, hAxes:{1:{title:'Losses', textStyle:{color: 'red'{% raw %}}}{% endraw %}}

এই বৈশিষ্ট্যটি হয় একটি বস্তু বা একটি অ্যারে হতে পারে: বস্তুটি বস্তুর একটি সংগ্রহ, প্রতিটিতে একটি সাংখ্যিক লেবেল রয়েছে যা অক্ষটি নির্দিষ্ট করে যা এটি সংজ্ঞায়িত করে--এটি উপরে দেখানো বিন্যাস; অ্যারে হল বস্তুর একটি অ্যারে, প্রতি অক্ষে একটি। উদাহরণস্বরূপ, নিম্নলিখিত অ্যারে-স্টাইল নোটেশনটি উপরে দেখানো hAxis অবজেক্টের অনুরূপ:

hAxes: {
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {
      color: 'red'
    }
  } // Axis 1
প্রকার: অবজেক্টের অ্যারে, বা চাইল্ড অবজেক্ট সহ অবজেক্ট
ডিফল্ট: নাল
হ্যাক্সিস

বিভিন্ন অনুভূমিক অক্ষ উপাদান কনফিগার করার জন্য সদস্য সহ একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
প্রকার: বস্তু
ডিফল্ট: নাল
hAxis.baseline

অনুভূমিক অক্ষের ভিত্তিরেখা।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
hAxis.baselineColor

অনুভূমিক অক্ষের জন্য বেসলাইনের রঙ। যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' ।

প্রকার: সংখ্যা
ডিফল্ট: 'কালো'
hAxis.direction

অনুভূমিক অক্ষ বরাবর মানগুলি যে দিকে বৃদ্ধি পায়। মানগুলির ক্রম বিপরীত করতে -1 নির্দিষ্ট করুন।

প্রকার: 1 বা -1
ডিফল্ট: 1
hAxis.format

সাংখ্যিক অক্ষ লেবেলের জন্য একটি বিন্যাস স্ট্রিং। এটি আইসিইউ প্যাটার্ন সেটের একটি উপসেট। উদাহরণস্বরূপ, {format:'#,###%'} 10, 7.5 এবং 0.5 মানগুলির জন্য "1,000%", "750%", এবং "50%" মান প্রদর্শন করবে। এছাড়াও আপনি নিম্নলিখিত যে কোনো সরবরাহ করতে পারেন:

  • {format: 'none'} : কোন ফরম্যাটিং ছাড়াই সংখ্যা প্রদর্শন করে (যেমন, 8000000)
  • {format: 'decimal'} : হাজার হাজার বিভাজক সহ সংখ্যা প্রদর্শন করে (যেমন, 8,000,000)
  • {format: 'scientific'} : বৈজ্ঞানিক স্বরলিপিতে সংখ্যা প্রদর্শন করে (যেমন, 8e6)
  • {format: 'currency'} : স্থানীয় মুদ্রায় সংখ্যা প্রদর্শন করে (যেমন, $8,000,000.00)
  • {format: 'percent'} : সংখ্যাগুলিকে শতাংশ হিসাবে প্রদর্শন করে (যেমন, 800,000,000%)
  • {format: 'short'} : সংক্ষিপ্ত সংখ্যা প্রদর্শন করে (যেমন, 8M)
  • {format: 'long'} : সংখ্যাগুলিকে পূর্ণ শব্দ হিসাবে প্রদর্শন করে (যেমন, 8 মিলিয়ন)

লেবেলে প্রয়োগ করা প্রকৃত বিন্যাসটি API লোড করা হয়েছে এমন লোকেল থেকে প্রাপ্ত। আরও বিশদ বিবরণের জন্য, একটি নির্দিষ্ট লোকেল সহ লোডিং চার্ট দেখুন।

টিক মান এবং গ্রিডলাইন গণনা করার ক্ষেত্রে, সমস্ত প্রাসঙ্গিক গ্রিডলাইন বিকল্পগুলির বেশ কয়েকটি বিকল্প সমন্বয় বিবেচনা করা হবে এবং বিকল্পগুলি প্রত্যাখ্যান করা হবে যদি ফর্ম্যাট করা টিক লেবেলগুলি ডুপ্লিকেট বা ওভারল্যাপ করা হয়। সুতরাং আপনি format:"#" যদি আপনি শুধুমাত্র পূর্ণসংখ্যার টিক মান দেখাতে চান, তবে সচেতন থাকুন যে যদি কোন বিকল্প এই শর্তটি পূরণ না করে, তাহলে কোন গ্রিডলাইন বা টিক দেখানো হবে না।

প্রকার: স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
hAxis.gridlines

অনুভূমিক অক্ষের গ্রিডলাইনগুলি কনফিগার করার জন্য বৈশিষ্ট্য সহ একটি বস্তু৷ লক্ষ্য করুন যে অনুভূমিক অক্ষ গ্রিডলাইনগুলি উল্লম্বভাবে আঁকা হয়। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

{color: '#333', minSpacing: 20}
প্রকার: বস্তু
ডিফল্ট: নাল
hAxis.gridlines.color

চার্ট এলাকার ভিতরে অনুভূমিক গ্রিডলাইনের রঙ। একটি বৈধ HTML রঙের স্ট্রিং নির্দিষ্ট করুন।

প্রকার: স্ট্রিং
ডিফল্ট: '#CCC'
hAxis.gridlines.count

চার্ট এলাকার ভিতরে অনুভূমিক গ্রিডলাইনের আনুমানিক সংখ্যা। আপনি gridlines.count এর জন্য একটি ধনাত্মক সংখ্যা উল্লেখ করলে, এটি gridlines.count মধ্যে minSpacing গণনা করতে ব্যবহৃত হবে। আপনি শুধুমাত্র একটি গ্রিডলাইন আঁকতে 1 এর মান নির্দিষ্ট করতে পারেন, অথবা কোন গ্রিডলাইন আঁকতে 0 এর মান উল্লেখ করতে পারেন। অন্যান্য বিকল্পের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে গ্রিডলাইনের সংখ্যা গণনা করতে -1 নির্দিষ্ট করুন, যা ডিফল্ট।

প্রকার: সংখ্যা
ডিফল্ট: -1
hAxis.gridlines.units

চার্ট কম্পিউটেড গ্রিডলাইনগুলির সাথে ব্যবহার করার সময় তারিখ/তারিখ সময়/টাইমঅফডে ডেটা প্রকারের বিভিন্ন দিকগুলির জন্য ডিফল্ট ফর্ম্যাটকে ওভাররাইড করে৷ বছর, মাস, দিন, ঘন্টা, মিনিট, সেকেন্ড এবং মিলিসেকেন্ডের জন্য বিন্যাস করার অনুমতি দেয়।

সাধারণ বিন্যাস হল:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

অতিরিক্ত তথ্য তারিখ এবং সময় পাওয়া যাবে.

প্রকার: বস্তু
ডিফল্ট: নাল
hAxis.minorGridlines

hAxis.gridlines বিকল্পের অনুরূপ অনুভূমিক অক্ষের ছোট গ্রিডলাইনগুলি কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু৷

প্রকার: বস্তু
ডিফল্ট: নাল
hAxis.minorGridlines.color

লেখচিত্র এলাকার ভিতরে অনুভূমিক ক্ষুদ্র গ্রিডলাইনের রঙ। একটি বৈধ HTML রঙের স্ট্রিং নির্দিষ্ট করুন।

প্রকার: স্ট্রিং
ডিফল্ট: গ্রিডলাইন এবং পটভূমির রঙের মিশ্রণ
hAxis.minorGridlines.count

minorGridlines.count বিকল্পটি বেশিরভাগই অবহেলিত, কাউন্ট 0 সেট করে ছোট গ্রিডলাইনগুলি নিষ্ক্রিয় করা ছাড়া। ছোট গ্রিডলাইনের সংখ্যা এখন সম্পূর্ণভাবে প্রধান গ্রিডলাইনগুলির মধ্যে ব্যবধানের উপর নির্ভর করে ( hAxis.gridlines.interval দেখুন) এবং ন্যূনতম প্রয়োজনীয় স্থান (দেখুন) hAxis.minorGridlines.minSpacing )।

প্রকার: সংখ্যা
ডিফল্ট: 1
hAxis.minorGridlines.units

চার্ট কম্পিউটেড মাইনরগ্রিডলাইনগুলির সাথে ব্যবহার করার সময় তারিখ/তারিখের সময়/সময়ের দিনের ডেটা প্রকারের বিভিন্ন দিকগুলির জন্য ডিফল্ট ফর্ম্যাটকে ওভাররাইড করে৷ বছর, মাস, দিন, ঘন্টা, মিনিট, সেকেন্ড এবং মিলিসেকেন্ডের জন্য বিন্যাস করার অনুমতি দেয়।

সাধারণ বিন্যাস হল:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

অতিরিক্ত তথ্য তারিখ এবং সময় পাওয়া যাবে.

প্রকার: বস্তু
ডিফল্ট: নাল
hAxis.logScale

hAxis বৈশিষ্ট্য যা অনুভূমিক অক্ষকে একটি লগারিদমিক স্কেল করে (সমস্ত মান ধনাত্মক হওয়া প্রয়োজন)। হ্যাঁ জন্য সত্য সেট করুন.

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
hAxis.scaleType

hAxis সম্পত্তি যা অনুভূমিক অক্ষকে লগারিদমিক স্কেল করে। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • null - কোন লগারিদমিক স্কেলিং সঞ্চালিত হয় না।
  • 'লগ' - লগারিদমিক স্কেলিং। নেতিবাচক এবং শূন্য মান প্লট করা হয় না। এই বিকল্পটি হ্যাক্সিস সেট করার hAxis: { logscale: true } ।
  • 'মিররলগ' - লগারিদমিক স্কেলিং যাতে ঋণাত্মক এবং শূন্য মান প্লট করা হয়। একটি ঋণাত্মক সংখ্যার প্লট করা মান হল পরম মানের লগের ঋণাত্মক। 0 এর কাছাকাছি মান একটি রৈখিক স্কেলে প্লট করা হয়।
প্রকার: স্ট্রিং
ডিফল্ট: নাল
hAxis.textStyle

একটি বস্তু যা অনুভূমিক অক্ষ পাঠের শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.textPosition

লেখচিত্র এলাকার সাপেক্ষে অনুভূমিক অক্ষ পাঠের অবস্থান। সমর্থিত মান: 'আউট', 'ইন', 'কোনটি নয়'।

প্রকার: স্ট্রিং
ডিফল্ট: 'আউট'
hAxis.ticks

স্বয়ংক্রিয়ভাবে উৎপন্ন X-অক্ষ টিকগুলিকে নির্দিষ্ট অ্যারে দিয়ে প্রতিস্থাপন করে। অ্যারের প্রতিটি উপাদান একটি বৈধ টিক মান (যেমন একটি সংখ্যা, তারিখ, তারিখ সময়, বা timeofday), অথবা একটি বস্তু হওয়া উচিত। যদি এটি একটি বস্তু হয়, এটিতে টিক মানের জন্য একটি v বৈশিষ্ট্য থাকা উচিত এবং লেবেল হিসাবে প্রদর্শিত হবে আক্ষরিক স্ট্রিং ধারণকারী একটি ঐচ্ছিক f বৈশিষ্ট্য।

আপনি ওভাররাইড করার জন্য একটি viewWindow.min বা viewWindow.max নির্দিষ্ট না করলে ভিউউইন্ডো স্বয়ংক্রিয়ভাবে ন্যূনতম এবং সর্বোচ্চ টিক অন্তর্ভুক্ত করতে প্রসারিত হবে।

উদাহরণ:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
প্রকার: উপাদানের অ্যারে
ডিফল্ট: স্বয়ংক্রিয়
hAxis.title

hAxis সম্পত্তি যা অনুভূমিক অক্ষের শিরোনাম নির্দিষ্ট করে।

প্রকার: স্ট্রিং
ডিফল্ট: নাল
hAxis.titleTextStyle

একটি বস্তু যা অনুভূমিক অক্ষ শিরোনাম পাঠ শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.maxValue

অনুভূমিক অক্ষের সর্বোচ্চ মানকে নির্দিষ্ট মানের দিকে নিয়ে যায়; এটি বেশিরভাগ চার্টে ডানদিকে থাকবে। উপেক্ষা করা হয় যদি এটি ডেটার সর্বোচ্চ x-মানের চেয়ে ছোট একটি মান সেট করা থাকে। hAxis.viewWindow.max এই সম্পত্তি ওভাররাইড করে।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
hAxis.minValue

অনুভূমিক অক্ষের ন্যূনতম মানকে নির্দিষ্ট মানের দিকে নিয়ে যায়; এটি বেশিরভাগ চার্টে বাম দিকে থাকবে। উপেক্ষা করা হয় যদি এটি ডেটার ন্যূনতম x-মানের চেয়ে বেশি একটি মান সেট করা থাকে। hAxis.viewWindow.min এই সম্পত্তি ওভাররাইড করে।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
hAxis.viewWindowMode

লেখচিত্র এলাকার মধ্যে মান রেন্ডার করতে অনুভূমিক অক্ষ স্কেল কিভাবে নির্দিষ্ট করে। নিম্নলিখিত স্ট্রিং মান সমর্থিত:

  • 'সুন্দর' - অনুভূমিক মানগুলিকে স্কেল করুন যাতে সর্বাধিক এবং সর্বনিম্ন ডেটা মানগুলি চার্ট এলাকার বাম এবং ডানদিকে কিছুটা রেন্ডার করা হয়। ভিউউইন্ডো সংখ্যার জন্য নিকটতম প্রধান গ্রিডলাইনে বা তারিখ এবং সময়ের জন্য নিকটতম ছোট গ্রিডলাইনে প্রসারিত হয়।
  • 'সর্বোচ্চ' - অনুভূমিক মানগুলিকে স্কেল করুন যাতে সর্বাধিক এবং সর্বনিম্ন ডেটা মানগুলি চার্ট এলাকার বাম এবং ডানদিকে স্পর্শ করে৷ এর ফলে haxis.viewWindow.min এবং haxis.viewWindow.max উপেক্ষা করা হবে।
  • 'স্পষ্ট' - চার্ট এলাকার বাম এবং ডান স্কেল মান নির্দিষ্ট করার জন্য একটি অবচয় বিকল্প। (অপ্রচলিত কারণ এটি haxis.viewWindow.min এবং haxis.viewWindow.max এর সাথে অপ্রয়োজনীয়।) এই মানের বাইরের ডেটা মান ক্রপ করা হবে। আপনাকে অবশ্যই একটি hAxis.viewWindow অবজেক্ট নির্দিষ্ট করতে হবে যা দেখানোর জন্য সর্বাধিক এবং সর্বনিম্ন মান বর্ণনা করে।
প্রকার: স্ট্রিং
ডিফল্ট: 'সুন্দর'-এর সমতুল্য, কিন্তু ব্যবহার করা হলে haxis.viewWindow.min এবং haxis.viewWindow.max অগ্রাধিকার পাবে।
hAxis.viewWindow

অনুভূমিক অক্ষের ক্রপিং পরিসীমা নির্দিষ্ট করে।

প্রকার: বস্তু
ডিফল্ট: নাল
hAxis.viewWindow.max

রেন্ডার করার জন্য সর্বাধিক অনুভূমিক ডেটা মান৷

যখন hAxis.viewWindowMode 'সুন্দর' বা 'বড়ো' হয় তখন উপেক্ষা করা হয়।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
hAxis.viewWindow.min

রেন্ডার করার জন্য ন্যূনতম অনুভূমিক ডেটা মান।

যখন hAxis.viewWindowMode 'সুন্দর' বা 'বড়ো' হয় তখন উপেক্ষা করা হয়।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
উচ্চতা

চার্টের উচ্চতা, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: ধারণকারী উপাদানের উচ্চতা
স্ট্যাক করা

সত্য হিসাবে সেট করা হলে, প্রতিটি ডোমেন মানতে সমস্ত সিরিজের উপাদানগুলিকে স্ট্যাক করে। দ্রষ্টব্য: কলাম , এলাকা , এবং স্টেপডএরিয়া চার্টে, Google চার্টগুলি সিরিজের উপাদানগুলির স্ট্যাকিংয়ের সাথে আরও ভালভাবে মিলিত হওয়ার জন্য কিংবদন্তি আইটেমগুলির ক্রমকে বিপরীত করে (যেমন সিরিজ 0 হবে সবচেয়ে নীচের কিংবদন্তি আইটেম)। এটি বার চার্টের ক্ষেত্রে প্রযোজ্য নয় ।

isStacked বিকল্পটি 100% স্ট্যাকিংকেও সমর্থন করে, যেখানে প্রতিটি ডোমেন মানের উপাদানগুলির স্ট্যাকগুলি 100% পর্যন্ত যোগ করার জন্য পুনরায় স্কেল করা হয়।

isStacked এর বিকল্পগুলি হল:

  • false — উপাদানগুলি স্ট্যাক করা হবে না। এটি ডিফল্ট বিকল্প।
  • true — প্রতিটি ডোমেন মানতে সমস্ত সিরিজের জন্য উপাদানগুলিকে স্ট্যাক করে।
  • 'percent' — প্রতিটি ডোমেন মূল্যে সমস্ত সিরিজের জন্য উপাদানগুলিকে স্ট্যাক করে এবং সেগুলিকে এমনভাবে পুনরায় স্কেল করে যাতে তারা 100% পর্যন্ত যোগ করে, প্রতিটি উপাদানের মান 100% শতাংশ হিসাবে গণনা করা হয়।
  • 'relative' — প্রতিটি ডোমেন মূল্যে সমস্ত সিরিজের জন্য উপাদানগুলিকে স্ট্যাক করে এবং সেগুলিকে এমনভাবে পুনরায় স্কেল করে যাতে তারা 1 পর্যন্ত যোগ করে, প্রতিটি উপাদানের মান 1 এর ভগ্নাংশ হিসাবে গণনা করা হয়।
  • 'absolute' — isStacked: true ।

100% স্ট্যাকিংয়ের জন্য, প্রতিটি উপাদানের জন্য গণনা করা মান তার প্রকৃত মানের পরে টুলটিপে প্রদর্শিত হবে।

'relative' এর জন্য 1-এর ভগ্নাংশ হিসাবে আপেক্ষিক 0-1 স্কেলের উপর ভিত্তি করে মানগুলিকে লক্ষ্য অক্ষ ডিফল্ট করবে, এবং 'শতাংশ'-এর জন্য 0-100% ( দ্রষ্টব্য: 'percent' 'percent' বিকল্প ব্যবহার করার সময়, অক্ষ/টিক মানগুলি শতাংশ হিসাবে প্রদর্শিত হয়, তবে প্রকৃত মানগুলি আপেক্ষিক 0-1 স্কেলের মান। এর কারণ হল শতাংশ অক্ষ টিকগুলি আপেক্ষিক 0-1 স্কেলের মানগুলিতে "#.##%" ফর্ম্যাট প্রয়োগ করার ফলাফল। isStacked: 'percent' , আপেক্ষিক 0-1 স্কেল মান ব্যবহার করে যেকোনো টিক/গ্রিডলাইন নির্দিষ্ট করতে ভুলবেন না)। আপনি উপযুক্ত hAxis/vAxis বিকল্পগুলি ব্যবহার করে গ্রিডলাইন/টিক মান এবং বিন্যাস কাস্টমাইজ করতে পারেন।

100% স্ট্যাকিং শুধুমাত্র টাইপ number ডেটা মানকে সমর্থন করে এবং শূন্যের একটি বেসলাইন থাকতে হবে।

প্রকার: বুলিয়ান/স্ট্রিং
ডিফল্ট: মিথ্যা
কিংবদন্তি

কিংবদন্তির বিভিন্ন দিক কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
প্রকার: বস্তু
ডিফল্ট: নাল
legend.pageIndex

কিংবদন্তির প্রাথমিক নির্বাচিত শূন্য-ভিত্তিক পৃষ্ঠা সূচী।

প্রকার: সংখ্যা
ডিফল্ট: 0
legend.position

কিংবদন্তির অবস্থান। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • 'নিচে' - চার্টের নিচে।
  • 'বাম' - চার্টের বাম দিকে, যদি বাম অক্ষের সাথে কোনো ধারা যুক্ত না থাকে। সুতরাং আপনি যদি বাম দিকের কিংবদন্তি চান, targetAxisIndex: 1 বিকল্পটি ব্যবহার করুন।
  • 'in' - চার্টের ভিতরে, উপরের বাম কোণে।
  • 'কোনোটি' - কোনো কিংবদন্তি প্রদর্শিত হয় না।
  • 'right' - চার্টের ডানদিকে। vAxes বিকল্পের সাথে বেমানান।
  • 'শীর্ষ' - চার্টের উপরে।
প্রকার: স্ট্রিং
ডিফল্ট: 'ডান'
legend.alignment

কিংবদন্তির প্রান্তিককরণ। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • 'শুরু' - কিংবদন্তির জন্য বরাদ্দ করা এলাকার শুরুতে সারিবদ্ধ।
  • 'সেন্টার' - কিংবদন্তির জন্য বরাদ্দকৃত এলাকায় কেন্দ্রীভূত।
  • 'শেষ' - কিংবদন্তির জন্য বরাদ্দ করা এলাকার শেষ প্রান্তে সারিবদ্ধ।

শুরু, কেন্দ্র এবং শেষ কিংবদন্তির শৈলী -- উল্লম্ব বা অনুভূমিক -- আপেক্ষিক। উদাহরণস্বরূপ, একটি 'ডান' কিংবদন্তিতে, 'শুরু' এবং 'শেষ' যথাক্রমে উপরে এবং নীচে থাকে; একটি 'শীর্ষ' কিংবদন্তির জন্য, 'শুরু' এবং 'শেষ' যথাক্রমে এলাকার বাম এবং ডানদিকে হবে।

ডিফল্ট মান কিংবদন্তির অবস্থানের উপর নির্ভর করে। 'নিচে' কিংবদন্তির জন্য, ডিফল্ট হল 'কেন্দ্র'; অন্যান্য কিংবদন্তি ডিফল্ট 'শুরু'।

প্রকার: স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
legend.textStyle

একটি বস্তু যা কিংবদন্তি পাঠ্য শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
বিপরীত বিভাগ

সত্য হিসাবে সেট করা হলে, নীচে থেকে উপরে সিরিজ আঁকবে। ডিফল্ট হল টপ-টু-বটম আঁকা।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
অভিযোজন

চার্টের অভিযোজন। 'vertical' তে সেট করা হলে, চার্টের অক্ষগুলিকে ঘোরান যাতে (উদাহরণস্বরূপ) একটি কলাম চার্ট একটি বার চার্টে পরিণত হয় এবং একটি এলাকা চার্ট উপরের পরিবর্তে ডানদিকে বৃদ্ধি পায়:

প্রকার: স্ট্রিং
ডিফল্ট: 'অনুভূমিক'
সিরিজ

অবজেক্টের একটি অ্যারে, প্রতিটি চার্টে সংশ্লিষ্ট সিরিজের বিন্যাস বর্ণনা করে। একটি সিরিজের জন্য ডিফল্ট মান ব্যবহার করতে, একটি খালি বস্তু {} নির্দিষ্ট করুন৷ যদি একটি সিরিজ বা একটি মান নির্দিষ্ট করা না থাকে, তাহলে বিশ্বব্যাপী মান ব্যবহার করা হবে। প্রতিটি বস্তু নিম্নলিখিত বৈশিষ্ট্য সমর্থন করে:

  • annotations - এই সিরিজের জন্য টীকাগুলিতে প্রয়োগ করা একটি বস্তু৷ এটি নিয়ন্ত্রণ করতে ব্যবহার করা যেতে পারে, উদাহরণস্বরূপ, সিরিজের textStyle :

    series: {
  0: {
    annotations: {
      textStyle: {fontSize: 12, color: 'red' }
    }
  }
}

    কাস্টমাইজ করা যেতে পারে তার আরও সম্পূর্ণ তালিকার জন্য বিভিন্ন annotations বিকল্প দেখুন।

  • color - এই সিরিজের জন্য ব্যবহার করা রঙ। একটি বৈধ HTML রঙের স্ট্রিং নির্দিষ্ট করুন।
  • labelInLegend - তালিকার কিংবদন্তিতে প্রদর্শিত সিরিজের বর্ণনা।
  • targetAxisIndex - এই সিরিজটি কোন অক্ষকে বরাদ্দ করতে হবে, যেখানে 0 হল ডিফল্ট অক্ষ এবং 1 হল বিপরীত অক্ষ। ডিফল্ট মান 0; একটি চার্ট সংজ্ঞায়িত করতে 1 এ সেট করুন যেখানে বিভিন্ন অক্ষের বিপরীতে বিভিন্ন সিরিজ রেন্ডার করা হয়। কমপক্ষে একটি সিরিজ ডিফল্ট অক্ষে বরাদ্দ করা হবে। আপনি বিভিন্ন অক্ষের জন্য একটি ভিন্ন স্কেল সংজ্ঞায়িত করতে পারেন।
  • visibleInLegend - একটি বুলিয়ান মান, যেখানে সত্য মানে সিরিজটিতে একটি কিংবদন্তি এন্ট্রি থাকা উচিত এবং মিথ্যা মানে এটি করা উচিত নয়৷ ডিফল্ট সত্য.

আপনি অবজেক্টের একটি অ্যারে নির্দিষ্ট করতে পারেন, যার প্রতিটি প্রদত্ত ক্রম অনুসারে সিরিজে প্রযোজ্য, অথবা আপনি এমন একটি বস্তু নির্দিষ্ট করতে পারেন যেখানে প্রতিটি শিশুর একটি সংখ্যাসূচক কী রয়েছে যা নির্দেশ করে যে এটি কোন সিরিজে প্রযোজ্য। উদাহরণস্বরূপ, নিম্নলিখিত দুটি ঘোষণা অভিন্ন, এবং প্রথম সিরিজটিকে কালো এবং কিংবদন্তি থেকে অনুপস্থিত হিসাবে ঘোষণা করে এবং চতুর্থটি কিংবদন্তি থেকে লাল এবং অনুপস্থিত হিসাবে ঘোষণা করে:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
প্রকার: অবজেক্টের অ্যারে, বা নেস্টেড অবজেক্ট সহ অবজেক্ট
ডিফল্ট: {}
থিম

একটি থিম হল পূর্বনির্ধারিত বিকল্প মানগুলির একটি সেট যা একটি নির্দিষ্ট চার্ট আচরণ বা ভিজ্যুয়াল প্রভাব অর্জন করতে একসাথে কাজ করে। বর্তমানে শুধুমাত্র একটি থিম উপলব্ধ:

  • 'সর্বোচ্চ' - চার্টের ক্ষেত্রফলকে সর্বাধিক করে, এবং লেজেন্ড এবং লেবেলের সমস্ত লেবেল আঁকে। নিম্নলিখিত বিকল্পগুলি সেট করে: 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
প্রকার: স্ট্রিং
ডিফল্ট: নাল
শিরোনাম

চার্টের উপরে দেখানোর জন্য পাঠ্য।

প্রকার: স্ট্রিং
ডিফল্ট: কোন শিরোনাম নেই
শিরোনাম অবস্থান

চার্ট এরিয়ার তুলনায় চার্টের শিরোনাম কোথায় রাখবেন। সমর্থিত মান:

  • in - চার্ট এলাকার ভিতরে শিরোনাম আঁকুন।
  • আউট - চার্ট এলাকার বাইরে শিরোনাম আঁকুন।
  • কোনোটিই নয় - শিরোনাম বাদ দিন।
প্রকার: স্ট্রিং
ডিফল্ট: 'আউট'
শিরোনাম টেক্সটস্টাইল

একটি বস্তু যা শিরোনাম পাঠ্য শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
টুলটিপ

বিভিন্ন টুলটিপ উপাদান কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

{textStyle: {color: '#FF0000'}, showColorCode: true}
প্রকার: বস্তু
ডিফল্ট: নাল
tooltip.ignoreBounds

যদি true সেট করা হয়, টুলটিপগুলির অঙ্কনকে চার্টের সীমার বাইরে সব দিকে প্রবাহিত করার অনুমতি দেয়।

দ্রষ্টব্য: এটি শুধুমাত্র HTML টুলটিপের ক্ষেত্রে প্রযোজ্য। এটি যদি SVG টুলটিপগুলির সাথে সক্ষম করা থাকে, তাহলে চার্টের সীমার বাইরে যেকোনও ওভারফ্লো ক্রপ করা হবে৷ আরও বিস্তারিত জানার জন্য টুলটিপ সামগ্রী কাস্টমাইজ করা দেখুন।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
tooltip.isHtml

সত্য হিসাবে সেট করা হলে, HTML-রেন্ডার করা (এসভিজি-রেন্ডারের পরিবর্তে) টুলটিপ ব্যবহার করুন। আরও বিস্তারিত জানার জন্য টুলটিপ সামগ্রী কাস্টমাইজ করা দেখুন।

দ্রষ্টব্য: টুলটিপ কলাম ডেটা ভূমিকার মাধ্যমে HTML টুলটিপ সামগ্রীর কাস্টমাইজেশন বাবল চার্ট ভিজ্যুয়ালাইজেশন দ্বারা সমর্থিত নয় ৷

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
tooltip.showColorCode

সত্য হলে, টুলটিপে সিরিজের তথ্যের পাশে রঙিন বর্গক্ষেত্র দেখান। ফোকাস টার্গেট 'বিভাগ' এ সেট করা হলে focusTarget সত্য, অন্যথায় ডিফল্ট মিথ্যা।

প্রকার: বুলিয়ান
ডিফল্ট: স্বয়ংক্রিয়
tooltip.textStyle

টুলটিপ টেক্সট শৈলী নির্দিষ্ট করে এমন একটি বস্তু। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

ব্যবহারকারীর ইন্টারঅ্যাকশন যার কারণে টুলটিপ প্রদর্শিত হয়:

  • 'ফোকাস' - ব্যবহারকারী যখন উপাদানটির উপর ঘোরায় তখন টুলটিপ প্রদর্শিত হবে।
  • 'none' - টুলটিপ প্রদর্শিত হবে না।
  • 'নির্বাচন' - ব্যবহারকারী উপাদান নির্বাচন করলে টুলটিপ প্রদর্শিত হবে।
প্রকার: স্ট্রিং
ডিফল্ট: 'ফোকাস'
ট্রেন্ডলাইন

তাদের সমর্থন করে এমন চার্টে ট্রেন্ডলাইন প্রদর্শন করে। ডিফল্টরূপে, লিনিয়ার ট্রেন্ডলাইন ব্যবহার করা হয়, তবে এটি trendlines. n .type বিকল্প।

ট্রেন্ডলাইনগুলি প্রতি-সিরিজের ভিত্তিতে নির্দিষ্ট করা হয়, তাই বেশিরভাগ সময় আপনার বিকল্পগুলি এইরকম দেখাবে:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
প্রকার: বস্তু
ডিফল্ট: নাল
trendlines.n.color

ট্রেন্ডলাইনের রঙ, হয় একটি ইংরেজি রঙের নাম বা একটি হেক্স স্ট্রিং হিসাবে প্রকাশ করা হয়৷

প্রকার: স্ট্রিং
ডিফল্ট: ডিফল্ট সিরিজের রঙ
trendlines.n.degree

টাইপের ট্রেন্ডলাইনের জন্য type: 'polynomial' , বহুপদীর ডিগ্রি ( দ্বিঘাতের জন্য 2 , কিউবিকের জন্য 3 এবং আরও অনেক কিছু)। (Google চার্টের আসন্ন প্রকাশে ডিফল্ট ডিগ্রী 3 থেকে 2 পরিবর্তিত হতে পারে।)

প্রকার: সংখ্যা
ডিফল্ট: 3
trendlines.n.labelInLegend

সেট করা থাকলে, ট্রেন্ডলাইনটি কিংবদন্তিতে এই স্ট্রিং হিসাবে উপস্থিত হবে।

প্রকার: স্ট্রিং
ডিফল্ট: নাল
trendlines.n.lineWidth

ট্রেন্ডলাইনের লাইনের প্রস্থ , পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: 2
trendlines.n.opacity

ট্রেন্ডলাইনের স্বচ্ছতা, 0.0 (স্বচ্ছ) থেকে 1.0 (অস্বচ্ছ)।

প্রকার: সংখ্যা
ডিফল্ট: 1.0
trendlines.n.pointSize

চার্টে একগুচ্ছ ডট স্ট্যাম্পিং করে ট্রেন্ডলাইন তৈরি করা হয়; এই বিরল-প্রয়োজনীয় বিকল্পটি আপনাকে বিন্দুর আকার কাস্টমাইজ করতে দেয়। ট্রেন্ডলাইনের lineWidth বিকল্পটি সাধারণত পছন্দের হবে। যাইহোক, আপনি যদি গ্লোবাল পয়েন্ট সাইজ বিকল্প ব্যবহার করেন এবং আপনার pointSize জন্য আলাদা পয়েন্ট সাইজ চান তাহলে আপনার এই বিকল্পের প্রয়োজন হবে।

প্রকার: সংখ্যা
ডিফল্ট: 1
trendlines.n.pointsVisible

চার্টে একগুচ্ছ ডট স্ট্যাম্পিং করে ট্রেন্ডলাইন তৈরি করা হয়। ট্রেন্ডলাইনের pointsVisible বিকল্পটি নির্দিষ্ট ট্রেন্ডলাইনের পয়েন্টগুলি দৃশ্যমান কিনা তা নির্ধারণ করে।

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
trendlines.n.showR2

কিংবদন্তি বা ট্রেন্ডলাইন টুলটিপে সংকল্পের সহগ দেখাবেন কিনা।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
trendlines.n.type

ট্রেন্ডলাইনগুলি 'linear' (ডিফল্ট), 'exponential' , বা 'polynomial' কিনা।

প্রকার: স্ট্রিং
ডিফল্ট: লিনিয়ার
trendlines.n.visibleInLegend

কিংবদন্তীতে ট্রেন্ডলাইন সমীকরণ দেখা যাচ্ছে কিনা। (এটি ট্রেন্ডলাইন টুলটিপে প্রদর্শিত হবে।)

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
ভ্যাক্সিস

বিভিন্ন উল্লম্ব অক্ষ উপাদান কনফিগার করার জন্য সদস্য সহ একটি বস্তু। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
প্রকার: বস্তু
ডিফল্ট: নাল
vAxis.baseline

vAxis সম্পত্তি যা উল্লম্ব অক্ষের জন্য বেসলাইন নির্দিষ্ট করে। যদি বেসলাইনটি সর্বোচ্চ গ্রিড লাইনের চেয়ে বড় বা সর্বনিম্ন গ্রিড লাইনের চেয়ে ছোট হয়, তাহলে এটি নিকটতম গ্রিডলাইনে বৃত্তাকার হবে।

এই বিকল্পটি শুধুমাত্র একটি continuous অক্ষের জন্য সমর্থিত।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
vAxis.baselineColor

উল্লম্ব অক্ষের জন্য বেসলাইনের রঙ নির্দিষ্ট করে। যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' ।

এই বিকল্পটি শুধুমাত্র একটি continuous অক্ষের জন্য সমর্থিত।

প্রকার: সংখ্যা
ডিফল্ট: 'কালো'
vAxis.direction

উল্লম্ব অক্ষ বরাবর মানগুলি যে দিকে বৃদ্ধি পায়। ডিফল্টরূপে, কম মানগুলি চার্টের নীচে থাকে৷ মানগুলির ক্রম বিপরীত করতে -1 নির্দিষ্ট করুন।

প্রকার: 1 বা -1
ডিফল্ট: 1
vAxis.format

সাংখ্যিক বা তারিখ অক্ষ লেবেলের জন্য একটি বিন্যাস স্ট্রিং।

সংখ্যা অক্ষ লেবেলের জন্য, এটি দশমিক বিন্যাস ICU প্যাটার্ন সেটের একটি উপসেট। উদাহরণস্বরূপ, {format:'#,###%'} 10, 7.5 এবং 0.5 মানগুলির জন্য "1,000%", "750%", এবং "50%" মান প্রদর্শন করবে। এছাড়াও আপনি নিম্নলিখিত যে কোনো সরবরাহ করতে পারেন:

  • {format: 'none'} : কোন ফরম্যাটিং ছাড়াই সংখ্যা প্রদর্শন করে (যেমন, 8000000)
  • {format: 'decimal'} : হাজার হাজার বিভাজক সহ সংখ্যা প্রদর্শন করে (যেমন, 8,000,000)
  • {format: 'scientific'} : বৈজ্ঞানিক স্বরলিপিতে সংখ্যা প্রদর্শন করে (যেমন, 8e6)
  • {format: 'currency'} : স্থানীয় মুদ্রায় সংখ্যা প্রদর্শন করে (যেমন, $8,000,000.00)
  • {format: 'percent'} : সংখ্যাগুলিকে শতাংশ হিসাবে প্রদর্শন করে (যেমন, 800,000,000%)
  • {format: 'short'} : সংক্ষিপ্ত সংখ্যা প্রদর্শন করে (যেমন, 8M)
  • {format: 'long'} : সংখ্যাগুলিকে পূর্ণ শব্দ হিসাবে প্রদর্শন করে (যেমন, 8 মিলিয়ন)

তারিখ অক্ষ লেবেলের জন্য, এটি তারিখ বিন্যাসকরণ ICU প্যাটার্ন সেটের একটি উপসেট। উদাহরণস্বরূপ, {format:'MMM d, y'} 2011 সালের প্রথম জুলাই তারিখের জন্য "Jul 1, 2011" মান প্রদর্শন করবে৷

লেবেলে প্রয়োগ করা প্রকৃত বিন্যাসটি API লোড করা হয়েছে এমন লোকেল থেকে প্রাপ্ত। আরও বিশদ বিবরণের জন্য, একটি নির্দিষ্ট লোকেল সহ লোডিং চার্ট দেখুন।

টিক মান এবং গ্রিডলাইন গণনা করার ক্ষেত্রে, সমস্ত প্রাসঙ্গিক গ্রিডলাইন বিকল্পগুলির বেশ কয়েকটি বিকল্প সমন্বয় বিবেচনা করা হবে এবং বিকল্পগুলি প্রত্যাখ্যান করা হবে যদি ফর্ম্যাট করা টিক লেবেলগুলি ডুপ্লিকেট বা ওভারল্যাপ করা হয়। সুতরাং আপনি format:"#" যদি আপনি শুধুমাত্র পূর্ণসংখ্যার টিক মান দেখাতে চান, তবে সচেতন থাকুন যে যদি কোন বিকল্প এই শর্তটি পূরণ না করে, তাহলে কোন গ্রিডলাইন বা টিক দেখানো হবে না।

এই বিকল্পটি শুধুমাত্র একটি continuous অক্ষের জন্য সমর্থিত।

প্রকার: স্ট্রিং
ডিফল্ট: স্বয়ংক্রিয়
vAxis.gridlines

উল্লম্ব অক্ষের গ্রিডলাইনগুলি কনফিগার করার জন্য সদস্য সহ একটি বস্তু৷ উল্লেখ্য যে উল্লম্ব অক্ষ গ্রিডলাইন অনুভূমিকভাবে আঁকা হয়। এই বস্তুর বৈশিষ্ট্য নির্দিষ্ট করতে, আপনি অবজেক্ট আক্ষরিক স্বরলিপি ব্যবহার করতে পারেন, যেমনটি এখানে দেখানো হয়েছে:

{color: '#333', minSpacing: 20}

এই বিকল্পটি শুধুমাত্র একটি continuous অক্ষের জন্য সমর্থিত।

প্রকার: বস্তু
ডিফল্ট: নাল
vAxis.gridlines.color

চার্ট এলাকার ভিতরে উল্লম্ব গ্রিডলাইনের রঙ। একটি বৈধ HTML রঙের স্ট্রিং নির্দিষ্ট করুন।

প্রকার: স্ট্রিং
ডিফল্ট: '#CCC'
vAxis.gridlines.count

চার্ট এলাকার ভিতরে অনুভূমিক গ্রিডলাইনের আনুমানিক সংখ্যা। আপনি gridlines.count এর জন্য একটি ধনাত্মক সংখ্যা উল্লেখ করলে, এটি gridlines.count মধ্যে minSpacing গণনা করতে ব্যবহৃত হবে। আপনি শুধুমাত্র একটি গ্রিডলাইন আঁকতে 1 এর মান নির্দিষ্ট করতে পারেন, অথবা কোন গ্রিডলাইন আঁকতে 0 এর মান উল্লেখ করতে পারেন। অন্যান্য বিকল্পের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে গ্রিডলাইনের সংখ্যা গণনা করতে -1 নির্দিষ্ট করুন, যা ডিফল্ট।

প্রকার: সংখ্যা
ডিফল্ট: -1
vAxis.gridlines.units

চার্ট কম্পিউটেড গ্রিডলাইনগুলির সাথে ব্যবহার করার সময় তারিখ/তারিখ সময়/টাইমঅফডে ডেটা প্রকারের বিভিন্ন দিকগুলির জন্য ডিফল্ট ফর্ম্যাটকে ওভাররাইড করে৷ বছর, মাস, দিন, ঘন্টা, মিনিট, সেকেন্ড এবং মিলিসেকেন্ডের জন্য বিন্যাস করার অনুমতি দেয়।

সাধারণ বিন্যাস হল:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

অতিরিক্ত তথ্য তারিখ এবং সময় পাওয়া যাবে.

প্রকার: বস্তু
ডিফল্ট: নাল
vAxis.minorGridlines

vAxis.gridlines বিকল্পের অনুরূপ উল্লম্ব অক্ষের ছোট গ্রিডলাইনগুলি কনফিগার করার জন্য সদস্য সহ একটি বস্তু৷

এই বিকল্পটি শুধুমাত্র একটি continuous অক্ষের জন্য সমর্থিত।

প্রকার: বস্তু
ডিফল্ট: নাল
vAxis.minorGridlines.color

চার্ট এলাকার ভিতরে উল্লম্ব ক্ষুদ্র গ্রিডলাইনের রঙ। একটি বৈধ HTML রঙের স্ট্রিং নির্দিষ্ট করুন।

প্রকার: স্ট্রিং
ডিফল্ট: গ্রিডলাইন এবং পটভূমির রঙের মিশ্রণ
vAxis.minorGridlines.count

minorGridlines.count বিকল্পটি বেশিরভাগই অবহেলিত, কাউন্ট 0 তে সেট করে ছোট গ্রিডলাইনগুলি নিষ্ক্রিয় করা ছাড়া। ছোট গ্রিডলাইনের সংখ্যা প্রধান গ্রিডলাইনগুলির মধ্যে ব্যবধানের উপর নির্ভর করে (vAxis.gridlines.interval দেখুন) এবং ন্যূনতম প্রয়োজনীয় স্থান (vAxis দেখুন)। minorGridlines.minSpacing)।

প্রকার: সংখ্যা
ডিফল্ট: 1
vAxis.minorGridlines.units

চার্ট কম্পিউটেড মাইনরগ্রিডলাইনগুলির সাথে ব্যবহার করার সময় তারিখ/তারিখের সময়/সময়ের দিনের ডেটা প্রকারের বিভিন্ন দিকগুলির জন্য ডিফল্ট ফর্ম্যাটকে ওভাররাইড করে৷ বছর, মাস, দিন, ঘন্টা, মিনিট, সেকেন্ড এবং মিলিসেকেন্ডের জন্য বিন্যাস করার অনুমতি দেয়।

সাধারণ বিন্যাস হল:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

অতিরিক্ত তথ্য তারিখ এবং সময় পাওয়া যাবে.

প্রকার: বস্তু
ডিফল্ট: নাল
vAxis.logScale

সত্য হলে, উল্লম্ব অক্ষকে লগারিদমিক স্কেল করে। দ্রষ্টব্য: সমস্ত মান ইতিবাচক হতে হবে।

এই বিকল্পটি শুধুমাত্র একটি continuous অক্ষের জন্য সমর্থিত।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
vAxis.scaleType

vAxis সম্পত্তি যা উল্লম্ব অক্ষকে লগারিদমিক স্কেল করে। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • null - কোন লগারিদমিক স্কেলিং সঞ্চালিত হয় না।
  • 'লগ' - লগারিদমিক স্কেলিং। নেতিবাচক এবং শূন্য মান প্লট করা হয় না। এই বিকল্পটি vAxis সেট করার vAxis: { logscale: true } ।
  • 'মিররলগ' - লগারিদমিক স্কেলিং যাতে ঋণাত্মক এবং শূন্য মান প্লট করা হয়। একটি ঋণাত্মক সংখ্যার প্লট করা মান হল পরম মানের লগের ঋণাত্মক। 0 এর কাছাকাছি মান একটি রৈখিক স্কেলে প্লট করা হয়।
প্রকার: স্ট্রিং
ডিফল্ট: নাল
vAxis.textPosition

উল্লম্ব অক্ষ পাঠের অবস্থান, চার্ট এলাকার সাপেক্ষে। সমর্থিত মান: 'আউট', 'ইন', 'কোনটি নয়'।

প্রকার: স্ট্রিং
ডিফল্ট: 'আউট'
vAxis.textStyle

একটি বস্তু যা উল্লম্ব অক্ষ পাঠের শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

স্বয়ংক্রিয়ভাবে উৎপন্ন Y-অক্ষ টিকগুলিকে নির্দিষ্ট অ্যারে দিয়ে প্রতিস্থাপন করে। অ্যারের প্রতিটি উপাদান একটি বৈধ টিক মান (যেমন একটি সংখ্যা, তারিখ, তারিখ সময়, বা timeofday), অথবা একটি বস্তু হওয়া উচিত। যদি এটি একটি বস্তু হয়, এটিতে টিক মানের জন্য একটি v বৈশিষ্ট্য থাকা উচিত এবং লেবেল হিসাবে প্রদর্শিত হবে আক্ষরিক স্ট্রিং ধারণকারী একটি ঐচ্ছিক f বৈশিষ্ট্য।

আপনি ওভাররাইড করার জন্য একটি viewWindow.min বা viewWindow.max নির্দিষ্ট না করলে ভিউউইন্ডো স্বয়ংক্রিয়ভাবে ন্যূনতম এবং সর্বোচ্চ টিক অন্তর্ভুক্ত করতে প্রসারিত হবে।

উদাহরণ:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

এই বিকল্পটি শুধুমাত্র একটি continuous অক্ষের জন্য সমর্থিত।

প্রকার: উপাদানের অ্যারে
ডিফল্ট: স্বয়ংক্রিয়
vAxis.title

vAxis সম্পত্তি যা উল্লম্ব অক্ষের জন্য একটি শিরোনাম নির্দিষ্ট করে।

প্রকার: স্ট্রিং
ডিফল্ট: কোন শিরোনাম নেই
vAxis.titleTextStyle

একটি বস্তু যা উল্লম্ব অক্ষ শিরোনাম পাঠ শৈলী নির্দিষ্ট করে। বস্তুর এই বিন্যাস আছে:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color যেকোনো HTML রঙের স্ট্রিং হতে পারে, উদাহরণস্বরূপ: 'red' বা '#00cc00' । এছাড়াও fontName এবং fontSize দেখুন।

প্রকার: বস্তু
ডিফল্ট: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

উল্লম্ব অক্ষের সর্বোচ্চ মানকে নির্দিষ্ট মানের দিকে নিয়ে যায়; এটি বেশিরভাগ চার্টে উর্ধ্বগামী হবে। উপেক্ষা করা হয় যদি এটি ডেটার সর্বোচ্চ y-মানের থেকে ছোট একটি মান সেট করা থাকে। vAxis.viewWindow.max এই সম্পত্তি ওভাররাইড করে।

এই বিকল্পটি শুধুমাত্র একটি continuous অক্ষের জন্য সমর্থিত।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
vAxis.minValue

উল্লম্ব অক্ষের সর্বনিম্ন মানকে নির্দিষ্ট মানের দিকে নিয়ে যায়; এটি বেশিরভাগ চার্টে নিম্নগামী হবে। উপেক্ষা করা হয় যদি এটি ডেটার ন্যূনতম y-মানের চেয়ে বেশি একটি মান সেট করা থাকে। vAxis.viewWindow.min এই সম্পত্তি ওভাররাইড করে।

এই বিকল্পটি শুধুমাত্র একটি continuous অক্ষের জন্য সমর্থিত।

প্রকার: সংখ্যা
ডিফল্ট: নাল
vAxis.viewWindowMode

লেখচিত্র এলাকার মধ্যে মান রেন্ডার করার জন্য উল্লম্ব অক্ষ স্কেল কিভাবে নির্দিষ্ট করে। নিম্নলিখিত স্ট্রিং মান সমর্থিত:

  • 'সুন্দর' - উল্লম্ব মানগুলিকে স্কেল করুন যাতে সর্বাধিক এবং সর্বনিম্ন ডেটা মানগুলি চার্ট এলাকার নীচে এবং উপরের দিকে কিছুটা রেন্ডার করা হয়৷ ভিউউইন্ডো সংখ্যার জন্য নিকটতম প্রধান গ্রিডলাইনে বা তারিখ এবং সময়ের জন্য নিকটতম ছোট গ্রিডলাইনে প্রসারিত হয়।
  • 'সর্বোচ্চ' - উল্লম্ব মানগুলিকে স্কেল করুন যাতে সর্বাধিক এবং সর্বনিম্ন ডেটা মানগুলি চার্ট এলাকার উপরে এবং নীচে স্পর্শ করে৷ এর ফলে vaxis.viewWindow.min এবং vaxis.viewWindow.max উপেক্ষা করা হবে।
  • 'স্পষ্ট' - চার্ট এলাকার উপরের এবং নীচের স্কেলের মানগুলি নির্দিষ্ট করার জন্য একটি অবচয় বিকল্প। (অপ্রচলিত কারণ এটি vaxis.viewWindow.min এবং vaxis.viewWindow.max এর সাথে অপ্রয়োজনীয়। এই মানগুলির বাইরের ডেটা মানগুলি ক্রপ করা হবে। আপনাকে দেখানোর জন্য সর্বাধিক এবং সর্বনিম্ন মানগুলি বর্ণনা করে একটি vAxis.viewWindow বস্তু নির্দিষ্ট করতে হবে।

এই বিকল্পটি শুধুমাত্র একটি continuous অক্ষের জন্য সমর্থিত।

প্রকার: স্ট্রিং
ডিফল্ট: 'সুন্দর'-এর সমতুল্য, কিন্তু ব্যবহার করা হলে vaxis.viewWindow.min এবং vaxis.viewWindow.max অগ্রাধিকার পাবে।
vAxis.viewWindow

উল্লম্ব অক্ষের ক্রপিং পরিসীমা নির্দিষ্ট করে।

প্রকার: বস্তু
ডিফল্ট: নাল
vAxis.viewWindow.max

  • continuous অক্ষের জন্য:

    রেন্ডার করার জন্য সর্বাধিক উল্লম্ব ডেটা মান৷

  • একটি discrete অক্ষের জন্য:

    শূন্য-ভিত্তিক সারি সূচক যেখানে ক্রপিং উইন্ডো শেষ হয়। এই সূচক এবং উচ্চতর ডেটা পয়েন্টগুলি কেটে ফেলা হবে৷ vAxis.viewWindowMode.min এর সাথে একত্রে, এটি একটি অর্ধ-খোলা পরিসীমা সংজ্ঞায়িত করে [মিনিট, সর্বোচ্চ) যা প্রদর্শনের জন্য উপাদান সূচকগুলিকে নির্দেশ করে। অন্য কথায়, প্রতিটি সূচক যেমন min <= index < max প্রদর্শিত হবে।

উপেক্ষা করা হয় যখন vAxis.viewWindowMode 'সুন্দর' বা 'সর্বোচ্চ' হয়।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
vAxis.viewWindow.min

  • continuous অক্ষের জন্য:

    রেন্ডার করার জন্য ন্যূনতম উল্লম্ব ডেটা মান৷

  • একটি discrete অক্ষের জন্য:

    শূন্য-ভিত্তিক সারি সূচক যেখানে ক্রপিং উইন্ডো শুরু হয়। এর চেয়ে কম সূচকে ডেটা পয়েন্টগুলি কেটে ফেলা হবে। vAxis.viewWindowMode.max এর সাথে একত্রে, এটি একটি অর্ধ-খোলা পরিসীমা সংজ্ঞায়িত করে [মিনিট, সর্বোচ্চ) যা প্রদর্শনের জন্য উপাদান সূচকগুলিকে নির্দেশ করে। অন্য কথায়, প্রতিটি সূচক যেমন min <= index < max প্রদর্শিত হবে। উপেক্ষা করা হয় যখন vAxis.viewWindowMode 'সুন্দর' বা 'সর্বোচ্চ' হয়।

উপেক্ষা করা হয় যখন vAxis.viewWindowMode 'সুন্দর' বা 'সর্বোচ্চ' হয়।

প্রকার: সংখ্যা
ডিফল্ট: স্বয়ংক্রিয়
প্রস্থ

চার্টের প্রস্থ, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: ধারণকারী উপাদানের প্রস্থ

পদ্ধতি

পদ্ধতি
draw(data, options)

চার্ট আঁকে। ready ইভেন্ট ফায়ার হওয়ার পরেই চার্টটি আরও মেথড কল গ্রহণ করে। Extended description .

রিটার্ন টাইপ: কোনোটিই নয়
getAction(actionID)

অনুরোধ actionID সহ টুলটিপ অ্যাকশন অবজেক্ট ফেরত দেয়।

রিটার্ন টাইপ: অবজেক্ট
getBoundingBox(id)

চার্ট এলিমেন্ট id বাম, উপরে, প্রস্থ এবং উচ্চতা সম্বলিত একটি বস্তু প্রদান করে। id বিন্যাসটি এখনও নথিভুক্ত করা হয়নি (এগুলি ইভেন্ট হ্যান্ডলারের রিটার্ন মান), তবে এখানে কিছু উদাহরণ রয়েছে:

var cli = chart.getChartLayoutInterface();

চার্ট এলাকার উচ্চতা
cli.getBoundingBox('chartarea').height
একটি বার বা কলাম চার্টের প্রথম সিরিজের তৃতীয় বারের প্রস্থ
cli.getBoundingBox('bar#0#2').width
পাই চার্টের পঞ্চম ওয়েজের বাউন্ডিং বক্স
cli.getBoundingBox('slice#4')
একটি উল্লম্ব (যেমন, কলাম) চার্টের চার্ট ডেটার বাউন্ডিং বক্স:
cli.getBoundingBox('vAxis#0#gridline')
একটি অনুভূমিক (যেমন, বার) চার্টের চার্ট ডেটার বাউন্ডিং বক্স:
cli.getBoundingBox('hAxis#0#gridline')

মানগুলি চার্টের কন্টেইনারের সাথে আপেক্ষিক। চার্ট আঁকা পরে এটি কল.

রিটার্ন টাইপ: অবজেক্ট
getChartAreaBoundingBox()

চার্টের বিষয়বস্তুর বাম, শীর্ষ, প্রস্থ এবং উচ্চতা সহ একটি বস্তু ফেরত দেয় (যেমন, লেবেল এবং কিংবদন্তি বাদ দিয়ে):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

মানগুলি চার্টের কন্টেইনারের সাথে আপেক্ষিক। চার্ট আঁকা পরে এটি কল.

রিটার্ন টাইপ: অবজেক্ট
getChartLayoutInterface()

চার্টের অনস্ক্রিন বসানো এবং এর উপাদান সম্পর্কে তথ্য সম্বলিত একটি বস্তু প্রদান করে।

প্রত্যাবর্তিত বস্তুতে নিম্নলিখিত পদ্ধতিগুলি কল করা যেতে পারে:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

চার্ট আঁকা পরে এটি কল.

রিটার্ন টাইপ: অবজেক্ট
getHAxisValue(xPosition, optional_axis_index)

xPosition এ অনুভূমিক ডেটা মান প্রদান করে, যা চার্ট কন্টেইনারের বাম প্রান্ত থেকে একটি পিক্সেল অফসেট। নেতিবাচক হতে পারে।

উদাহরণ: chart.getChartLayoutInterface().getHAxisValue(400) ।

চার্ট আঁকা পরে এটি কল.

রিটার্ন টাইপ: নম্বর
getImageURI()

একটি চিত্র URI হিসাবে ক্রমিককৃত চার্ট ফেরত দেয়।

চার্ট আঁকা পরে এটি কল.

প্রিন্টিং PNG চার্ট দেখুন।

রিটার্ন টাইপ: স্ট্রিং
getSelection()

নির্বাচিত চার্ট সত্তাগুলির একটি অ্যারে প্রদান করে। নির্বাচনযোগ্য সত্তা হল বার, কিংবদন্তি এন্ট্রি এবং বিভাগ। এই চার্টের জন্য, যে কোনো মুহূর্তে শুধুমাত্র একটি সত্তা নির্বাচন করা যেতে পারে। Extended description .

রিটার্ন টাইপ: নির্বাচন উপাদানের অ্যারে
getVAxisValue(yPosition, optional_axis_index)

yPosition এ উল্লম্ব ডেটা মান প্রদান করে, যা চার্ট কন্টেইনারের উপরের প্রান্ত থেকে একটি পিক্সেল অফসেট। নেতিবাচক হতে পারে।

উদাহরণ: chart.getChartLayoutInterface().getVAxisValue(300) ।

চার্ট আঁকা পরে এটি কল.

রিটার্ন টাইপ: নম্বর
getXLocation(dataValue, optional_axis_index)

চার্টের কন্টেইনারের বাম প্রান্তের dataValue এর পিক্সেল x-অর্ডিনেট প্রদান করে।

উদাহরণ: chart.getChartLayoutInterface().getXLocation(400) ।

চার্ট আঁকা পরে এটি কল.

রিটার্ন টাইপ: নম্বর
getYLocation(dataValue, optional_axis_index)

চার্টের কন্টেইনারের উপরের প্রান্তের dataValue এর পিক্সেল y-অর্ডিনেট প্রদান করে।

উদাহরণ: chart.getChartLayoutInterface().getYLocation(300) ।

চার্ট আঁকা পরে এটি কল.

রিটার্ন টাইপ: নম্বর
removeAction(actionID)

চার্ট থেকে অনুরোধ করা actionID সহ টুলটিপ অ্যাকশন সরিয়ে দেয়।

রিটার্ন টাইপ: none
setAction(action)

ব্যবহারকারী যখন অ্যাকশন টেক্সটে ক্লিক করে তখন কার্যকর করার জন্য একটি টুলটিপ অ্যাকশন সেট করে।

setAction পদ্ধতি একটি বস্তুকে তার কর্ম পরামিতি হিসাবে নেয়। এই অবজেক্টের 3টি বৈশিষ্ট্য নির্দিষ্ট করা উচিত: id — সেট করা অ্যাকশনের ID, text — যে টেক্সটটি অ্যাকশনের টুলটিপে উপস্থিত হওয়া উচিত এবং action — যে ফাংশনটি চালানো উচিত যখন কোনও ব্যবহারকারী অ্যাকশন টেক্সটে ক্লিক করে।

চার্টের draw() পদ্ধতিতে কল করার আগে যেকোনো এবং সমস্ত টুলটিপ অ্যাকশন সেট করা উচিত। বর্ধিত বিবরণ .

রিটার্ন টাইপ: none
setSelection()

নির্দিষ্ট চার্ট সত্তা নির্বাচন করে। আগের যেকোনো নির্বাচন বাতিল করে। নির্বাচনযোগ্য সত্তা হল বার, কিংবদন্তি এন্ট্রি এবং বিভাগ। এই চার্টের জন্য, একবারে শুধুমাত্র একটি সত্তা নির্বাচন করা যেতে পারে। Extended description .

রিটার্ন টাইপ: কোনোটিই নয়
clearChart()

চার্টটি সাফ করে এবং এর সমস্ত বরাদ্দকৃত সংস্থান প্রকাশ করে।

রিটার্ন টাইপ: কোনোটিই নয়

ঘটনা

এই ইভেন্টগুলি কীভাবে ব্যবহার করবেন সে সম্পর্কে আরও তথ্যের জন্য, বেসিক ইন্টারঅ্যাকটিভিটি , হ্যান্ডলিং ইভেন্ট এবং ফায়ারিং ইভেন্টগুলি দেখুন।

নাম
animationfinish

ট্রানজিশন অ্যানিমেশন সম্পূর্ণ হলে বহিস্কার করা হয়েছে।

বৈশিষ্ট্য: কোনোটিই নয়
click

ব্যবহারকারী চার্টের ভিতরে ক্লিক করলে বহিস্কার হয়। শিরোনাম, ডেটা উপাদান, কিংবদন্তি এন্ট্রি, অক্ষ, গ্রিডলাইন বা লেবেলগুলি ক্লিক করা হলে সনাক্ত করতে ব্যবহার করা যেতে পারে।

বৈশিষ্ট্য: টার্গেটআইডি
error

চার্ট রেন্ডার করার চেষ্টা করার সময় একটি ত্রুটি ঘটলে বহিস্কার করা হয়।

বৈশিষ্ট্য: আইডি, বার্তা
legendpagination

ব্যবহারকারী কিংবদন্তি পৃষ্ঠায় স্থানান্তর তীর ক্লিক করলে বহিস্কার করা হয়। বর্তমান কিংবদন্তি শূন্য-ভিত্তিক পৃষ্ঠা সূচী এবং পৃষ্ঠার মোট সংখ্যাকে পাস করে।

বৈশিষ্ট্য: বর্তমান পেজ ইনডেক্স, মোট পৃষ্ঠা
onmouseover

যখন ব্যবহারকারী একটি ভিজ্যুয়াল সত্তার উপর মাউস দেয় তখন বহিস্কার করা হয়। সংশ্লিষ্ট ডেটা টেবিল উপাদানের সারি এবং কলামের সূচকগুলিকে পাস করে। একটি বার ডেটা টেবিলের একটি কক্ষের সাথে সম্পর্কযুক্ত, একটি কলামে একটি কিংবদন্তি এন্ট্রি (সারি সূচকটি শূন্য), এবং একটি সারির একটি বিভাগ (কলাম সূচকটি শূন্য)।

বৈশিষ্ট্য: সারি, কলাম
onmouseout

ব্যবহারকারী মাউস একটি ভিজ্যুয়াল সত্তা থেকে দূরে থাকলে বহিস্কার করা হয়। সংশ্লিষ্ট ডেটা টেবিল উপাদানের সারি এবং কলামের সূচকগুলিকে পাস করে। একটি বার ডেটা টেবিলের একটি কক্ষের সাথে সম্পর্কযুক্ত, একটি কলামে একটি কিংবদন্তি এন্ট্রি (সারি সূচকটি শূন্য), এবং একটি সারির একটি বিভাগ (কলাম সূচকটি শূন্য)।

বৈশিষ্ট্য: সারি, কলাম
ready

চার্টটি বাহ্যিক পদ্ধতি কলের জন্য প্রস্তুত। আপনি যদি চার্টের সাথে ইন্টারঅ্যাক্ট করতে চান, এবং আপনি এটি আঁকার পরে কল করার পদ্ধতিগুলি চান, তাহলে draw পদ্ধতিতে কল করার আগে আপনাকে এই ইভেন্টের জন্য একজন শ্রোতা সেট আপ করতে হবে এবং ইভেন্টটি বরখাস্ত হওয়ার পরেই তাদের কল করতে হবে।

বৈশিষ্ট্য: কোনোটিই নয়
select

ব্যবহারকারী একটি ভিজ্যুয়াল সত্তা ক্লিক করলে বহিস্কার করা হয়। কি নির্বাচন করা হয়েছে তা জানতে, getSelection() কল করুন।

বৈশিষ্ট্য: কোনোটিই নয়

ডেটা নীতি

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