লাইন চার্ট

ওভারভিউ

একটি লাইন চার্ট যা ব্রাউজারের মধ্যে SVG বা VML ব্যবহার করে রেন্ডার করা হয়। পয়েন্টের উপর ঘোরাঘুরি করার সময় টুলটিপ প্রদর্শন করে।

উদাহরণ

লাইন কার্ভিং

আপনি function জন্য curveType বিকল্পটি সেট করে লাইনগুলিকে মসৃণ করতে পারেন:

এই চার্ট তৈরি করার কোড নিচে দেওয়া হল। curveType: function বিকল্পের ব্যবহার লক্ষ্য করুন:

  <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([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

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

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

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

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

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

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

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

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

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

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

chart.draw(data, options);

...এর সাথে:

chart.draw(data, google.charts.Line.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"></div> google.charts.load('current', {'packages':['line', 'corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('date', 'Month'); data.addColumn('number', "Average Temperature"); data.addColumn('number', "Average Hours of Daylight"); data.addRows([ [new Date(2014, 0), -.5, 5.7], [new Date(2014, 1), .4, 8.7], [new Date(2014, 2), .5, 12], [new Date(2014, 3), 2.9, 15.3], [new Date(2014, 4), 6.3, 18.6], [new Date(2014, 5), 9, 20.9], [new Date(2014, 6), 10.6, 19.8], [new Date(2014, 7), 10.3, 16.6], [new Date(2014, 8), 7.4, 13.3], [new Date(2014, 9), 4.4, 9.9], [new Date(2014, 10), 1.1, 6.6], [new Date(2014, 11), -.2, 4.5] ]); var materialOptions = { chart: { title: 'Average Temperatures and Daylight in Iceland Throughout the Year' }, width: 900, height: 500, series: { // Gives each series an axis name that matches the Y-axis below. 0: {axis: 'Temps'}, 1: {axis: 'Daylight'} }, axes: { // Adds labels to each axis; they don't have to match the axis names. y: { Temps: {label: 'Temps (Celsius)'}, Daylight: {label: 'Daylight'} } } }; var classicOptions = { title: 'Average Temperatures and Daylight in Iceland Throughout the Year', width: 900, height: 500, // Gives each series an axis that matches the vAxes number below. series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, vAxes: { // Adds titles to each axis. 0: {title: 'Temps (Celsius)'}, 1: {title: 'Daylight'} }, hAxis: { ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3), new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7), new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11) ] }, vAxis: { viewWindow: { max: 30 } } }; function drawMaterialChart() { var materialChart = new google.charts.Line(chartDiv); materialChart.draw(data, materialOptions); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.LineChart(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"></div> google.charts.load('current', {'packages':['line', 'corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('date', 'Month'); data.addColumn('number', "Average Temperature"); data.addColumn('number', "Average Hours of Daylight"); data.addRows([ [new Date(2014, 0), -.5, 5.7], [new Date(2014, 1), .4, 8.7], [new Date(2014, 2), .5, 12], [new Date(2014, 3), 2.9, 15.3], [new Date(2014, 4), 6.3, 18.6], [new Date(2014, 5), 9, 20.9], [new Date(2014, 6), 10.6, 19.8], [new Date(2014, 7), 10.3, 16.6], [new Date(2014, 8), 7.4, 13.3], [new Date(2014, 9), 4.4, 9.9], [new Date(2014, 10), 1.1, 6.6], [new Date(2014, 11), -.2, 4.5] ]); var materialOptions = { chart: { title: 'Average Temperatures and Daylight in Iceland Throughout the Year' }, width: 900, height: 500, series: { // Gives each series an axis name that matches the Y-axis below. 0: {axis: 'Temps'}, 1: {axis: 'Daylight'} }, axes: { // Adds labels to each axis; they don't have to match the axis names. y: { Temps: {label: 'Temps (Celsius)'}, Daylight: {label: 'Daylight'} } } }; var classicOptions = { title: 'Average Temperatures and Daylight in Iceland Throughout the Year', width: 900, height: 500, // Gives each series an axis that matches the vAxes number below. series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, vAxes: { // Adds titles to each axis. 0: {title: 'Temps (Celsius)'}, 1: {title: 'Daylight'} }, hAxis: { ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3), new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7), new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11) ] }, vAxis: { viewWindow: { max: 30 } } }; function drawMaterialChart() { var materialChart = new google.charts.Line(chartDiv); materialChart.draw(data, materialOptions); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.LineChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); }

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

নীচের উপাদান কোডে, axes এবং series বিকল্পগুলি একসাথে চার্টের দ্বৈত-Y উপস্থিতি নির্দিষ্ট করে। series বিকল্পটি নির্দিষ্ট করে যে প্রতিটির জন্য কোন অক্ষটি ব্যবহার করতে হবে ( 'Temps' এবং 'Daylight' ; ডেটা টেবিলের কলামের নামের সাথে তাদের কোনো সম্পর্ক থাকতে হবে না)। axes বিকল্পটি তারপর এই চার্টটিকে একটি ডুয়াল-ওয়াই চার্ট করে, বাম দিকে 'Temps' অক্ষ এবং ডানদিকে 'Daylight' অক্ষ স্থাপন করে।

ক্লাসিক কোডে, এটি সামান্য ভিন্ন। axes বিকল্পের পরিবর্তে, আপনি vAxes বিকল্পটি ব্যবহার করবেন (বা অনুভূমিকভাবে অভিমুখী চার্টে hAxes )। এছাড়াও, নাম ব্যবহার করার পরিবর্তে, আপনি targetAxisIndex বিকল্পটি ব্যবহার করে একটি অক্ষের সাথে একটি সিরিজ সমন্বয় করতে সূচক নম্বরগুলি ব্যবহার করবেন।

উপাদান
      var materialOptions = {
        chart: {
          title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
        },
        width: 900,
        height: 500,
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        }
      };
ক্লাসিক
      var classicOptions = {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
        width: 900,
        height: 500,
        // Gives each series an axis that matches the vAxes number below.
        series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1}
        },
        vAxes: {
          // Adds titles to each axis.
          0: {title: 'Temps (Celsius)'},
          1: {title: 'Daylight'}
        },
        hAxis: {
          ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
                  new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
                  new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
                 ]
        },
        vAxis: {
          viewWindow: {
            max: 30
          }
        }
      };

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

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

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

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>

লোড হচ্ছে

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

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

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

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

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

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

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

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

কলাম:

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

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

নাম
একত্রিত লক্ষ্য
কিভাবে একাধিক ডেটা নির্বাচন টুলটিপগুলিতে রোল আপ করা হয়:
  • 'category' : x-মান দ্বারা নির্বাচিত ডেটা গোষ্ঠীবদ্ধ করুন।
  • 'series' : সিরিজ অনুসারে নির্বাচিত ডেটা গ্রুপ করুন।
  • 'auto' : সমস্ত নির্বাচনের একই x-মান থাকলে এবং অন্যথায় সিরিজ অনুসারে নির্বাচিত ডেটাকে x-মান অনুসারে গোষ্ঠীবদ্ধ করুন।
  • 'none' : প্রতি নির্বাচনের জন্য শুধুমাত্র একটি টুলটিপ দেখান।
aggregationTarget প্রায়শই selectionMode এবং tooltip.trigger এর সাথে টেন্ডেম ব্যবহার করা হবে, যেমন:
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.startup

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

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

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

  • 'রৈখিক' - স্থির গতি।
  • 'ইন' - ইজ ইন - ধীরে শুরু করুন এবং গতি বাড়ান।
  • 'আউট' - সহজ আউট - দ্রুত শুরু করুন এবং ধীরে ধীরে করুন।
  • 'inAndOut' - সহজে প্রবেশ এবং আউট - ধীর শুরু করুন, গতি বাড়ান, তারপর ধীর করুন।
প্রকার: স্ট্রিং
ডিফল্ট: 'লিনিয়ার'
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.stem.color দিয়ে রঙ, annotations.datum.stem.length সহ স্টেমের দৈর্ঘ্য এবং annotations.datum.style সহ শৈলী নিয়ন্ত্রণ করতে পারেন।
প্রকার: বস্তু
ডিফল্ট: রঙ হল "কালো"; দৈর্ঘ্য 12; শৈলী হল "বিন্দু"।
annotations.domain
টীকা সমর্থন করে এমন চার্টের জন্য, annotations.domain অবজেক্ট আপনাকে একটি ডোমেনের জন্য দেওয়া টীকাগুলির জন্য Google চার্টের পছন্দকে ওভাররাইড করতে দেয় (চার্টের প্রধান অক্ষ, যেমন একটি সাধারণ লাইন চার্টে X অক্ষ)। আপনি annotations.domain.stem.color দিয়ে রঙ নিয়ন্ত্রণ করতে পারেন, annotations.domain.stem.length দিয়ে স্টেমের দৈর্ঘ্য এবং annotations.domain.style দিয়ে শৈলী নিয়ন্ত্রণ করতে পারেন।
প্রকার: বস্তু
ডিফল্ট: রঙ হল "কালো"; দৈর্ঘ্য 5; শৈলী হল "বিন্দু"।
annotations.high Contrast
টীকা সমর্থন করে এমন চার্টের জন্য, annotations.highContrast বুলিয়ান আপনাকে টীকা রঙের Google চার্টের পছন্দকে ওভাররাইড করতে দেয়৷ ডিফল্টরূপে, annotations.highContrast সত্য, যার কারণে চার্টগুলি ভাল বৈসাদৃশ্য সহ একটি টীকা রঙ নির্বাচন করে: অন্ধকার ব্যাকগ্রাউন্ডে হালকা রং এবং আলোতে গাঢ়। আপনি যদি annotations.highContrast কে মিথ্যাতে সেট করেন এবং আপনার নিজস্ব টীকা রঙ নির্দিষ্ট না করেন, Google চার্ট টীকাটির জন্য ডিফল্ট সিরিজের রঙ ব্যবহার করবে:
প্রকার: বুলিয়ান
ডিফল্ট: সত্য
annotations.stem
টীকা সমর্থন করে এমন চার্টের জন্য, annotations.stem অবজেক্ট আপনাকে স্টেম শৈলীর জন্য Google চার্টের পছন্দকে ওভাররাইড করতে দেয়। আপনি annotations.stem.color দিয়ে রঙ এবং annotations.stem.length দিয়ে স্টেমের দৈর্ঘ্য নিয়ন্ত্রণ করতে পারেন। মনে রাখবেন যে স্টেম দৈর্ঘ্য বিকল্পটি '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 কালার স্ট্রিং হিসেবে।

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

চার্ট এলাকার অবস্থান এবং আকার কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু (যেখানে অক্ষ এবং কিংবদন্তি বাদ দিয়ে চার্ট নিজেই আঁকা হয়)। দুটি বিন্যাস সমর্থিত: একটি সংখ্যা, বা একটি সংখ্যা অনুসরণ করে %৷ একটি সাধারণ সংখ্যা পিক্সেলের একটি মান; % দ্বারা অনুসরণ করা একটি সংখ্যা একটি শতাংশ। উদাহরণ: 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

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

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

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

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

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

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

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

প্রকার: 1 বা -1
ডিফল্ট: 1
hAxis.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 অক্ষের জন্য সমর্থিত।

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

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

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

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

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

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

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

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

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

সংলগ্ন গ্রিডলাইনগুলির মধ্যে আকারের একটি বিন্যাস (ডাটা মান হিসাবে, পিক্সেল নয়)। এই বিকল্পটি এই সময়ে শুধুমাত্র সাংখ্যিক অক্ষের জন্য, কিন্তু এটি gridlines.units.<unit>.interval বিকল্পগুলির সাথে সাদৃশ্যপূর্ণ যা শুধুমাত্র তারিখ এবং সময়ের জন্য ব্যবহৃত হয়। রৈখিক স্কেলগুলির জন্য, ডিফল্ট হল [1, 2, 2.5, 5] যার অর্থ গ্রিডলাইন মানগুলি প্রতিটি ইউনিটে (1), জোড় একক (2) বা 2.5 বা 5 এর গুণিতকগুলিতে পড়তে পারে। 10 গুণের যে কোনও শক্তি এই মানগুলিও বিবেচনা করা হয় (যেমন [10, 20, 25, 50] এবং [.1, .2, .25, .5])। লগ স্কেলগুলির জন্য, ডিফল্ট হল [1, 2, 5] ।

প্রকার: 1 এবং 10 এর মধ্যে সংখ্যা, 10 সহ নয়।
ডিফল্ট: গণনা করা
hAxis.gridlines.minSpacing

হ্যাক্সিস প্রধান গ্রিডলাইনের মধ্যে ন্যূনতম স্ক্রীন স্পেস, পিক্সেলে। প্রধান গ্রিডলাইনগুলির জন্য ডিফল্ট হল লিনিয়ার স্কেলের জন্য 40 এবং লগ স্কেলের জন্য 20 ৷ আপনি যদি count নির্দিষ্ট করেন এবং minSpacing না করেন তবে minSpacing গণনা থেকে গণনা করা হয়। এবং বিপরীতভাবে, আপনি যদি minSpacing উল্লেখ করেন এবং count না করেন তবে গণনাটি মিনস্পেসিং থেকে গণনা করা হয়। আপনি উভয় নির্দিষ্ট করলে, minSpacing ওভাররাইড করে।

প্রকার: সংখ্যা
ডিফল্ট: গণনা করা
hAxis.gridlines.multiple

সমস্ত গ্রিডলাইন এবং টিক মান এই বিকল্পের মানের একাধিক হতে হবে। মনে রাখবেন, ব্যবধানের বিপরীতে, গুণের 10 গুণের ক্ষমতা বিবেচনা করা হয় না। সুতরাং আপনি gridlines.multiple = 1 নির্দিষ্ট করে টিকগুলিকে পূর্ণসংখ্যা হতে বাধ্য করতে পারেন, অথবা gridlines.multiple = 1000 এর গুণিতক হতে বাধ্য করতে পারেন।

প্রকার: সংখ্যা
ডিফল্ট: 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 বিকল্পের অনুরূপ অনুভূমিক অক্ষের ছোট গ্রিডলাইনগুলি কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু৷

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

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

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

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

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

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

minorGridlines.interval বিকল্পটি প্রধান গ্রিডলাইন ব্যবধান বিকল্পের মতো, তবে যে ব্যবধানটি বেছে নেওয়া হয়েছে তা সর্বদা প্রধান গ্রিডলাইন ব্যবধানের একটি সমান ভাজক হবে। রৈখিক স্কেলগুলির জন্য ডিফল্ট ব্যবধান হল [1, 1.5, 2, 2.5, 5] , এবং লগ স্কেলগুলির জন্য হল [1, 2, 5] ।

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

ন্যূনতম প্রয়োজনীয় স্থান, পিক্সেলে, সংলগ্ন ছোট গ্রিডলাইনের মধ্যে এবং ছোট এবং বড় গ্রিডলাইনের মধ্যে। ডিফল্ট মান হল লিনিয়ার স্কেলের জন্য প্রধান গ্রিডলাইনের 1/2 মিনিট স্পেসিং এবং লগ স্কেলের জন্য 1/5 মিনিট স্পেসিং৷

প্রকার: সংখ্যা
ডিফল্ট: গণনা করা
hAxis.minorGridlines.multiple

প্রধান gridlines.multiple জন্য একই.

প্রকার: সংখ্যা
ডিফল্ট: 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 বৈশিষ্ট্য যা অনুভূমিক অক্ষকে একটি লগারিদমিক স্কেল করে (সমস্ত মান ধনাত্মক হওয়া প্রয়োজন)। হ্যাঁ জন্য সত্য সেট করুন.

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

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

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

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

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

প্রকার: স্ট্রিং
ডিফল্ট: নাল
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] }

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

