ভিজ্যুয়ালাইজেশন: স্ক্যাটার চার্ট

ওভারভিউ

একটি গ্রাফে স্ক্যাটার চার্ট প্লট পয়েন্ট। যখন ব্যবহারকারী পয়েন্টের উপর ঘোরায়, টুলটিপগুলি আরও তথ্য সহ প্রদর্শিত হয়।

Google স্ক্যাটার চার্ট ব্রাউজারের ক্ষমতার উপর নির্ভর করে SVG বা VML ব্যবহার করে ব্রাউজারের মধ্যে রেন্ডার করা হয়।

উদাহরণ

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 900px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_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':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

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

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

আকার পরিবর্তন এবং অ্যানিমেটিং

ডিফল্টরূপে, স্ক্যাটার চার্ট চেনাশোনা সহ আপনার ডেটাসেটের উপাদানগুলিকে উপস্থাপন করে। আপনি pointShape বিকল্পের সাথে অন্যান্য আকার নির্দিষ্ট করতে পারেন, কাস্টমাইজিং পয়েন্ট ডকুমেন্টেশনে বিস্তারিত।

অন্যান্য Google চার্টের মতো, আপনি ইভেন্ট ব্যবহার করে তাদের অ্যানিমেট করতে পারেন। আপনি প্রথম ready ইভেন্টের জন্য একটি ইভেন্ট শ্রোতা যোগ করতে পারেন এবং পছন্দসই পরিবর্তন করার পরে চার্টটি পুনরায় আঁকতে পারেন। প্রথম ready ইভেন্টের পরে, আপনি প্রক্রিয়াটি পুনরাবৃত্তি করতে animationfinish ইভেন্ট শুনতে পারেন, যার ফলে একটি অবিচ্ছিন্ন অ্যানিমেশন হয়। animation বিকল্প নিয়ন্ত্রণ করে কিভাবে পুনরায় আঁকা হয়: অবিলম্বে (কোন অ্যানিমেশন নেই) বা মসৃণভাবে, এবং যদি মসৃণভাবে কত দ্রুত এবং কী আচরণের সাথে।

ভাল অংশ
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
সম্পূর্ণ এইচটিএমএল
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

ম্যাটেরিয়াল স্ক্যাটার চার্ট তৈরি করা

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

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

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatterchart_material"></div> google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82],[0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, hAxis: {title: 'Hours Studied'}, vAxis: {title: 'Grade'} }; var chart = new google.charts.Scatter(document.getElementById('scatterchart_material')); chart.draw(data, google.charts.Scatter.convertOptions(options)); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatterchart_material"></div> google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82],[0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, hAxis: {title: 'Hours Studied'}, vAxis: {title: 'Grade'} }; var chart = new google.charts.Scatter(document.getElementById('scatterchart_material')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }

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

      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

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

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

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

chart.draw(data, options);

...এর সাথে:

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

ডুয়াল-ওয়াই চার্ট

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart', 'scatter']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Student ID'); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 0, 67], [1, 1, 88], [2, 2, 77], [3, 3, 93], [4, 4, 85], [5, 5, 91], [6, 6, 71], [7, 7, 78], [8, 8, 93], [9, 9, 80], [10, 10, 82], [11, 0, 75], [12, 5, 80], [13, 3, 90], [14, 1, 72], [15, 5, 75], [16, 6, 68], [17, 7, 98], [18, 3, 82], [19, 9, 94], [20, 2, 79], [21, 2, 95], [22, 2, 86], [23, 3, 67], [24, 4, 60], [25, 2, 80], [26, 6, 92], [27, 2, 81], [28, 8, 79], [29, 9, 83] ]); var materialOptions = { chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, width: 800, height: 500, series: { 0: {axis: 'hours studied'}, 1: {axis: 'final grade'} }, axes: { y: { 'hours studied': {label: 'Hours Studied'}, 'final grade': {label: 'Final Exam Grade'} } } }; var classicOptions = { width: 800, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Students\' Final Grades - based on hours studied', vAxes: { // Adds titles to each axis. 0: {title: 'Hours Studied'}, 1: {title: 'Final Exam Grade'} } }; function drawMaterialChart() { var materialChart = new google.charts.Scatter(chartDiv); materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ScatterChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); }; <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <button id="change-chart">Change to Classic</button> <br><br> <div id="chart_div" style="width: 800px; height: 500px;"></div> google.charts.load('current', {'packages':['corechart', 'scatter']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Student ID'); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 0, 67], [1, 1, 88], [2, 2, 77], [3, 3, 93], [4, 4, 85], [5, 5, 91], [6, 6, 71], [7, 7, 78], [8, 8, 93], [9, 9, 80], [10, 10, 82], [11, 0, 75], [12, 5, 80], [13, 3, 90], [14, 1, 72], [15, 5, 75], [16, 6, 68], [17, 7, 98], [18, 3, 82], [19, 9, 94], [20, 2, 79], [21, 2, 95], [22, 2, 86], [23, 3, 67], [24, 4, 60], [25, 2, 80], [26, 6, 92], [27, 2, 81], [28, 8, 79], [29, 9, 83] ]); var materialOptions = { chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, width: 800, height: 500, series: { 0: {axis: 'hours studied'}, 1: {axis: 'final grade'} }, axes: { y: { 'hours studied': {label: 'Hours Studied'}, 'final grade': {label: 'Final Exam Grade'} } } }; var classicOptions = { width: 800, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Students\' Final Grades - based on hours studied', vAxes: { // Adds titles to each axis. 0: {title: 'Hours Studied'}, 1: {title: 'Final Exam Grade'} } }; function drawMaterialChart() { var materialChart = new google.charts.Scatter(chartDiv); materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ScatterChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); };

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

নীচের কোডে, axes এবং series বিকল্পগুলি একসাথে চার্টের দ্বৈত-Y উপস্থিতি নির্দিষ্ট করে৷ series বিকল্পটি নির্দিষ্ট করে যে প্রতিটির জন্য কোন অক্ষ ব্যবহার করতে হবে ( 'final grade' এবং 'hours studied' ; ডেটা টেবিলের কলামের নামের সাথে তাদের কোনো সম্পর্ক নেই)। axes বিকল্পটি তারপর এই চার্টটিকে একটি দ্বৈত-ওয়াই চার্টে পরিণত করে, বাম দিকে 'Final Exam Grade' অক্ষ এবং ডানদিকে 'Hours Studied' অক্ষ স্থাপন করে।

      google.charts.load('current', {'packages':['corechart', 'scatter']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Scatter(chartDiv);
          materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ScatterChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };

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

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

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatter_top_x"></div> google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82], [0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Scatter(document.getElementById('scatter_top_x')); chart.draw(data, google.charts.Scatter.convertOptions(options)); } <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="scatter_top_x"></div> google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82], [0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Scatter(document.getElementById('scatter_top_x')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

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

লোড হচ্ছে

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

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

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

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

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

  var visualization = new google.charts.Scatter(container);

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

সারি: টেবিলের প্রতিটি সারি একই x-অক্ষ মান সহ ডেটা পয়েন্টের একটি সেট উপস্থাপন করে।

কলাম:

কলাম 0 কলাম 1 ... কলাম এন
উদ্দেশ্য: ডেটা পয়েন্ট X মান সিরিজ 1 Y মান ... সিরিজ N Y মান
ডেটা টাইপ: স্ট্রিং, সংখ্যা, বা তারিখ/তারিখ সময়/সময়ের দিন স্ট্রিং, সংখ্যা, বা তারিখ/তারিখ সময়/সময়ের দিন ... স্ট্রিং, সংখ্যা, বা তারিখ/তারিখ সময়/সময়ের দিন
ভূমিকা: তথ্য তথ্য ... তথ্য
ঐচ্ছিক কলাম ভূমিকা :

কোনোটিই নয়

 ...

একাধিক সিরিজ নির্দিষ্ট করতে, দুই বা ততোধিক Y-অক্ষ কলাম নির্দিষ্ট করুন, এবং শুধুমাত্র একটি Y কলামে Y মানগুলি নির্দিষ্ট করুন:

এক্স-মান সিরিজ 1 Y মান সিরিজ 2 Y মান
10 শূন্য 75
20 শূন্য 18
33 শূন্য 22
55 16 শূন্য
14 61 শূন্য
48 3 শূন্য

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

নাম
একত্রিত লক্ষ্য
কিভাবে একাধিক ডেটা নির্বাচন টুলটিপগুলিতে রোল আপ করা হয়:
  • 'category' : x-মান দ্বারা নির্বাচিত ডেটা গোষ্ঠীবদ্ধ করুন।
  • 'series' : সিরিজ অনুসারে নির্বাচিত ডেটা গ্রুপ করুন।
  • 'auto' : সমস্ত নির্বাচনের একই x-মান থাকলে এবং অন্যথায় সিরিজ অনুসারে নির্বাচিত ডেটাকে x-মান অনুসারে গোষ্ঠীবদ্ধ করুন।
  • 'none' : প্রতি নির্বাচনের জন্য শুধুমাত্র একটি টুলটিপ দেখান।
aggregationTarget প্রায়শই selectMode এবং tooltip.trigger selectionMode সাথে টেন্ডেম ব্যবহার করা হবে, যেমন:
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
প্রকার: স্ট্রিং
ডিফল্ট: 'অটো'
animation.duration

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

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

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

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

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

প্রকার: বুলিয়ান
ডিফল্ট মিথ্যা
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.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.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 কালার স্ট্রিং হিসেবে।

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

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

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

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

প্রকার: স্ট্রিং
ডিফল্ট: নাল
চার্ট এরিয়া

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

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

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

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

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

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

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

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

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

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

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

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

চার্টের জন্য ক্রসহেয়ার বৈশিষ্ট্য ধারণকারী একটি বস্তু।

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

ক্রসহেয়ার রঙ, হয় একটি রঙের নাম (যেমন, "নীল") বা একটি RGB মান (যেমন, "#adf") হিসাবে প্রকাশ করা হয়।

প্রকার: স্ট্রিং
প্রকার: ডিফল্ট
crosshair.focused

ফোকাসের উপর ক্রসহেয়ার বৈশিষ্ট্য ধারণকারী একটি বস্তু।
উদাহরণ: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

প্রকার: বস্তু
ডিফল্ট: ডিফল্ট
crosshair.opacity

ক্রসহেয়ার অস্বচ্ছতা, 0.0 সম্পূর্ণ স্বচ্ছ এবং 1.0 সম্পূর্ণ অস্বচ্ছ।

প্রকার: সংখ্যা
ডিফল্ট: 1.0
crosshair.orientation

ক্রসহেয়ার অভিযোজন, যা শুধুমাত্র উল্লম্ব চুলের জন্য 'উল্লম্ব', শুধুমাত্র অনুভূমিক চুলের জন্য 'অনুভূমিক', অথবা ঐতিহ্যগত ক্রসহেয়ারের জন্য 'উভয়' হতে পারে।

প্রকার: স্ট্রিং
ডিফল্ট: 'উভয়'
crosshair.selected

নির্বাচনের সময় ক্রসহেয়ার বৈশিষ্ট্য ধারণকারী একটি বস্তু।
উদাহরণ: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

প্রকার: বস্তু
ডিফল্ট: ডিফল্ট
crosshair.trigger

কখন ক্রসহেয়ার প্রদর্শন করতে হবে: 'focus' , 'selection' বা 'both' ।

প্রকার: স্ট্রিং
ডিফল্ট: 'উভয়'
কার্ভ টাইপ

রেখার প্রস্থ শূন্য না হলে রেখার বক্ররেখা নিয়ন্ত্রণ করে। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • 'কিছুই নয়' - বক্ররেখা ছাড়া সরলরেখা।
  • 'ফাংশন' - লাইনের কোণগুলি মসৃণ করা হবে।
প্রকার: স্ট্রিং
ডিফল্ট: 'কিছুই নয়'
ডেটা অপাসিটি

ডেটা পয়েন্টের স্বচ্ছতা, 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 চার্ট আই-ফ্রেমে আঁকা হয়েছে।)

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

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

{
  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.textPosition

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

প্রকার: স্ট্রিং
ডিফল্ট: 'আউট'
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.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 'সুন্দর' বা 'বড়ো' হয় তখন উপেক্ষা করা হয়।

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

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

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

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

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

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

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

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

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

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

লিজেন্ডে সর্বাধিক সংখ্যক লাইন। আপনার কিংবদন্তিতে লাইন যোগ করতে এটিকে একের বেশি সংখ্যায় সেট করুন। দ্রষ্টব্য: রেন্ডার করা লাইনের প্রকৃত সংখ্যা নির্ধারণ করতে ব্যবহৃত সঠিক যুক্তিটি এখনও প্রবাহিত।

এই বিকল্পটি বর্তমানে শুধুমাত্র তখনই কাজ করে যখন legend.position 'শীর্ষ' হয়।

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

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

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

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

  • 'নিচে' - চার্টের নিচে।
  • 'বাম' - চার্টের বাম দিকে, যদি বাম অক্ষের সাথে কোনো ধারা যুক্ত না থাকে। সুতরাং আপনি যদি বাম দিকের কিংবদন্তি চান, targetAxisIndex: 1 বিকল্পটি ব্যবহার করুন।
  • 'in' - চার্টের ভিতরে, উপরের বাম কোণে।
  • 'কোনোটি' - কোনো কিংবদন্তি প্রদর্শিত হয় না।
  • 'right' - চার্টের ডানদিকে। vAxes বিকল্পের সাথে বেমানান।
  • 'শীর্ষ' - চার্টের উপরে।
প্রকার: স্ট্রিং
ডিফল্ট: 'ডান'
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>}
লাইন প্রস্থ

লাইনের প্রস্থ পিক্সেলে। সমস্ত লাইন লুকানোর জন্য শূন্য ব্যবহার করুন এবং শুধুমাত্র পয়েন্টগুলি দেখান।

প্রকার: সংখ্যা
ডিফল্ট: 0
অভিযোজন

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

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

পৃথক ডেটা উপাদানগুলির আকৃতি: 'বৃত্ত', 'ত্রিভুজ', 'বর্গক্ষেত্র', 'হীরা', 'তারকা', বা 'বহুভুজ'। উদাহরণের জন্য পয়েন্ট ডকুমেন্টেশন দেখুন.

প্রকার: স্ট্রিং
ডিফল্ট: 'বৃত্ত'
পয়েন্ট সাইজ

ডেটা পয়েন্টের ব্যাস, পিক্সেলে। সমস্ত পয়েন্ট লুকানোর জন্য শূন্য ব্যবহার করুন। আপনি series সম্পত্তি ব্যবহার করে পৃথক সিরিজের জন্য মান ওভাররাইড করতে পারেন। আপনি যদি একটি ট্রেন্ডলাইন ব্যবহার করেন, তাহলে এই বিকল্পটি এটির অন্তর্ভুক্ত পয়েন্টের পয়েন্ট pointSize প্রভাবিত করবে, যা ট্রেন্ডলাইনের আপাত প্রস্থকে পরিবর্তন করবে। এটি এড়াতে, আপনি trendlines.n.pointsize বিকল্পের মাধ্যমে এটিকে ওভাররাইড করতে পারেন।

প্রকার: সংখ্যা
ডিফল্ট: 7
পয়েন্ট দৃশ্যমান

পয়েন্ট প্রদর্শিত হবে কিনা তা নির্ধারণ করে। সমস্ত পয়েন্ট লুকানোর জন্য false সেট করুন। আপনি series সম্পত্তি ব্যবহার করে পৃথক সিরিজের জন্য মান ওভাররাইড করতে পারেন। আপনি যদি একটি ট্রেন্ডলাইন ব্যবহার করেন, তাহলে পয়েন্ট pointsVisible বিকল্পটি সমস্ত ট্রেন্ডলাইনে পয়েন্টের দৃশ্যমানতাকে প্রভাবিত করবে যদি না আপনি এটিকে trendlines.n.pointsVisible বিকল্প দিয়ে ওভাররাইড করেন।

এটি "point {visible: true}" আকারে শৈলী ভূমিকা ব্যবহার করে ওভাররাইড করা যেতে পারে।

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
নির্বাচন মোড

যখন selectionMode 'multiple' হয়, ব্যবহারকারীরা একাধিক ডেটা পয়েন্ট নির্বাচন করতে পারে।

প্রকার: স্ট্রিং
ডিফল্ট: 'একক'
সিরিজ

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

  • color - এই সিরিজের জন্য ব্যবহার করা রঙ। একটি বৈধ HTML রঙের স্ট্রিং নির্দিষ্ট করুন।
  • labelInLegend - তালিকার কিংবদন্তিতে প্রদর্শিত সিরিজের বর্ণনা।
  • lineWidth - এই সিরিজের জন্য বিশ্বব্যাপী lineWidth মানকে ওভাররাইড করে।
  • pointShape - এই সিরিজের জন্য বিশ্বব্যাপী pointShape মানকে ওভাররাইড করে।
  • pointSize - এই সিরিজের জন্য বিশ্বব্যাপী pointSize মানকে ওভাররাইড করে।
  • pointsVisible - এই সিরিজের জন্য বিশ্বব্যাপী pointsVisible মানকে ওভাররাইড করে।
  • 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

সত্য হলে, টুলটিপে সিরিজের তথ্যের পাশে রঙিন বর্গক্ষেত্র দেখান।

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
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 সম্পত্তি যা উল্লম্ব অক্ষের জন্য বেসলাইন নির্দিষ্ট করে। যদি বেসলাইনটি সর্বোচ্চ গ্রিড লাইনের চেয়ে বড় বা সর্বনিম্ন গ্রিড লাইনের চেয়ে ছোট হয়, তাহলে এটি নিকটতম গ্রিডলাইনে বৃত্তাকার হবে।

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

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

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

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

প্রকার: 1 বা -1
ডিফল্ট: 1
vAxis.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:"#" যদি আপনি শুধুমাত্র পূর্ণসংখ্যার টিক মান দেখাতে চান, তবে সচেতন থাকুন যে যদি কোন বিকল্প এই শর্তটি পূরণ না করে, তাহলে কোন গ্রিডলাইন বা টিক দেখানো হবে না।

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

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

{color: '#333', minSpacing: 20}
প্রকার: বস্তু
ডিফল্ট: নাল
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 বিকল্পের অনুরূপ উল্লম্ব অক্ষের ছোট গ্রিডলাইনগুলি কনফিগার করার জন্য সদস্য সহ একটি বস্তু৷

প্রকার: বস্তু
ডিফল্ট: নাল
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

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

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
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] }
প্রকার: উপাদানের অ্যারে
ডিফল্ট: স্বয়ংক্রিয়
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 এই সম্পত্তি ওভাররাইড করে।

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

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

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

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

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

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

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

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

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

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

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

উপেক্ষা করা হয় যখন 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() কল করুন।

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

ডেটা নীতি

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