Question

我创建了折线图＆amp;时间线图表使用谷歌图表API。我需要以.jpg格式保存它们。我可以使用chart.getImageURI（）＆amp;来保存折线图。 Base64.decodeBase64函数。但我无法保存时间表图表，因为没有为时间线图表定义getImageURI（）函数。

我甚至尝试过使用BufferedImage＆amp; amp; ImageIO.read如下：

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

但我得到Exception，说timeLineImage为null。

任何有关保存时间表图表的帮助都会非常感激。

感谢。

Answer 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 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>');

如何保存谷歌时间表图表

1 个答案: