2015-12-09 27 views
0

我已創建線圖&使用谷歌圖表API時間軸圖表。 我需要將它們保存爲.jpg格式。 我可以使用chart.getImageURI()& Base64.decodeBase64函數保存線圖。 但我無法保存時間線圖,因爲沒有爲時間線圖定義getImageURI()函數。如何保存谷歌時間軸圖表

我甚至使用的BufferedImage & ImageIO.read如下嘗試:

BufferedImage timeLineImage; 
URL url = new URL(TimeLineURL); 
timeLineImage = ImageIO.read(url); 
ImageIO.write(timeLineImage, "jpg",new File("C:\\out.jpg")) 

但我得到異常說timeLineImage爲空。

任何幫助保存時間表圖表將非常感激。

謝謝。

回答

1

我們有一個網站,其中有大多數所有圖表類型都使用Google圖表和外部服務器呈現PDF和圖像類型的樣本。如果你喜歡,你可以控制圖像格式和DPI。

一個關鍵的問題是,Google API不會將SVG名稱空間添加到生成的SVG中,因此會創建一個添加此名稱空間的回調函數。您必須這樣做,否則遠程格式服務將不會處理SVG。

http://www.cloudformatter.com/GoogleCharts

折線圖:http://www.cloudformatter.com/GoogleCharts.GoogleChartSamples.GoogleLineCharts 或小提琴:http://jsfiddle.net/22bep76q/

時間軸圖: http://www.cloudformatter.com/GoogleCharts.GoogleChartSamples.GoogleTimelineCharts 或小提琴:爲時間軸http://jsfiddle.net/q2h8quho/

示例代碼:

<!-- This adds the proper namespace on the generated SVG --> 
function AddNamespace(){ 
var svg = jQuery('#chart_div svg'); 
svg.attr("xmlns", "http://www.w3.org/2000/svg"); 
svg.css('overflow','visible'); 
} 
<!-- This generates the google chart --> 
google.setOnLoadCallback(drawChart); 
      function drawChart() { 
      var container = document.getElementById('chart_div'); 
      var chart = new google.visualization.Timeline(container); 
      var dataTable = new google.visualization.DataTable(); 

      dataTable.addColumn({ type: 'string', id: 'President' }); 
      dataTable.addColumn({ type: 'date', id: 'Start' }); 
      dataTable.addColumn({ type: 'date', id: 'End' }); 
      dataTable.addRows([ 
      [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], 
      [ 'Adams',  new Date(1797, 2, 4), new Date(1801, 2, 4) ], 
      [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ], 
      [ 'Madison', new Date(1809, 2, 4), new Date(1817, 2, 4) ], 
      [ 'Monroe',  new Date(1817, 2, 4), new Date(1825, 2, 4) ], 
      [ 'Quincy Adams', new Date(1825, 3, 30), new Date(1829, 2, 4) ], 
      [ 'Jackson',  new Date(1829, 2, 4), new Date(1837, 2, 4) ], 
      [ 'Van Buren', new Date(1837, 2, 4), new Date(1841, 2, 4) ], 
      [ 'Harrison',  new Date(1841, 2, 4), new Date(1841, 3, 4) ], 
      [ 'Tyler', new Date(1841, 3, 4), new Date(1845, 2, 4) ]]); 

      google.visualization.events.addListener(chart, 'ready', AddNamespace); 
      chart.draw(dataTable); 
      } 
<!-- @cloudformatter calls to render the SVG --> 

<!-- Convert the SVG to PDF and download it --> 
var click="return xepOnline.Formatter.Format('JSFiddle', {render:'download', srctype:'svg'})"; 
jQuery('#buttons').append('<button onclick="'+ click +'">PDF</button>'); 
<!-- Convert the SVG to [email protected] and open it --> 
click="return xepOnline.Formatter.Format('JSFiddle', {render:'newwin', mimeType:'image/png', resolution:'120', srctype:'svg'})"; 
jQuery('#buttons').append('<button onclick="'+ click +'">PNG @120dpi</button>'); 
<!-- Convert the SVG to [email protected] and open it --> 
click="return xepOnline.Formatter.Format('JSFiddle', {render:'newwin', mimeType:'image/jpg', resolution:'300', srctype:'svg'})"; 
jQuery('#buttons').append('<button onclick="'+ click +'">JPG @300dpi</button>'); 
+0

非常感謝.. –