将仪表板中的谷歌图表导出为 png

Posted

技术标签:

【中文标题】将仪表板中的谷歌图表导出为 png【英文标题】:Export google chart in a dashboard as png 【发布时间】:2015-08-14 11:50:17 【问题描述】:

我正在尝试通过按钮 图像。但我收到以下错误-

一个或多个参与者未能绘制() undefined 不是函数

代码如下:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.load('visualization', '1.0', 'packages':['controls']);

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() 

        // Create our data table.
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Donuts eaten'],
          ['Michael' , 5],
          ['Elisa', 7],
          ['Robert', 3],
          ['John', 2],
          ['Jessica', 6],
          ['Aaron', 1],
          ['Margareth', 8]
        ]);



        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var select = new google.visualization.ControlWrapper(
          'controlType': 'CategoryFilter',
          'containerId': 'filter_div',
          'options': 
            'filterColumnLabel': 'Donuts eaten'
          
        );

        // Create a pie chart, passing some options
        var chart = new google.visualization.ChartWrapper(
          'chartType': 'ColumnChart',
          'containerId': 'chart_div',
          'options': 
            'width': 500,
            'height': 300,
            'legend': 'right'
          
        );

        google.visualization.events.addListener(chart, 'ready', function(e) 
                document.getElementById('png').outerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
        );

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(select, chart);

        // Draw the dashboard.
        dashboard.draw(data);
      
    </script>
  </head>

  <body>
    <div id='png'></div>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">        
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>

请帮助我哪里出错了。

【问题讨论】:

【参考方案1】:

小提琴总是有帮助的!

https://jsfiddle.net/kujxsn7z/

我改变的东西:

创建了一个 div 来保存 PNG 输出您尝试调用的方法

getImageURI() 失败,因为您将它应用到 chartWrapper,不在图表对象上。所以要解决这个问题,你需要打电话, 在你的例子中:

chart.getChart().getImageURI()

所以你引用你的chartWrapper,使用getChart来引用它包含的图表,然后在图表对象本身上执行getImageIRI()。

【讨论】:

非常感谢您的帮助。

以上是关于将仪表板中的谷歌图表导出为 png的主要内容,如果未能解决你的问题,请参考以下文章

谷歌图表仪表板加载失败

如何使用 ajax 调用更新谷歌仪表图表?

实时谷歌分析图表

如何将绘图仪表板应用程序导出到 html 独立文件以与其他人共享?

如何动态查询数据库并在仪表板上绘制值?

从 SQL 数据库显示信息到谷歌图表