इस पेज का अनुवाद Cloud Translation API से किया गया है.

PNG चार्ट प्रिंट करना

खास जानकारी
चुनिंदा स्क्रीनशॉट

खास जानकारी

Google फ़ंक्शन सीधे आपके ब्राउज़र से या JavaScript से print() फ़ंक्शन के ज़रिए प्रिंट किए जा सकते हैं. अगर आपको किसी चार्ट की PNG इमेज का ऐक्सेस देना है, तो getImageURI() तरीके का इस्तेमाल करें. इस समय यह मुख्य चार्ट और जियोचार्ट के लिए काम करता है.

अगर आपके चार्ट (इस तरह के चार्ट टाइप, जैसे कि कॉलम चार्ट या पाईचार्ट को my_chart कहा जाता है और उसे दिखाने वाला डिव my_div है, तो चार्ट को PNG के तौर पर ऐक्सेस करने के बारे में यहां बताया गया है:

    var my_div = document.getElementById('chart_div');
    var my_chart = new google.visualization.ChartType(chart_div);

    google.visualization.events.addListener(my_chart, 'ready', function () {
      my_div.innerHTML = '<img src="' + my_chart.getImageURI() + '">';
    });

    my_chart.draw(data);

ध्यान दें: जैसा कि इस पेज पर दिए गए उदाहरणों में दिखाया गया है, आपको ready इवेंट का इंतज़ार करना चाहिए. इससे आपको यह पक्का हो जाएगा कि चार्ट में रेंडर करने की प्रोसेस पूरी हो चुकी है.

ध्यान दें: यह सिर्फ़ HTML5 <canvas> एलिमेंट के साथ काम करने वाले ब्राउज़र में काम करता है. इसलिए, यह Internet Explorer 9 या इससे पहले के वर्शन पर काम नहीं करता है.

यहां एक पूरा उदाहरण देखें:

<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([
        ['Element', 'Density', { role: 'style' }],
        ['Copper', 8.94, '#b87333', ],
        ['Silver', 10.49, 'silver'],
        ['Gold', 19.30, 'gold'],
        ['Platinum', 21.45, 'color: #e5e4e2' ]
      ]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        bar: {groupWidth: '95%'},
        legend: 'none',
      };

      var chart_div = document.getElementById('chart_div');
      var chart = new google.visualization.ColumnChart(chart_div);

      // Wait for the chart to finish drawing before calling the getImageURI() method.
      google.visualization.events.addListener(chart, 'ready', function () {
        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
        console.log(chart_div.innerHTML);
      });

      chart.draw(data, options);

  }
  </script>

<div id='chart_div'></div>

जब यह प्रोग्राम चलता है, chart_div.innerHTML को चार्ट की इस PNG एन्कोडिंग पर सेट किया जाएगा और JavaScript कंसोल में दिखाया जाएगा:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiA...

जब उस यूआरआई को सीधे किसी ब्राउज़र के पता बार में डाला जाता है, तो आधुनिक ब्राउज़र इमेज को रेंडर करेंगे:

JavaScript की इस लाइन के साथ, प्रिंट किए जा सकने वाले वर्शन का लिंक शामिल किया जा सकता है:

  document.getElementById('png').outerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';

इसके बाद आपके एचटीएमएल में इस लाइन के बाद:

  <div id='png'></div>

स्नैपशॉट चुनना

एक चार्ट क्रिएटर के रूप में, आप अपने चार्ट में ऐसे ज़्यादातर काम कर सकते हैं जो उपयोगकर्ता अपने ब्राउज़र में कर सकते हैं. इसलिए, अगर आपको किसी टूलटिप की मदद से चार्ट की स्टैटिक इमेज बनानी है या किसी खास पॉइंट पर क्रॉसहेयर का इस्तेमाल करना है, तो नीचे दिखाए गए तरीके से setSelection() से पहले कॉल करके ऐसा किया जा सकता है.

यहां 100 रैंडम पॉइंट वाला एक स्कैटर चार्ट दिया गया है, जिसमें से एक में टूलटिप और क्रॉसहेयर पहले से चुने गए हैं:

फिर से लोड करने पर, आपको एक अलग पॉइंट दिखेगा. कोड के साथ मुख्य लाइन बोल्ड में:

<script type="text/javascript">
  google.charts.load("current", {packages:['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number');
    data.addColumn('number');
    for (var i = 0; i < 100; i++)
      data.addRow([Math.floor(Math.random() * 100),
                   Math.floor(Math.random() * 100)]);

    var options = {
      legend: 'none',
      crosshair: { trigger: 'both' },   // Display crosshairs.
      tooltip: { trigger: 'selection' } // Display tooltips on selection.
    };

    var chart = new google.visualization.ScatterChart(document.getElementById('scatter_setselection'));

    google.visualization.events.addListener(chart, 'ready', function () {
      chart.setSelection([{row:99, column:1}]); // Select one of the points.
      png = '<a href="' + chart.getImageURI() + '">Printable version</a>';
      console.log(png);
    });

    chart.draw(data, options);
  }