Google चार्ट से पैडिंग या मार्जिन निकालें

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%'}तो मेरे लिए चाल चली। स्रोत: code.google.com/p/google-visualization-api-issues/issues/…

— IsmailS

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

chartArea.top ने मेरे गतिशील आकार के div के लिए चाल चली। धन्यवाद।

— ब्लैमकिनरी

Answer 3

मैं इसी मुद्दे के साथ ज्यादातर लोगों की तरह यहां पहुंचा, और हैरान रह गया कि जवाब में से किसी ने भी दूर से काम नहीं किया।

किसी के लिए भी, यहाँ वास्तविक समाधान है:

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

कुंजी यहाँ है कुछ भी नहीं है "छोड़" या "टॉप" मूल्यों के साथ क्या करना है। लेकिन इसके बजाय:

चार्ट और चार्ट-क्षेत्र दोनों के आयाम SET हैं और समान मूल्य पर सेट हैं

मेरे उत्तर के संशोधन के रूप में। उपरोक्त वास्तव में "अत्यधिक" पैडिंग / मार्जिन / व्हाट्सएप समस्या का समाधान करेगा। हालांकि, यदि आप कुल्हाड़ियों के लेबल और / या एक किंवदंती को शामिल करना चाहते हैं, तो आपको चार्ट क्षेत्र की ऊंचाई और चौड़ाई को कम करने की आवश्यकता होगी, इसलिए बाहरी चौड़ाई / ऊंचाई से थोड़ा नीचे। यह चार्ट एपीआई को "बताएगा" कि इन गुणों को प्रदर्शित करने के लिए पर्याप्त जगह है। अन्यथा यह खुशी से उन्हें बाहर कर देगा।

Comments

मेरे उत्तर के संशोधन के रूप में। यह वास्तव में "अत्यधिक" पैडिंग / मार्जिन / व्हाट्सएप समस्या का समाधान करेगा। हालांकि, यदि आप कुल्हाड़ियों के लेबल और / या एक किंवदंती को शामिल करना चाहते हैं, तो आपको चार्ट क्षेत्र की ऊंचाई और चौड़ाई को कम करने की आवश्यकता होगी, इसलिए बाहरी चौड़ाई / ऊंचाई से थोड़ा नीचे। यह चार्ट एपीआई को "बताएगा" कि इन गुणों को प्रदर्शित करने के लिए पर्याप्त जगह है। अन्यथा यह खुशी से उन्हें बाहर कर देगा।

— pimbrouwers

मुझे लगता है कि इसका कारण यह है कि अन्य समाधान आपके लिए काम नहीं करते हैं, शायद यह है कि उन्होंने मान लिया था कि चार्ट को एक डीआईवी में डाला जा रहा है, जिसमें पहले से ही चौड़ाई और ऊंचाई के गुण थे, लेकिन आपने ऐसा नहीं किया था। HTML में ऊँचाई और चौड़ाई को पूर्व निर्धारित करना एक अच्छा विचार है, ताकि ग्राफ़ के भर जाने पर पृष्ठ का लेआउट परिवर्तित न हो। यह पृष्ठ पर "चारों ओर" कूदने से चीजों को रोकेगा क्योंकि यह लोड होता है।

— डेव बर्टन

@ सुझाव के लिए धन्यवाद, लेकिन मैं जरूरी सहमत नहीं हूं। वहाँ बहुत सारी स्थितियाँ हैं जहाँ आप बस यह नहीं जानते कि वे मूल्य क्या होने जा रहे हैं। और ऐसा लगता है कि कम से कम 15 अन्य लोगों को ऐसा लगता है कि मेरी पेशकश पर्याप्त है।

— pimbrouwers

मैं सहमत हूं, पिम। जब आप अग्रिम में चौड़ाई और / या ऊंचाई नहीं जानते (शायद इसलिए कि आप पृष्ठ को जिम्मेदारी से अनुकूलित करना चाहते हैं), तो आप DIV में चौड़ाई और ऊंचाई निर्धारित नहीं कर सकते। मैं सिर्फ इशारा कर रहा था कि मुझे क्यों लगता है कि अन्य उत्तरों में दिए गए समाधान उनके लिए काम करते हैं, लेकिन आपके लिए काम नहीं करते हैं, और यदि आप कर सकते हैं तो डीआईवाई में चौड़ाई और ऊंचाई को निर्धारित करना एक अच्छा विचार क्यों है।

