গুগল চার্ট থেকে প্যাডিং বা মার্জিনগুলি সরান

Question

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');

  var myData = {
    'Mushrooms': 3,
    'Onions': 1,
    'Olives': 1,
    'Zucchini': 1,
    'Pepperoni': 2
  };

  var rows = [];
  for (element in myData) {
      rows.push([element + " (" + myData[element] + ")", myData[element]])
  }
  data.addRows(rows);

  // Set chart options
  var options = {'title':'How Much Pizza I Ate Last Night',
                 'width':450,
                 'height':300};

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div id="chart_div"></div>

উদ্রেকর উদাহরণ

এই উদাহরণে আমি প্যাডিং বা মার্জিনগুলি কীভাবে সরিয়ে ফেলব?

Comments

আপনারা যদি লাইনের চার্টের বামে পরিমাপ করেছেন বলে কেউ যদি ন্যায়বিচার করতে চান তবে chartArea: {width: '70%', left: '30%'}আমার জন্য কৌশলটি করেছেন। সূত্র: কোড. google.com/p/google-visualization-api-issues/issues/…

— ইসমাইলএস

Answer 1

এপিআই ডকুমেন্টেশনে তালিকাভুক্ত কিছু কনফিগারেশন বিকল্পগুলি যোগ এবং সুর করার দ্বারা , আপনি প্রচুর বিভিন্ন স্টাইল তৈরি করতে পারেন। উদাহরণস্বরূপ, এখানে একটি সংস্করণ যে অপসারণ অতিরিক্ত ফাঁকা স্থান অধিকাংশ সেটিং দ্বারা chartArea.widthকরা 100% এবং chartArea.heightকরতে 80% এবং চলন্ত legend.positionথেকে নীচে :

// Set chart options
var options = {'title': 'How Much Pizza I Ate Last Night',
               'width': 350,
               'height': 400,
               'chartArea': {'width': '100%', 'height': '80%'},
               'legend': {'position': 'bottom'}
    };

আপনি যদি এটি আরও টিউন করতে চান তবে উপরের লিঙ্কটি থেকে এই মানগুলি পরিবর্তন করতে বা অন্যান্য বৈশিষ্ট্যগুলি ব্যবহার করে দেখুন।

Answer 2

আমি বেশ দেরি করে ফেলেছি তবে যে কোনও ব্যবহারকারী এটির জন্য অনুসন্ধান করতে পারেন এটি থেকে সহায়তা পেতে পারেন। বিকল্পগুলির মধ্যে আপনি চার্টআরিয়া নামে একটি নতুন প্যারামিটার পাস করতে পারেন ।

        var options = {
        chartArea:{left:10,top:20,width:"100%",height:"100%"}
    };

বাম এবং শীর্ষ বিকল্পগুলি বাম এবং উপরে থেকে প্যাডিংয়ের পরিমাণ নির্ধারণ করবে। আশা করি এটি সাহায্য করবে।

Comments

চার্টআরিয়া.টপ আমার গতিশীল আকারের ডিভের জন্য কৌশলটি করেছে। ধন্যবাদ।

— ব্লেমকিন 86

Answer 3

আমি এই একই সমস্যাটি নিয়ে বেশিরভাগ লোকের মতো এখানে পৌঁছেছি এবং হতবাক হয়ে পড়েছি যে উত্তরটির কোনওটি এমনকি দূরবর্তীভাবে কাজ করে না।

আগ্রহী প্রত্যেকের জন্য, আসল সমাধানটি এখানে:

... //rest of options
width: '100%',
height: '350',
chartArea:{
    left:5,
    top: 20,
    width: '100%',
    height: '350',
}
... //rest of options

"কী " বা "শীর্ষ" মানগুলির সাথে এখানে কীটির কোনও সম্পর্ক নেই । তবে এটি যে:

চার্ট এবং চার্ট-অঞ্চল উভয়ের মাত্রা SET হয় এবং একই ভ্যালুতে সেট করা হয়

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

Comments

আমার উত্তরের সংশোধন হিসাবে। এটি সত্যই "অতিরিক্ত" প্যাডিং / মার্জিন / হোয়াইটস্পেস সমস্যার সমাধান করবে। তবে, আপনি যদি অক্ষগুলির লেবেল এবং / অথবা কোনও কিংবদন্তি অন্তর্ভুক্ত করতে চান তবে আপনাকে চার্ট অঞ্চলের উচ্চতা এবং প্রস্থ হ্রাস করতে হবে যাতে বাইরের প্রস্থ / উচ্চতার কিছুটা নিচে। এটি চার্ট এপিআইটিকে "বলবে" যে এই বৈশিষ্ট্যগুলি প্রদর্শনের জন্য পর্যাপ্ত জায়গা রয়েছে। অন্যথায় এটি আনন্দের সাথে তাদের বাদ দেবে।

— পিমব্রউবার্স

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

— ডেভ বার্টন

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

— পিমব্রউভার্স