প্রকার: উপাদানের অ্যারে
ডিফল্ট: স্বয়ংক্রিয়
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.allowContainerBoundaryTextCutoff

মিথ্যা হলে, চার্ট ধারক দ্বারা ক্রপ করার অনুমতি না দিয়ে বাইরেরতম লেবেলগুলিকে লুকিয়ে রাখবে৷ সত্য হলে, লেবেল ক্রপ করার অনুমতি দেবে।

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

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

সত্য হলে, একটি কোণে অনুভূমিক অক্ষের পাঠ্য আঁকুন, অক্ষ বরাবর আরও পাঠ্য ফিট করতে সাহায্য করতে; মিথ্যা হলে, অনুভূমিক অক্ষের টেক্সট সোজা আঁকুন। ডিফল্ট আচরণ হল টেক্সটকে তির্যক করা যদি এটি সোজা আঁকার সময় সব ফিট না হয়। লক্ষ্য করুন যে এই বিকল্পটি তখনই পাওয়া যায় যখন hAxis.textPosition 'out' এ সেট করা থাকে (যা ডিফল্ট)। তারিখ এবং সময়ের জন্য ডিফল্ট false .

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

অনুভূমিক অক্ষ পাঠের কোণ, যদি এটি তির্যকভাবে আঁকা হয়। hAxis.slantedText false হলে বা স্বয়ংক্রিয় মোডে থাকলে উপেক্ষা করা হয়, এবং চার্ট অনুভূমিকভাবে পাঠ্য আঁকার সিদ্ধান্ত নিয়েছে। কোণটি ধনাত্মক হলে ঘূর্ণন ঘড়ির কাঁটার বিপরীতে এবং ঋণাত্মক হলে ঘড়ির কাঁটার দিকে।

