在 Angular 中将 Google 图表导出到 Excel 工作表

Question

我正在使用 ng-google-chart 从我从数据库接收到的数据创建图表。我将数据存储在一个表中。我需要同时导出表格和图表。

我正在使用以下技术来导出表格（其中“可导出”是包含表格的 div）：

 $scope.export = function () 
{

 var blob = new Blob([document.getElementById('exportable').innerHTML], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
            });
            saveAs(blob, "Record.xls");


            alert("export done"); 
        };

我找不到将图表添加到此文件的任何方法。

这是生成图表的代码

var chart1 = {};
                    chart1.type = "ColumnChart";
                    chart1.cssStyle = "height:400px; width:500px;";
                    chart1.data = {
                        "cols": [
                            { id: "gender", label: "Gender", type: "string" },
                            { id: "number", label: "number", type: "number" }

                        ], "rows": [
                            {
                                c: [
                                   { v: "male" },
                                   { v: $scope.male, f: $scope.male }

                                ]
                            },

                            {
                                c: [
                                   { v: "female" },
                                   { v: $scope.female }

                                ]
                            }
                        ]
                    };

                    chart1.options = {
                        "title": "",
                        "isStacked": "true",
                        "fill": 20,
                        "displayExactValues": true,
                        "vAxis": {
                            "title": "Number", "gridlines": { "count": 6 }
                        },
                        "hAxis": {
                            "title": "gender"
                        }
                    };

                    chart1.formatters = {};

                    $scope.chart = chart1;


                }

Answer 1

到图表的getImageURI，等待ready事件并调用函数。
然后，您可以在页面的某处添加图像。
如果需要，您甚至可以隐藏原始图表...
以下是将图像 URI 加载到另一个元素的示例。

google.load('visualization', '1', {packages:['corechart'], callback: drawChart});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Element", "Density", { role: "style" } ],
    ["Copper", 8.94, "#b87333"],
    ["Silver", 10.49, "silver"],
    ["Gold", 19.30, "gold"],
    ["Platinum", 21.45, "color: #e5e4e2"]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
                   { calc: "stringify",
                     sourceColumn: 1,
                     type: "string",
                     role: "annotation" },
                   2]);

  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 400,
    bar: {groupWidth: "95%"},
    legend: { position: "none" },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("chart_div"));

  google.visualization.events.addListener(chart, 'ready', function () {
      document.getElementById("chart_image").insertAdjacentHTML('beforeEnd', '<img alt="Chart Image" src="' + chart.getImageURI() + '">');
  });

  chart.draw(view, options);
}

<script src="https://www.google.com/jsapi"></script>
<span>CHART</span>
<div id="chart_div"></div>
<br/>
<span>IMAGE</span>
<div id="chart_image"></div>