将Google Chart导出到Angular中的Excel工作表

Question

Im using ng-google-chart to create charts from data I receive from a database. I store the data in a table. I need to export both the table and the chart.

I'm using the following technique to export tables (where "exportable" is the div the contains the table):

 $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"); 
        };

I cannot find any way to add the chart to this file.

This is the code to generate a chart

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

To getImageURI of the chart, wait for the ready event and call the function.
Then you can add the image somewhere on the page.
You can even hide the original chart if needed...
Following is an example of loading the image URI into another element.

 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>