প্রকার: সংখ্যা, -90-90
ডিফল্ট: 30
hAxis.max Alternation

অনুভূমিক অক্ষ পাঠের সর্বোচ্চ সংখ্যক স্তর। যদি অক্ষ টেক্সট লেবেলগুলি খুব বেশি জমজমাট হয়ে যায়, তাহলে সার্ভারটি পার্শ্ববর্তী লেবেলগুলিকে উপরে বা নীচে স্থানান্তরিত করতে পারে যাতে লেবেলগুলিকে কাছাকাছি ফিট করা যায়৷ এই মানটি ব্যবহার করার জন্য সর্বাধিক সংখ্যক স্তর নির্দিষ্ট করে; সার্ভার কম মাত্রা ব্যবহার করতে পারে, যদি লেবেল ওভারল্যাপিং ছাড়াই ফিট হতে পারে। তারিখ এবং সময়ের জন্য, ডিফল্ট হল 1।

প্রকার: সংখ্যা
ডিফল্ট: 2
hAxis.maxTextLines

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

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

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

প্রকার: সংখ্যা
ডিফল্ট: hAxis.textStyle.fontSize এর মান
hAxis.showTextEvery

কয়টি অনুভূমিক অক্ষের লেবেল দেখাতে হবে, যেখানে 1 মানে প্রতিটি লেবেল দেখান, 2 মানে প্রত্যেকটি লেবেল দেখান ইত্যাদি। ডিফল্ট হল ওভারল্যাপ না করে যতটা সম্ভব লেবেল দেখানোর চেষ্টা করা।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