আমি রাজি, পিম। আপনি যখন প্রস্থ এবং / অথবা উচ্চতা অগ্রিম জানেন না (সম্ভবত আপনি পৃষ্ঠাগুলি প্রতিক্রিয়ার সাথে মানিয়ে নিতে চান) তখন আপনি ডিআইভিতে প্রস্থ এবং উচ্চতাটি প্রিসেট করতে পারবেন না। আমি কেবল ইঙ্গিত করছিলাম যে কেন আমি মনে করি যে অন্যান্য উত্তরগুলিতে প্রদত্ত সমাধানগুলি সেগুলির জন্য কাজ করে তবে আপনার পক্ষে কার্যকর হয়নি এবং আপনি যদি পারেন তবে ডিআইভিতে প্রস্থ এবং উচ্চতা নির্ধারণ করা কেন ভাল ধারণা।

— ডেভ বার্টন

@ ডেভবার্টন উল্লেখ করেছেন যে কারণে, সিএসএস গ্রিডের সাথে কাজ করা হলে (যা আমি) সম্ভবত এটি সঠিক উত্তর

— স্টিফেন আর

Answer 4

এটি ডক্সে অনুপস্থিত (আমি সংস্করণ ৪৩ ব্যবহার করছি), তবে আপনি আসলে চার্ট অঞ্চলের ডান এবং নীচের সম্পত্তিটি ব্যবহার করতে পারেন :

var options = {
  chartArea:{
    left:10,
    right:10, // !!! works !!!
    bottom:20,  // !!! works !!!
    top:20,
    width:"100%",
    height:"100%"
  }
};

সুতরাং সম্পূর্ণ প্রতিক্রিয়াশীল প্রস্থ এবং উচ্চতা ব্যবহার করা এবং কোনও অক্ষ লেবেল বা কিংবদন্তিগুলি ক্রপ হওয়া থেকে রোধ করা সম্ভব।

Comments

ডানটি ব্যবহার করতে সক্ষম হওয়া অবশ্যই একটি দুর্দান্ত সংযোজন, তবে একটি কলাম চার্টের ক্ষেত্রে উল্লম্ব অক্ষের জন্য সংখ্যার প্রয়োজন হলেও এটি জটিল হয়ে উঠবে যখন মানগুলি একটি ভাল বিট দ্বারা অস্থির হয় - উদাহরণস্বরূপ 0 - এর মধ্যে মানের সাথে একটি চার্ট - ১০০ এর জন্য 20 পিক্সেলের বাম মান প্রয়োজন, তবে 0 - 10 মিলিওয়ের জন্য 100 পিক্সেলের প্রয়োজন হবে এবং 100 পিক্সেল ব্যবহার করার পরে বেশ বড় ব্যবধান ছেড়ে যাবে যা আমি মনে করি আমাদের সকলের হাত থেকে মুক্তি পাওয়ার চেষ্টা করা হচ্ছে :) যদি না থাকে এমন একটি বিকল্প যা চার্টটি তার নিজের প্রস্থকে আমি হারিয়ে যাচ্ছি তার সামঞ্জস্য করতে দেয়। কীভাবে এই সমাধান করতে সক্ষম হতে পারে সে সম্পর্কে কোনও চিন্তাভাবনা?

— ব্যবহারকারী 3800174

দেখে মনে হচ্ছে তারা এটি 2 অক্টোবর, ২০১৫, এখানে নথিবদ্ধ করেছে: সংরক্ষণাগার.আইস

— ডেভ বার্টন

Answer 5

এই সম্ভাবনা রয়েছে যেমন আমান ভার্ক উল্লেখ করেছেন :

var options = {
    chartArea:{left:10,top:20,width:"100%",height:"100%"}
};

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

আপনি যদি সেই মার্জিনটি সরিয়ে নেন তবে আপনি কেবলমাত্র লেবেলের একটি অংশ বা কোনও লেবেলই দেখবেন না।

সুতরাং আপনার যদি কেবল একটি চার্ট টাইপ থাকে তবে আপনি আরমানের মতো মার্জিন এবং প্যাডিং পরিবর্তন করতে পারেন। তবে যদি স্যুইচ করা সম্ভব হয় তবে সেগুলি পরিবর্তন করবেন না।

Answer 6

এই জন্য বিশেষত একটি থিম উপলব্ধ

options: {
  theme: 'maximized'
}

গুগল চার্ট ডক্স থেকে:

বর্তমানে শুধুমাত্র একটি থিম উপলব্ধ:

'ম্যাক্সিমাইজড' - চার্টের ক্ষেত্রফল সর্বাধিক করে তোলে এবং কিংবদন্তি এবং সমস্ত লেবেলকে চার্টের অঞ্চলে আঁকেন। নিম্নলিখিত বিকল্পগুলি সেট করে:

chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}

Comments

এটি সেরা বিকল্প বলে মনে হচ্ছে। থিম সেট করার পরে: 'সর্বাধিকীকরণ করা' এখনও চেহারাটির সুরের জন্য যেমন সম্ভব উচ্চতা: '90%', পাঠ্য অবস্থান: 'আউট', ইত্যাদি

— জিরি ক্রিজ