— डेव बर्टन

@DaveBurton के कारणों के लिए, सीएसएस ग्रिड (जो मैं हूं) के साथ काम करने पर यह सही उत्तर होने की संभावना है

— स्टीफन आर

Answer 4

यह डॉक्स में गायब है (मैं संस्करण 43 का उपयोग कर रहा हूं), लेकिन आप वास्तव में चार्ट क्षेत्र की सही और नीचे की संपत्ति का उपयोग कर सकते हैं:

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

इसलिए यह पूर्ण उत्तरदायी चौड़ाई और ऊंचाई का उपयोग करना और किसी भी अक्ष लेबल या किंवदंतियों को फसने से रोकना संभव है।

Comments

सही उपयोग करने में सक्षम होने के नाते निश्चित रूप से एक अच्छा जोड़ है, हालांकि ऊर्ध्वाधर चार्ट के लिए संख्याओं की आवश्यकता होती है जब ऊर्ध्वाधर अक्ष के लिए यह मुश्किल हो जाएगा जब मूल्यों में थोड़ा सा उतार-चढ़ाव होता है - उदाहरण के लिए मानों के साथ एक चार्ट जिसमें 0 से लेकर सीमा होती है - 100 को 20 पिक्सेल के बायें मान की आवश्यकता होगी, लेकिन 0 - 10 मिल की आवश्यकता होगी 100 पिक्सेल, और 100 पिक्सेल का उपयोग करने के बाद एक काफी बड़े मार्जिन को छोड़ देगा जो मुझे लगता है कि हम सभी से छुटकारा पाने की कोशिश कर रहे हैं :) एक विकल्प जो चार्ट को अपनी स्वयं की चौड़ाई को समायोजित करने की अनुमति देता है जो मुझे याद आ रही है। कोई भी इस पर विचार कैसे कर सकता है?

— 15:38 बजे user3800174

ऐसा लगता है कि उन्होंने इसे 2 अक्टूबर, 2015 को प्रलेखित किया था: यहाँ आर्काइव .is

— डेव बर्टन

Answer 5

इस तरह की संभावना है अमन विर्क ने उल्लेख किया है :

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

लेकिन ध्यान रखें कि पैडिंग और मार्जिन आपको परेशान करने के लिए नहीं हैं। यदि आपके पास एक कॉलम कॉलम और विभिन्न स्तंभों के साथ विभिन्न प्रकार के चार्ट के बीच स्विच करने की संभावना है, तो आपको उन लाइनों के लेबल को प्रदर्शित करने के लिए कुछ मार्जिन की आवश्यकता होती है।

यदि आप उस मार्जिन को हटा लेते हैं तो आप केवल लेबल या बिना किसी लेबल के केवल एक हिस्सा दिखाते हैं।

इसलिए यदि आपके पास बस एक चार्ट प्रकार है तो आप मार्जिन को बदल सकते हैं और जैसे अरमान ने कहा। लेकिन अगर स्विच करना संभव है तो उन्हें न बदलें।

Answer 6

इसके लिए विशेष रूप से एक विषय उपलब्ध है

options: {
  theme: 'maximized'
}

Google चार्ट डॉक्स से:

वर्तमान में केवल एक विषय उपलब्ध है:

'अधिकतम' - चार्ट के क्षेत्र को अधिकतम करता है और चार्ट क्षेत्र के अंदर लीजेंड और सभी लेबलों को आकर्षित करता है। निम्न विकल्प सेट करता है:

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

Comments

यह सबसे अच्छा विकल्प लगता है। विषय स्थापित करने के बाद: 'अधिकतम' यह उपस्थिति को ट्यून करने के लिए अभी भी संभव है, उदाहरण के लिए ऊँचाई: '90% ', टेक्स्टपोजिशन:' आउट ', आदि

— जिरी