এটি isStacked: true/'percent'/'relative'/'absolute' বিকল্পের সাথে এরিয়া চার্ট দ্বারা সমর্থিত নয় ।

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

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

{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>}
লাইনড্যাশস্টাইল

ড্যাশড লাইনের জন্য অন-অফ প্যাটার্ন। উদাহরণস্বরূপ, [4, 4] 4-দৈর্ঘ্যের ড্যাশের পুনরাবৃত্তি করবে এবং 4-দৈর্ঘ্যের ফাঁক দ্বারা অনুসরণ করবে, এবং [5, 1, 3] একটি 5-দৈর্ঘ্য ড্যাশ পুনরাবৃত্তি করবে, একটি 1-দৈর্ঘ্যের ব্যবধান, একটি 3-দৈর্ঘ্যের ড্যাশ, একটি 5-দৈর্ঘ্যের ব্যবধান, একটি 1-দৈর্ঘ্যের ড্যাশ এবং একটি 3-দৈর্ঘ্যের ব্যবধান। আরও তথ্যের জন্য ড্যাশড লাইন দেখুন।

প্রকার: সংখ্যার অ্যারে
ডিফল্ট: নাল
লাইন প্রস্থ

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

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

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

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

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

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

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

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

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

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

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

সত্যে সেট করা হলে, ডান থেকে বামে সিরিজ আঁকা হবে। ডিফল্ট হল বাম থেকে ডানে আঁকা।

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

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

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

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

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

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

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

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

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

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

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

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

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

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}

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

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

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

