طباعة رسومات بيانية بتنسيق PNG

نظرة عامة

يمكن طباعة مخططات Google مباشرة من متصفحك أو من جافا سكريبت عبر الدالة print(). إذا كنت تريد توفير إمكانية الوصول إلى صورة PNG للرسم البياني، يمكنك استخدام طريقة getImageURI(). يعمل هذا حاليًا مع المخططات الأساسية والمخططات الجغرافية.

إذا كان المخطط (من النوع ChartType، مثل SchemaChart أو 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، كما هو موضح في الأمثلة على هذه الصفحة، للتأكد من انتهاء عرض الرسم البياني.

ملاحظة: لن يعمل هذا إلا في المتصفحات التي تتوافق مع عنصر 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...

عند وضع معرّف الموارد المنتظم مباشرةً في شريط عناوين المتصفح، فإن المتصفحات الحديثة ستعرض الصورة:

يمكنك تضمين رابط إلى النسخة القابلة للطباعة مع سطر جافا سكريبت التالي:

  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);
  }