הדפסת תרשימי PNG

  1. סקירה כללית
  2. בחירת תמונות

סקירה כללית

אפשר להדפיס תרשימים של Google ישירות מהדפדפן, או מ-JavaScript באמצעות הפונקציה print(). אם אתם רוצים לספק גישה לתמונת PNG של תרשים, תוכלו להשתמש בשיטה getImageURI(). בשלב זה המאפיין פועל לתרשימי ליבה ולתרשימים גיאוגרפיים.

אם התרשים (מסוג ChartType, כמו ColumnChart או PieChart) נקרא my_chart וה-div שמציג אותו הוא 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, כפי שמוצג בדוגמאות שבדף, כדי לוודא שהתרשים הסתיים.

הערה: האפשרות הזו פועלת רק בדפדפנים שתומכים ברכיב <canvas>HTML 5, ולכן לא תפעל ב-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...

כשה-URI הזה מוצב ישירות בסרגל הכתובות של הדפדפן, דפדפנים מודרניים מציגים את התמונה:

אתם יכולים לכלול קישור לגרסה להדפסה עם שורת JavaScript הבאה:

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

ולאחר מכן שורה זו ב-HTML שלך:

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

בחירת תמונות

כיוצרי תרשימים, אתם יכולים לעשות כל דבר בתרשים שלכם באופן פרוגרמטי שמשתמשים יכולים לעשות בדפדפנים שלהם. אם תרצו ליצור תמונה סטטית של התרשים באמצעות הסבר קצר או עם צלבים בנקודה ספציפית, תוכלו לעשות זאת באמצעות קריאה ל-setSelection() לפני getImageURI(), כפי שמתואר בהמשך.

הנה תרשים פיזור עם 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);
  }