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

ওভারভিউ

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

একটি বুদ্বুদ চার্ট দুই থেকে চার মাত্রা সহ একটি ডেটা সেট কল্পনা করতে ব্যবহৃত হয়। প্রথম দুটি মাত্রা স্থানাঙ্ক হিসাবে কল্পনা করা হয়, তৃতীয়টি রঙ এবং চতুর্থটি আকার হিসাবে।

উদাহরণ 

<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(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
      };

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

সংখ্যা দ্বারা রঙ

আপনি একটি মানের অনুপাতে বুদবুদগুলিকে রঙ করতে colorAxis বিকল্পটি ব্যবহার করতে পারেন, যেমনটি নীচের উদাহরণে দেখানো হয়েছে। 

<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([
          ['ID', 'X', 'Y', 'Temperature'],
          ['',   80,  167,      120],
          ['',   79,  136,      130],
          ['',   78,  184,      50],
          ['',   72,  278,      230],
          ['',   81,  200,      210],
          ['',   72,  170,      100],
          ['',   68,  477,      80]
        ]);

        var options = {
          colorAxis: {colors: ['yellow', 'red']}
        };

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

লেবেল কাস্টমাইজ করা

আপনি bubble.textStyle বিকল্পের সাহায্যে বুদ্বুদ টাইপফেস, ফন্ট এবং রঙ নিয়ন্ত্রণ করতে পারেন:

অপশন
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        fontSize: 12,
        fontName: 'Times-Roman',
        color: 'green',
        bold: true,
        italic: true
      }
    }
  };
সম্পূর্ণ ওয়েব পেজ
<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([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            fontSize: 12,
            fontName: 'Times-Roman',
            color: 'green',
            bold: true,
            italic: true
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));

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

উপরের চার্টের লেবেলগুলি পড়া কঠিন, এবং একটি কারণ হল তাদের চারপাশে সাদা স্থান৷ এটাকে aura বলা হয়, এবং আপনি যদি সেগুলি ছাড়া আপনার চার্ট পছন্দ করেন, তাহলে আপনি bubble.textStyle.auraColor কে 'none' তে সেট করতে পারেন।

অপশন
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        auraColor: 'none'
      }
    }
  };
সম্পূর্ণ ওয়েব পেজ
<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([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            auraColor: 'none',
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));

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

লোড হচ্ছে

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

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

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

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

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

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

কলাম:

কলাম 0 কলাম 1 কলাম 2 কলাম 3 (ঐচ্ছিক) কলাম 4 (ঐচ্ছিক)
উদ্দেশ্য: বুদবুদের আইডি (নাম) এক্স স্থানাঙ্ক Y সমন্বয় হয় একটি সিরিজ আইডি বা একটি মান যা গ্রেডিয়েন্ট স্কেলে একটি রঙের প্রতিনিধিত্ব করে, কলামের প্রকারের উপর নির্ভর করে:
  • স্ট্রিং
    একটি স্ট্রিং যা একই সিরিজের বুদবুদ শনাক্ত করে। একই সিরিজের সমস্ত বুদবুদ সনাক্ত করতে একই মান ব্যবহার করুন; একই সিরিজের বুদবুদ একই রঙ বরাদ্দ করা হবে. series অপশন ব্যবহার করে সিরিজ কনফিগার করা যেতে পারে।
  • সংখ্যা
    একটি মান যা colorAxis বিকল্প ব্যবহার করে একটি গ্রেডিয়েন্ট স্কেলে একটি প্রকৃত রঙে ম্যাপ করা হয়।
 আকার; এই কলামের মানগুলি sizeAxis বিকল্প ব্যবহার করে প্রকৃত পিক্সেল মানগুলিতে ম্যাপ করা হয়।
ডেটা টাইপ: স্ট্রিং সংখ্যা সংখ্যা স্ট্রিং বা সংখ্যা সংখ্যা

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

নাম
animation.duration

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

