Question

我使用Google Charts API创建了日历图表。我一直在寻找一种方法来打印图表png，但我还没有找到一个好的工作答案。

由于getImageURI()不是日历图表列出的方法，因此我无法在Google Developer上使用打印PNG图表指南。

更新：

我能够找到有助于下载图片的this tutorial，但问题是正在下载的文件的文件名是图像字节码，并且this page by greenthumb上提供的解决方案没有＆＃39} ;工作正常。使用从链接到greenthumb页面的CanvasSaver GitHub下载的包，单击保存图像按钮时下载的文件是saveme.php文件，而不是实际图像。我曾尝试在obj_close();之前echo $decoded;放置saveme.php，但这也没有帮助解决问题。

非常感谢所有帮助。

Answer 1

以下是使用示例日历Google图表为我工作的最终脚本。将下载的文件名为“calendar.png”，并使用链接的html下载属性进行设置。 JS Fiddle。我仍然在努力寻找一种方法来改变从透明到白色创建的图像的背景。

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
        <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            function getImgData(chartContainer) {
                var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
                var svg = chartArea.innerHTML;
                var doc = chartContainer.ownerDocument;
                var canvas = doc.createElement('canvas');
                canvas.setAttribute('width', chartArea.offsetWidth);
                canvas.setAttribute('height', chartArea.offsetHeight);

                canvas.setAttribute(
                    'style',
                    'position: absolute; ' +
                    'top: ' + (-chartArea.offsetHeight * 2) + 'px; ' +
                    'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
                doc.body.appendChild(canvas);
                canvg(canvas, svg);
                var imgData = canvas.toDataURL("image/png");
                canvas.parentNode.removeChild(canvas);
                return imgData;
            }

            function saveAsImg(chartContainer) {
                var imgData = getImgData(chartContainer);
                var link = document.getElementById('linker');
                link.href = imgData;
                link.download = "calendar.png";
            }
        </script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {
                packages: ["corechart", "treemap", "geochart", "calendar"]
            });
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                //Calendar
                var dataTable = new google.visualization.DataTable();
                dataTable.addColumn({
                    type: 'date',
                    id: 'Date'
                });
                dataTable.addColumn({
                    type: 'number',
                    id: 'Won/Loss'
                });
                dataTable.addRows([
                    [new Date(2012, 3, 13), 37032],
                    [new Date(2012, 3, 14), 38024],
                    [new Date(2012, 3, 15), 38024],
                    [new Date(2012, 3, 16), 38108],
                    [new Date(2012, 3, 17), 38229],
                    // Many rows omitted for brevity.
                    [new Date(2013, 9, 4), 38177],
                    [new Date(2013, 9, 5), 38705],
                    [new Date(2013, 9, 12), 38210],
                    [new Date(2013, 9, 13), 38029],
                    [new Date(2013, 9, 19), 38823],
                    [new Date(2013, 9, 23), 38345],
                    [new Date(2013, 9, 24), 38436],
                    [new Date(2013, 9, 30), 38447]
                ]);

                var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

                var options = {
                    title: "Red Sox Attendance",
                    height: 350,
                };

                chart.draw(dataTable, options);
            }
        </script>
    </head>

    <body>
<a title="Background is transparent." id="linker" onclick="saveAsImg(document.getElementById('calendar_basic'));"><button>Save as PNG Image</button></a>

        <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
    </body>

</html>

替代getimageuri（）谷歌图表日历

1 个答案: