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

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

סקירה כללית

אפשר להדפיס Google Charts ישירות מהדפדפן, או מ-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> של HTML5, ולכן היא לא תפעל ב-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);
  }