出口谷歌图在角Excel工作表 [英] Export Google Chart to Excel Sheet in Angular
本文介绍了出口谷歌图在角Excel工作表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用im NG-谷歌，图表创建数据图表我从数据库中获得。我的数据存储在一个表中。我需要同时导出表和图表。
我用下面的方法来导出表（其中出口是div的包含表）：
$ scope.export =功能（）
{ VAR BLOB =新的Blob（[的document.getElementById（'出口'）。innerHTML的] {
类型：应用程序/ vnd.openxmlformats-officedocument.s preadsheetml.sheet;字符集= UTF-8
}）;
的saveAs（一滴，Record.xls）;
警报（出口做）;
};
我找不到任何方式对图表添加到该文件。
这是code，以生成图表
VAR chart1 = {};
chart1.type =的ColumnChart;
chart1.cssStyle =高度：400像素;宽度：500像素;;
chart1.data = {
COLS：[
{ID：性别，标签：性别，键入：串}，
{ID：数字，标签：数字，键入：数字} ]，行：[
{
C： [
{V：男性}，
{V：$ scope.male，F：$ scope.male} ]
}， {
C： [
{V：女}，
{V：$ scope.female} ]
}
]
}; chart1.options = {
头衔：，
isStacked：真，
补：20，
displayExactValues：真实，
vAxis：{
头衔：号码，网格线：{算：6}
}，
hAxis：{
头衔：性别
}
}; chart1.formatters = {}; $ scope.chart = chart1;
}
解决方案
\r
\r\r
\r的google.load（'可视化'，'1'，{包：[' corechart']，回调：drawChart}）;\r
\r
功能drawChart（）{\r
VAR数据= google.visualization.arrayToDataTable（[\r
[元素，密度，{角色：风格}]，\r
[铜，8.94＃b87333]，\r
[银，10.49银]，\r
[金奖，19.30黄金]\r
[铂金21.45颜色：＃e5e4e2]\r
]）;\r
\r
VAR视图=新google.visualization.DataView（数据）;\r
view.setColumns（[0，1，\r
{计算：字符串\r
sourceColumn：1，\r
类型：串，\r
角色：注释}，\r
2]）;\r
\r
VAR的选择= {\r
标题：precious金属的密度，在克/厘米^ 3\r
宽度：600，\r
高度：400，\r
酒吧：{groupWidth：95％}，\r
传说：{立场：无}，\r
};\r
VAR图=新google.visualization.ColumnChart（的document.getElementById（chart_div））;\r
\r
google.visualization.events.addListener（图表，'准备好'，函数（）{\r
的document.getElementById（chart_image）insertAdjacentHTML。（'beforeEnd'，'＆LT; IMG ALT =图图像SRC =+ chart.getImageURI（）+'＆GT;'）;\r
}）;\r
\r
chart.draw（视图选项）;\r
} \r
＆LT;脚本SRC =https://www.google.com/jsapi ＆GT;＆LT; / SCRIPT＆GT;\r
＆LT;跨度＆GT;装饰画和LT; / SPAN＆GT;\r
＆LT; DIV ID =chart_div＆GT;＆LT; / DIV＆GT;\r
＆LT; BR /＆GT;\r
＆LT;跨度＆GT; IMAGE＆LT; / SPAN＆GT;\r
＆LT; DIV ID =chart_image＆GT;＆LT; / DIV＆GT; \r
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;
}
解决方案
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>
这篇关于出口谷歌图在角Excel工作表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