{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 এর জন্য একটি ধনাত্মক সংখ্যা উল্লেখ করলে, এটি গ্রিডলাইনের মধ্যে minSpacing গণনা করতে ব্যবহৃত হবে। আপনি শুধুমাত্র একটি গ্রিডলাইন আঁকতে 1 এর মান নির্দিষ্ট করতে পারেন, অথবা কোন গ্রিডলাইন আঁকতে 0 মান উল্লেখ করতে পারেন। অন্যান্য বিকল্পের উপর ভিত্তি করে স্বয়ংক্রিয়ভাবে গ্রিডলাইনের সংখ্যা গণনা করতে -1 নির্দিষ্ট করুন, যা ডিফল্ট।

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

সংলগ্ন গ্রিডলাইনগুলির মধ্যে আকারের একটি বিন্যাস (ডাটা মান হিসাবে, পিক্সেল নয়)। এই বিকল্পটি এই সময়ে শুধুমাত্র সাংখ্যিক অক্ষের জন্য, কিন্তু এটি gridlines.units.<unit>.interval বিকল্পগুলির সাথে সাদৃশ্যপূর্ণ যা শুধুমাত্র তারিখ এবং সময়ের জন্য ব্যবহৃত হয়। রৈখিক স্কেলগুলির জন্য, ডিফল্ট হল [1, 2, 2.5, 5] যার অর্থ গ্রিডলাইন মানগুলি প্রতিটি ইউনিটে (1), জোড় একক (2) বা 2.5 বা 5 এর গুণিতকগুলিতে পড়তে পারে। 10 গুণের যে কোনও শক্তি এই মানগুলিও বিবেচনা করা হয় (যেমন [10, 20, 25, 50] এবং [.1, .2, .25, .5])। লগ স্কেলগুলির জন্য, ডিফল্ট হল [1, 2, 5] ।

প্রকার: 1 এবং 10 এর মধ্যে সংখ্যা, 10 সহ নয়।
ডিফল্ট: গণনা করা
vAxis.gridlines.minSpacing

হ্যাক্সিস প্রধান গ্রিডলাইনের মধ্যে ন্যূনতম স্ক্রীন স্পেস, পিক্সেলে। প্রধান গ্রিডলাইনগুলির জন্য ডিফল্ট হল লিনিয়ার স্কেলের জন্য 40 এবং লগ স্কেলের জন্য 20 ৷ আপনি যদি count নির্দিষ্ট করেন এবং minSpacing না করেন তবে minSpacing গণনা থেকে গণনা করা হয়। এবং বিপরীতভাবে, আপনি যদি minSpacing উল্লেখ করেন এবং count না করেন তবে গণনাটি মিনস্পেসিং থেকে গণনা করা হয়। আপনি উভয় নির্দিষ্ট করলে, minSpacing ওভাররাইড করে।

প্রকার: সংখ্যা
ডিফল্ট: গণনা করা
vAxis.gridlines.multiple

সমস্ত গ্রিডলাইন এবং টিক মান এই বিকল্পের মানের একাধিক হতে হবে। মনে রাখবেন, ব্যবধানের বিপরীতে, গুণের 10 গুণের ক্ষমতা বিবেচনা করা হয় না। সুতরাং আপনি gridlines.multiple = 1 নির্দিষ্ট করে টিকগুলিকে পূর্ণসংখ্যা হতে বাধ্য করতে পারেন, অথবা gridlines.multiple = 1000 এর গুণিতক হতে বাধ্য করতে পারেন।

প্রকার: সংখ্যা
ডিফল্ট: 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.interval

minorGridlines.interval বিকল্পটি প্রধান গ্রিডলাইন ব্যবধান বিকল্পের মতো, তবে যে ব্যবধানটি বেছে নেওয়া হয়েছে তা সর্বদা প্রধান গ্রিডলাইন ব্যবধানের একটি সমান ভাজক হবে। রৈখিক স্কেলগুলির জন্য ডিফল্ট ব্যবধান হল [1, 1.5, 2, 2.5, 5] , এবং লগ স্কেলগুলির জন্য হল [1, 2, 5] ।

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

ন্যূনতম প্রয়োজনীয় স্থান, পিক্সেলে, সংলগ্ন ছোট গ্রিডলাইনের মধ্যে এবং ছোট এবং বড় গ্রিডলাইনের মধ্যে। ডিফল্ট মান হল লিনিয়ার স্কেলের জন্য প্রধান গ্রিডলাইনের 1/2 মিনিট স্পেসিং এবং লগ স্কেলের জন্য 1/5 মিনিট স্পেসিং৷

প্রকার: সংখ্যা
ডিফল্ট: গণনা করা
vAxis.minorGridlines.multiple

প্রধান gridlines.multiple জন্য একই.

প্রকার: সংখ্যা
ডিফল্ট: 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: { logscale: true } ।
  • 'মিররলগ' - লগারিদমিক স্কেলিং যাতে ঋণাত্মক এবং শূন্য মান প্লট করা হয়। একটি ঋণাত্মক সংখ্যার প্লট করা মান হল পরম মানের লগের ঋণাত্মক। 0 এর কাছাকাছি মান একটি রৈখিক স্কেলে প্লট করা হয়।

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

প্রকার: স্ট্রিং
ডিফল্ট: নাল
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() কল করুন।

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

ডেটা নীতি

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