मैं किसी वेबपृष्ठ में Google चार्ट को कैसे रख सकता हूं?

मैं Google चार्ट का उपयोग कर रहा हूं। स्थिति मुझे बढ़ाती है। मैंने दस्तावेज में उस हिस्से को नहीं पाया है। मैं बस div में (x, y) में स्थित शीर्ष बाएं कोने के साथ एक div के अंदर एक Google चार्ट बनाना चाहता हूं। आयामों को नियंत्रित करने में मदद के लिए अतिरिक्त अंक।मैं किसी वेबपृष्ठ में Google चार्ट को कैसे रख सकता हूं?

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     google.load("visualization", "1", {packages:["corechart"]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Year', 'Sales', 'Expenses'], 
      ['2004', 1000,  400], 
      ['2005', 1170,  460], 
      ['2006', 660,  1120], 
      ['2007', 1030,  540] 
     ]); 

     var options = { 
      title: 'Company Performance', 
      hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
     }; 

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

अगर मैं 'क्रम' में html में देखने के लिए फ़ायरबग की तरह एक उपकरण का उपयोग कर मैं देख रहा हूँ:

rect x="161" y="96" width="579" height="309"

लेकिन मैं उन मूल्यों के किसी भी लेने नहीं किया।

स्रोत

2012-09-03 zehelvion

कोई नमूना कोड? –

ठीक है, मैं आगे बढ़ गया और कुछ जोड़ा :) – zehelvion

उदाहरण DIV के भीतर (0,0) पर चार्ट स्थिति, चार्ट विकल्पों में जोड़ने के लिए:

var options = { 
      ..., 
      chartArea:{left:0,top:0,width:"50%",height:"50%"} 
}

और चौड़ाई और ऊंचाई को समायोजित के रूप में आप चाहते हैं; पूर्ण विकल्प here हैं।

स्रोत

2012-09-04 00:17:17

मैं बस इसे जांचने के लिए वापस गया और यह बहुत अच्छा काम किया, धन्यवाद! – zehelvion

ठीक है, आप कुछ अतिरिक्त HTML जोड़ने की जरूरत:

<body> 
    <div style="position:relative;width:100%"> 
     <div id="chart_div" style="position:absolute;right:0px;top:0px;width: 400px; height: 300px;"></div> 
    </div> 
</body>

चार्ट की ऊंचाई चौड़ाई और div की ऊंचाई के द्वारा नियंत्रित किया जा सकता है। नियुक्ति को बाएं/नीचे, आदि में बदलने के लिए, दाएं, ऊपर, आदि द्वारा नियंत्रित किया जा सकता है।

आप chart_div को फ़्लोट करना चाहते हैं, या स्थिति की किसी भी अन्य विधि का उपयोग करना चाहते हैं।

आपकी आवश्यकताओं के आधार पर, यह पर्याप्त हो सकता है: यदि नहीं, तो मुझे बताएं।

स्रोत

2012-09-03 22:47:47

मैं किसी वेबपृष्ठ में Google चार्ट को कैसे रख सकता हूं?

उत्तर

संबंधित मुद्दे