Rails：在服務器端保存Google圖表

Question

我在視圖頁面中使用JavaScript來生成Google圖表。 我想將其保存到我的app / asset / images /文件夾中，以便當用戶單擊顯示PDF按鈕時，可以在我的prawnto PDF中顯示Google圖表。

在我的Rails視圖頁面中，如何將圖表保存到images文件夾？

這是我的查看頁面代碼：

  <!--Div that will hold the line chart-->
  <div id="line_chart" style="width:100%; height:100%;"></div>

  <!-- Display PDF -->
  <%= link_to "Display PDF", {:action => "index", :format => 'pdf'}, :target => '_blank' %>

  <!--Load the AJAX API-->
  <!--Load the Google JSAPI library-->
  <script type="text/javascript" src="https://www.google.com/jsapi?autoload={
            'modules':[{ 'name':'visualization', 'version':'1', 'packages':['corechart'] }]}"></script>

  <script type="text/javascript">//<!--Load the Google Visualization and chart libraries-->

    function showGraph() {
      // Load the Visualization API library and the piechart library.
      google.load('visualization', '1', {'packages':['corechart']});
      //Immediately after calling google.load(), your code should call google.setOnLoadCallback(my_handler), a Google JSAPI function that calls your handler as soon as all the libraries are loaded.
      //Your handler function should create and define the chart.
      google.setOnLoadCallback(drawChart);

      // My handler function is called drawChart
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        //First, create a DataTable
        var dt = google.visualization.arrayToDataTable([
          ['Year', 'Number of people'],
          ['2005',   1000 ],
          ['2006',   1170 ],
          ['2007',   660  ],
          ['2008',   1030 ]
        ]);
        //Set chart options, inlcuding title and dimension
        var opt = {
          fontName: 'Arial',
          fontSize: 20,
        };

        //Instantiates a chart and specify which container does this chart will go to
        var ch = new google.visualization.LineChart(document.getElementById('line_chart'));  //Here we instantiate a chart as a PieChart that will go into the container whose id is named line_chart

        //Using the above chart instance, draw a chart according to the datatable and options we defined earlier
        ch.draw(dt, opt);
      }
    }
    window.onload = showGraph();
  </script>

謝謝。

Answer 1

這是將Google圖表顯示為PDF以及其他內容的Javascript和示例。 不用去圖片。

http://www.cloudformatter.com/GoogleCharts

Answer 2

Google有一種方法可以將圖表顯示在圖像中：

如果要提供對圖表的PNG圖像的訪問，則可以使用getImageURI（）方法。

https://developers.google.com/chart/interactive/docs/printing

一個問題是，您首先需要在javascript中調用它，因此通常在瀏覽器中調用它，然后將image-uri發送到服務器以生成pdf。

Google還有一個API可以將“靜態”圖表創建為圖像，在這里使用起來要容易得多，不幸的是，他們說它已被棄用：（今天它仍然可以使用，並且關閉它們時，它們會破壞很多頁面。 ）

https://developers.google.com/chart/image/

在Prawn中，您可以在open_uri的幫助下包含遠程圖片。至少，我在舊手冊中發現了這一點：

如果將具有讀取方法的對象（而不是顯式文件名）作為文件傳遞，則可以嵌入IO對象和類似對象的對象（包括Tempfiles和open-uri對象）中的圖像。

require "open-uri"

Prawn::Document.generate("remote_images.pdf") do 
  image open("http://prawn.majesticseacreature.com/media/prawn_logo.png")
end

但是，如果您只是在繪制折線圖，​​則可以自己在Prawn中繪制它們。 這實際上並不那么復雜，您可以獲得真實的矢量圖形。