java - 如何保存谷歌时间轴图表

Question

我使用 google-chart 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 为 null。

任何保存时间线图表的帮助将不胜感激。

谢谢。

Answer 1

我们有一个网站，其中有一些示例，这些示例使用 Google 图表来处理大多数图表类型，并使用外部服务器来呈现为 PDF 和图像类型。如果您愿意，您可以控制图像格式和 DPI。

一个关键的事情是 Google api 不会将 SVG 命名空间添加到生成的 SVG 中，因此创建了一个回调来添加此命名空间。您必须执行此操作，否则远程格式化服务将无法处理 SVG。

http://www.cloudformatter.com/GoogleCharts

折线图:http://www.cloudformatter.com/GoogleCharts.GoogleChartSamples.GoogleLineCharts或 fiddle :http://jsfiddle.net/22bep76q/

时间线图: http://www.cloudformatter.com/GoogleCharts.GoogleChartSamples.GoogleTimelineCharts或 fiddle :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 PNG@120dpi 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 JPG@300dpi 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>');