বুদবুদের চাক্ষুষ বৈশিষ্ট্য কনফিগার করার জন্য সদস্যদের সাথে একটি বস্তু।

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

বুদবুদের অস্বচ্ছতা, যেখানে 0 সম্পূর্ণ স্বচ্ছ এবং 1 সম্পূর্ণ অস্বচ্ছ।

প্রকার: 0.0 এবং 1.0 এর মধ্যে সংখ্যা
ডিফল্ট: 0.8
bubble.stroke

বুদবুদের স্ট্রোকের রঙ।

প্রকার: স্ট্রিং
ডিফল্ট: '#ccc'
bubble.textStyle

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

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

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

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

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

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
প্রকার: বস্তু
ডিফল্ট: নাল
colorAxis.minValue

উপস্থিত থাকলে, চার্ট রঙের ডেটার জন্য একটি ন্যূনতম মান নির্দিষ্ট করে। এই মান এবং কম রঙের ডেটা মানগুলি colorAxis.colors পরিসরে প্রথম রঙ হিসাবে রেন্ডার করা হবে।

প্রকার: সংখ্যা
ডিফল্ট: চার্ট ডেটাতে রঙের কলামের ন্যূনতম মান
colorAxis.maxValue

উপস্থিত থাকলে, চার্ট রঙের ডেটার জন্য সর্বোচ্চ মান নির্দিষ্ট করে। এই মান এবং উচ্চতর রঙের ডেটা মানগুলি colorAxis.colors পরিসরে শেষ রঙ হিসাবে রেন্ডার করা হবে।

প্রকার: সংখ্যা
ডিফল্ট: চার্ট ডেটাতে রঙের কলামের সর্বাধিক মান
colorAxis.values

উপস্থিত থাকলে, মানগুলি কীভাবে রঙের সাথে যুক্ত হয় তা নিয়ন্ত্রণ করে। প্রতিটি মান colorAxis.colors অ্যারেতে সংশ্লিষ্ট রঙের সাথে যুক্ত। এই মানগুলি চার্টের রঙের ডেটাতে প্রযোজ্য। এখানে উল্লিখিত মানগুলির একটি গ্রেডিয়েন্ট অনুযায়ী রঙ করা হয়। এই বিকল্পের জন্য একটি মান নির্দিষ্ট না করা [minValue, maxValue] নির্দিষ্ট করার সমতুল্য।

প্রকার: সংখ্যার অ্যারে
ডিফল্ট: নাল
colorAxis.colors

ভিজ্যুয়ালাইজেশনে মান নির্ধারণের জন্য রং। স্ট্রিংগুলির একটি অ্যারে, যেখানে প্রতিটি উপাদান একটি HTML রঙের স্ট্রিং, উদাহরণস্বরূপ: colorAxis: {colors:['red','#004411']} । আপনার কমপক্ষে দুটি মান থাকতে হবে; গ্রেডিয়েন্ট আপনার সমস্ত মান অন্তর্ভুক্ত করবে, সাথে গণনা করা মধ্যস্থতামূলক মান, প্রথম রঙটি সবচেয়ে ছোট মান হিসাবে এবং শেষ রঙটি সর্বোচ্চ হিসাবে।

প্রকার: রঙের স্ট্রিং এর অ্যারে
ডিফল্ট: নাল
colorAxis.legend

একটি বস্তু যা গ্রেডিয়েন্ট রঙের কিংবদন্তির শৈলী নির্দিষ্ট করে।

প্রকার: বস্তু
ডিফল্ট: নাল
colorAxis.legend.position

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

  • 'শীর্ষ' - চার্টের উপরে।
  • 'নিচে' - চার্টের নিচে।
  • 'in' - চার্টের ভিতরে, শীর্ষে।
  • 'কোনোটি' - কোনো কিংবদন্তি প্রদর্শিত হয় না।
প্রকার: বস্তু
ডিফল্ট: 'শীর্ষ'
colorAxis.legend.textStyle

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

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

সাংখ্যিক লেবেলগুলির জন্য একটি বিন্যাস স্ট্রিং৷ এটি আইসিইউ প্যাটার্ন সেটের একটি উপসেট। উদাহরণস্বরূপ, {numberFormat:'.##'} 10.666, 10.6, এবং 10 মানের জন্য "10.66", "10.6", এবং "10.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 এর জন্য একটি ধনাত্মক সংখ্যা উল্লেখ করলে, এটি গ্রিডলাইনের মধ্যে 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>}
নির্বাচন মোড

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

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

অবজেক্টের একটি অবজেক্ট, যেখানে কীগুলি হল সিরিজের নাম (রঙের কলামের মান) এবং প্রতিটি বস্তু চার্টে সংশ্লিষ্ট সিরিজের বিন্যাস বর্ণনা করে। যদি একটি সিরিজ বা একটি মান নির্দিষ্ট করা না থাকে, তাহলে বিশ্বব্যাপী মান ব্যবহার করা হবে। প্রতিটি বস্তু নিম্নলিখিত বৈশিষ্ট্য সমর্থন করে:

  • color - এই সিরিজের জন্য ব্যবহার করা রঙ। একটি বৈধ HTML রঙের স্ট্রিং নির্দিষ্ট করুন।
  • visibleInLegend - একটি বুলিয়ান মান, যেখানে সত্য মানে সিরিজটিতে একটি কিংবদন্তি এন্ট্রি থাকা উচিত এবং মিথ্যা মানে এটি করা উচিত নয়৷ ডিফল্ট সত্য.
উদাহরণ: 
series: {'Europe': {color: 'green'}}
প্রকার: নেস্টেড অবজেক্ট সহ অবজেক্ট
ডিফল্ট: {}
আকার অক্ষ

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

 {minValue: 0,  maxSize: 20}
প্রকার: বস্তু
ডিফল্ট: নাল
sizeAxis.maxSize

সবচেয়ে বড় সম্ভাব্য বুদবুদের সর্বোচ্চ ব্যাসার্ধ, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: 30
sizeAxis.maxValue

sizeAxis.maxSize এ ম্যাপ করার জন্য আকারের মান (চার্ট ডেটাতে প্রদর্শিত হয়)। বড় মান এই মান ক্রপ করা হবে.

প্রকার: সংখ্যা
ডিফল্ট: চার্ট ডেটাতে আকারের কলামের সর্বোচ্চ মান
sizeAxis.minSize

ক্ষুদ্রতম সম্ভাব্য বুদ্বুদের সর্বনিম্ন ব্যাসার্ধ, পিক্সেলে।

প্রকার: সংখ্যা
ডিফল্ট: 5
sizeAxis.minValue

sizeAxis.minSize এ ম্যাপ করার জন্য আকারের মান (চার্ট ডেটাতে প্রদর্শিত হয়)। ছোট মান এই মান ক্রপ করা হবে.

প্রকার: সংখ্যা
ডিফল্ট: চার্ট ডেটাতে আকারের কলামের ন্যূনতম মান
বাবলসবাই সাইজ বাছাই

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

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

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

  • 'সর্বোচ্চ' - চার্টের ক্ষেত্রফলকে সর্বাধিক করে, এবং লেজেন্ড এবং লেবেলের সমস্ত লেবেল আঁকে। নিম্নলিখিত বিকল্পগুলি সেট করে: 
    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.isHtml

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

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

প্রকার: বুলিয়ান
ডিফল্ট: মিথ্যা
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' - টুলটিপ প্রদর্শিত হবে না।
  • 'নির্বাচন' - ব্যবহারকারী উপাদান নির্বাচন করলে টুলটিপ প্রদর্শিত হবে।
প্রকার: স্ট্রিং
ডিফল্ট: 'ফোকাস'
ভ্যাক্সিস

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

{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.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: { 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() কল করুন।

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

ডেটা নীতি

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