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

ওভারভিউ

একটি পাই চার্ট যা ব্রাউজারের মধ্যে 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(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

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

একটি 3D পাই চার্ট তৈরি করা

আপনি যদি is3D বিকল্পটিকে true সেট করেন, আপনার পাই চার্টটি এমনভাবে আঁকা হবে যেন এটির তিনটি মাত্রা রয়েছে:

is3D ডিফল্টরূপে false , তাই এখানে আমরা স্পষ্টভাবে এটি true সেট করেছি:

<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([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

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

একটি ডোনাট চার্ট তৈরি করা

একটি ডোনাট চার্ট হল একটি পাই চার্ট যার কেন্দ্রে একটি ছিদ্র রয়েছে। আপনি pieHole বিকল্পের সাথে ডোনাট চার্ট তৈরি করতে পারেন:

pieHole বিকল্পটি 0 এবং 1 এর মধ্যে একটি সংখ্যাতে সেট করা উচিত, গর্ত এবং চার্টের মধ্যে ব্যাসার্ধের অনুপাতের সাথে সঙ্গতিপূর্ণ। 0.4 এবং 0.6 এর মধ্যে সংখ্যাগুলি বেশিরভাগ চার্টে সেরা দেখাবে৷ 1 এর সমান বা তার বেশি মান উপেক্ষা করা হবে এবং 0 এর মান সম্পূর্ণরূপে আপনার পাইহোল বন্ধ করে দেবে।

<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([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

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

আপনি pieHole এবং is3D বিকল্পগুলি একত্রিত করতে পারবেন না; যদি আপনি করেন, pieHole উপেক্ষা করা হবে।

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

অপশন
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
সম্পূর্ণ এইচটিএমএল
<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([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

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

একটি পাই চার্ট ঘোরানো

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

এখানে, আমরা চার্টটিকে ঘড়ির কাঁটার দিকে 100 ডিগ্রী ঘুরিয়ে পাই pieStartAngle: 100 এর একটি বিকল্প দিয়ে ঘোরান। (তাই বেছে নেওয়া হয়েছে কারণ সেই নির্দিষ্ট কোণটি স্লাইসের ভিতরে "ইতালীয়" লেবেলটিকে ফিট করার জন্য ঘটে।)

<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([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

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

একটি স্লাইস বিস্ফোরণ

আপনি slices বিকল্পের offset সম্পত্তি সহ চার্টের বাকি অংশ থেকে পাই স্লাইসগুলি আলাদা করতে পারেন:

একটি স্লাইস আলাদা করতে, একটি slices অবজেক্ট তৈরি করুন এবং উপযুক্ত স্লাইস নম্বরটি 0 এবং 1-এর মধ্যে একটি offset বরাদ্দ করুন। নীচে, আমরা 4 (গুজরাটি), 12 (মারাঠি), 14 (ওড়িয়া) এবং 15 (পাঞ্জাবী) স্লাইসগুলিতে ধীরে ধীরে বড় অফসেটগুলি বরাদ্দ করি। ):

<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([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

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

স্লাইস অপসারণ

একটি স্লাইস বাদ দিতে, রঙটি 'transparent' এ পরিবর্তন করুন:

এছাড়াও আমরা চার্টটি 135 ডিগ্রী ঘোরানোর জন্য pieStartAngle ব্যবহার করেছি, স্লাইস থেকে টেক্সট সরাতে pieSliceText এবং টুলটিপ অক্ষম করতে tooltip.trigger ব্যবহার করেছি:

<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([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

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

স্লাইস দৃশ্যমানতা থ্রেশহোল্ড

আপনি একটি পাই স্লাইস পৃথকভাবে রেন্ডার করার জন্য থ্রেশহোল্ড হিসাবে একটি মান সেট করতে পারেন। এই মানটি চার্টের একটি ভগ্নাংশের সাথে মিলে যায় (পুরো চার্টটির মান 1 এর সাথে)। এই থ্রেশহোল্ডটিকে সমগ্রের শতাংশ হিসাবে সেট করতে, পছন্দসই শতাংশকে 100 দ্বারা ভাগ করুন (20% থ্রেশহোল্ডের জন্য, মানটি হবে 0.2)।

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

এই থ্রেশহোল্ডের চেয়ে ছোট যেকোনো স্লাইস একটি একক "অন্যান্য" স্লাইসে একত্রিত হবে, এবং থ্রেশহোল্ডের নীচে সমস্ত স্লাইসের মিলিত মান থাকবে৷ 

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

লোড হচ্ছে

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

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

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

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

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

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

কলাম:

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

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

নাম
পেছনের রং

চার্টের প্রধান এলাকার জন্য পটভূমির রঙ। একটি সাধারণ 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'] ।

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

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

প্রকার: বুলিয়ান
ডিফল্ট: সত্য
অক্ষরের আকার

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

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

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

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

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

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

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

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

সত্য হলে, একটি ত্রিমাত্রিক চার্ট প্রদর্শন করে।

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

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

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

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

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

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

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

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

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

  • 'নিচে' - চার্টের নীচে কিংবদন্তি প্রদর্শন করে।
  • 'লেবেলযুক্ত' - স্লাইসগুলিকে তাদের ডেটা মানগুলির সাথে সংযোগকারী লাইনগুলি আঁকে৷
  • 'left' - চার্টের বামে কিংবদন্তি প্রদর্শন করে।
  • 'কোনটিই' - কোনো কিংবদন্তি প্রদর্শন করে না।
  • 'right' - চার্টের ডানদিকে কিংবদন্তি প্রদর্শন করে।
  • 'শীর্ষ' - চার্টের উপরে কিংবদন্তি প্রদর্শন করে।
প্রকার: স্ট্রিং
ডিফল্ট: 'ডান'
legend.maxLines

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

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

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

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

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

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

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

0 এবং 1 এর মধ্যে থাকলে, একটি ডোনাট চার্ট প্রদর্শন করে। ছিদ্রটির ব্যাসার্ধ চার্টের ব্যাসার্ধের number সমান।

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

স্লাইস সীমানা রং. চার্ট দ্বিমাত্রিক হলেই প্রযোজ্য।

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

স্লাইসে প্রদর্শিত পাঠ্যের বিষয়বস্তু। নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • 'শতাংশ' - মোটের মধ্যে স্লাইস আকারের শতাংশ।
  • 'মান' - স্লাইসের পরিমাণগত মান।
  • 'লেবেল' - স্লাইসের নাম।
  • 'কোনোটি' - কোনো পাঠ্য প্রদর্শিত হয় না।
প্রকার: স্ট্রিং
ডিফল্ট: 'শতাংশ'
pieSliceTextStyle

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

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

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

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

কোণ, ডিগ্রী, দ্বারা চার্ট ঘোরানো. 0 এর ডিফল্ট প্রথম স্লাইসের বাম প্রান্তকে সরাসরি উপরে স্থির করবে।

প্রকার: সংখ্যা
ডিফল্ট: 0
বিপরীত বিভাগ

সত্য হলে, ঘড়ির কাঁটার বিপরীত দিকে স্লাইস আঁকে। ডিফল্ট হল ঘড়ির কাঁটার দিকে আঁকা।

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

স্লাইসভিসিবিলিটি থ্রেশহোল্ডের নীচে সমস্ত স্লাইস ধারণ করে এমন কম্বিনেশন স্লাইসের জন্য রঙ।

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

কম্বিনেশন স্লাইসের জন্য একটি লেবেল যা স্লাইসভিসিবিলিটি থ্রেশহোল্ডের নীচে সমস্ত স্লাইস ধারণ করে।

প্রকার: স্ট্রিং
ডিফল্ট: 'অন্যান্য'
টুকরা

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

  • color - এই স্লাইসের জন্য ব্যবহার করা রঙ। একটি বৈধ HTML রঙের স্ট্রিং নির্দিষ্ট করুন।
  • offset - বাকি পাই থেকে স্লাইসটিকে কত দূরে আলাদা করতে হবে, 0.0 (মোটেই নয়) থেকে 1.0 (পায়ের ব্যাসার্ধ)।
  • textStyle - এই স্লাইসের জন্য বিশ্বব্যাপী pieSliceTextStyle ওভাররাইড করে।

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

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

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

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
প্রকার: সংখ্যা
ডিফল্ট: অর্ধেক ডিগ্রি (.5/360 বা 1/720 বা .0014)
শিরোনাম

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

যখন ব্যবহারকারী একটি পাই স্লাইসের উপর ঘোরায় তখন কী তথ্য প্রদর্শন করতে হবে৷ নিম্নলিখিত মানগুলি সমর্থিত:

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

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

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

পদ্ধতি

পদ্ধতি
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()

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

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

ঘটনা

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

নাম
click

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

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

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

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

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

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

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

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

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

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

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

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

ডেটা নীতি

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