gpt4 book ai didi

javascript - 生成 html 图表并另存为图像

转载 作者:太空宇宙 更新时间:2023-11-04 15:39:56 25 4
gpt4 key购买 nike

我想使用某些值生成图表并将输出捕获/保存为 jpeg/png。我正在使用 google 图表生成图表并使用 html2canvas 捕获。以下是我正在尝试的代码。

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script language="javascript">

<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['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',
},
bars: 'horizontal'
};

var chart = new google.charts.Bar(document.getElementById('barchart_material'));

chart.draw(data, google.charts.Bar.convertOptions(options));
}
$(document).ready(function() {
html2canvas($("#barchart_material"), {
onrendered: function(canvas) {
// canvas is the final rendered <canvas> element
var myImage = canvas.toDataURL("image/png");
window.open(myImage);
}
});
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>

Google 图表工作正常,并且捕获的图像作为单独的代码打开,但当我合并两者时,它却不起作用。而且,我的目标是在本地保存图像,而不仅仅是打开。

最佳答案

不要使用交互式 Google Charts API,这样可以省去很多麻烦。请改用基于图像的图表。

https://developers.google.com/chart/image/docs/gallery/bar_charts

关于javascript - 生成 html 图表并另存为图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43972805/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com