หน้านี้ได้รับการแปลโดย Cloud Translation API

การพิมพ์แผนภูมิ PNG

ภาพรวม
ตัวเลือกสแนปชอต

ภาพรวม

คุณพิมพ์ Google Charts ได้โดยตรงจากเบราว์เซอร์หรือจาก JavaScript ผ่านฟังก์ชัน print() หากต้องการให้สิทธิ์เข้าถึงรูปภาพ PNG ของแผนภูมิ ให้ใช้เมธอด getImageURI() ซึ่งปัจจุบันใช้ได้กับแผนภูมิหลัก และภูมิศาสตร์

หากแผนภูมิ (ประเภท ประเภทแผนภูมิ เช่น ColumnChart หรือ PieChart) เรียกว่า my_chat และ 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...

เมื่อวาง 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);
  }