Question

在代码中，我试图在图表下方添加一个超链接。当我点击它时，它将带我到一个带有谷歌图表图像的新标签下载。任何帮助？

https://codepad.remoteinterview.io/KOURCFTBEG

当我查看很多例子时，大部分都是

google.visualization.events.addListener(chart, 'ready',function() {
console.log(chart.getChart().getImageURI());
document.getElementById('png').innerHTML = '<a href="' + 
chart.getChart().getImageURI() + '">Printable version</a>';
});

在我看来，这会创建一个可下载链接到<div id=png>上的谷歌图表的图像但在我的情况下，没有创建链接或可点击按钮。

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawBar);

      function drawBar() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2013', 1001, 401, 201],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, 	Expenses, and Profit: 2014-2017',
          }
        };
	//---------------------------//
        var chart = new google.charts.Bar(document.getElementById('chart_div'));
		
		// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function() {
            console.log(chart.getChart().getImageURI());
                document.getElementById('png').innerHTML = '<a href="' + chart.getChart().getImageURI() + '">Printable version</a>';
        });	
        chart.draw(data, options);
      }

<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']},{'name':'visualization','version':'1.0','packages':['controls']}]}"></script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id='png'></div>
</body>

我跟随在线资源尽可能相似，但仍然会出现错误，例如 chart.getURI（）不是函数。 这是我最常提到的在线资源。 Here is Fiddle.

Answer 1

试试这个

<a href="link_to_image_download" target=_blank>Download here</a>

如果您没有要下载的链接，请转到imgur.com并上传图片并将共享链接添加到您的href =

Answer 2

您可以按照Google Developer API的建议使用print()。

这是我认为你正在寻找的东西：

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

Answer 3

删除getChart()中的chart.getChart().getImageURI()和在包中，通过将bar修改为corechart可以完成工作。

＆＃13;

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBar);

      function drawBar() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2013', 1001, 401, 201],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, 	Expenses, and Profit: 2014-2017',
          }
        };
	//---------------------------//
   var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
		
		// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function() {
           // console.log(chart.getImageURI());
                document.getElementById('png').innerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
        });	
        chart.draw(data, options);
      }

＆＃13;

<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']},{'name':'visualization','version':'1.0','packages':['controls']}]}"></script>

<div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id='png'></div>
</body>

＆＃13;

如何在图像文件

3 个答案: