6

そのため、何時間にもわたるWeb検索、グーグル、オーバーフローの後、問題の解決策を見つけることができません。

Googleのグラフから折れ線グラフを取得しました。PNGに変換してサーバーに保存し、MySQLデータベースに挿入します。

単純に聞こえますが、動作させることができません。このウェブサイトのスクリプトはもう機能していません（少なくともここにはありません）http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html- >機能していません。

2番目のオプションは古いオプションです：

$imageData =     file_get_contents('http://chart.apis.google.com/chart... etc');

それはもうサポートされておらず、それからまともな品質を得ることができないので、私はそれを使うことができません。

良いチュートリアルを提供したり、私の問題を解決したりできる人はいますか？

編集：

BattlehorseのコードとEriCのコードを組み合わせて使用​​しました。

これで、チャートをDIV内の画像として表示できるようになりました。この画像をサーバーに保存し、将来的にPDFファイルで使用できるようにmysqlを更新します。

4

4 に答える 4

8

サイトにアクセスしたら、これをコンソールに貼り付けます（誤動作している機能を上書きします）。

  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;
  }

JSでは、svgを取得するためにiframeblablaを検索していました。


画像を自動的に保存するには、プログラムでメソッドを呼び出すだけです。

document.body.addEventListener("load", function() {

        saveAsImg( document.getElementById("pie_div")); // or your ID

    }, false );


サーバー側で画像を保存する場合、この投稿はPNG画像をサーバー側で保存するのに役立つ可能性があります

PHPへの投稿画像の更新
（index.js）

function saveToPHP( imgdata ) {

    var script = document.createElement("SCRIPT");

    script.setAttribute( 'type', 'text/javascript' );
    script.setAttribute( 'src', 'save.php?data=' + imgdata );

    document.head.appendChild( script );
}

function save() {

    var canvas = document.getElementById("canvas"), // Get your canvas
        imgdata = canvas.toDataURL();

    saveToPHP( imgdata );
}

function drawOnCanvas() {

    var canvas = document.getElementById("canvas"), // Get your canvas
        ctx = canvas.getContext("2d");

    ctx.strokeStyle = "#000000";
    ctx.fillStyle = "#FFFF00";
    ctx.beginPath();
    ctx.arc(100,99,50,0,Math.PI*2,true);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
}

drawOnCanvas(); // Test
save();

save.php

<?php
    // Get the request
    $data = $_GET['data'];

    // Save to your DB.
?>
于 2012-12-11T16:40:01.430 に答える
3

ライブラリを利用できますgrChartImg。これはクロスブラウザソリューションであり、古いバージョンのIE（8以前）でもサポートします。画像のダウンロード、サーバーへのアップロード、ダイアログでの画像の表示など、多くの機能があります。

詳細については、http：//www.chartstoimage.euを参照してください。

お役に立てば幸いです。

于 2013-05-14T21:57:45.840 に答える
0

これは実際には答えではありませんが、将来的には答えになる可能性があり、機能を元に戻したいだけの場合は必要です。次のURLは、視覚化APIの現在の問題と機能要求をすべて示しています。

https://code.google.com/p/google-visualization-api-issues/issues/list?can=2&q3%sort=-stars+id&colspec=ID%20Type%20Status%20Priority%20Milestone%20Owner%20Summary%20Stars

この機能リクエストが獲得するスター/投票が多いほど、彼らがそれを見る可能性が高くなります。

于 2013-06-27T14:34:54.573 に答える
0

同じ問題があります-Googleチャートを画像としてサーバーに保存します。ここでの答えはどれも私にはうまくいきません。最後に私は解決策を手に入れましたが、いくつかのバグがあります（Chromeブラウザでのみ機能します）。ベースとして、ここからスクリプトを使用しましたhttps://gist.github.com/mpetherb/7085315プロジェクトにいくつかの変更を加えました。生成されたグラフ画像をサーバーにインポートするためにjqueryを使用します。これは私が画像に変換してグーグルグラフの例id="ex0"を保存したいグラフです

画像に変換してサーバーにインポートするためのスクリプト 

<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 toImg(chartContainer, imgContainer) {
var doc = chartContainer.ownerDocument;
var img = doc.createElement('img');
var myimg=img.src = getImgData(chartContainer);
//Here I am using jquery for importing decoded image to hidden.php on my server 
$.ajax({
    method: "POST",
    url: "hidden.php",
    data: { name: myimg } });
while (imgContainer.firstChild) {
imgContainer.removeChild(imgContainer.firstChild);
}
imgContainer.appendChild(img);
}
</script>

<button onclick="toImg(document.getElementById('ex0'), document.getElementById('ex0'));" 
type="button" <Convert to image and upload on server></button>
// ex0 - div id of this type of google graph. If you using another type of google graph - you should change it
コードにjqueryを含めることを忘れないでください。

jqueryメソッドPOSTからデータを受信して​​サーバーに保存するためのphp隠しスクリプト

hidden.phpファイル 

<?php
 if(isset($_POST['name']))
  {   
    $data = $_POST['name'];

    list($type, $data) = explode(';', $data);
	list(, $data)      = explode(',', $data);
	file_put_contents('graph_temp.png', base64_decode($data));

もう一度気づきます-Chromeブラウザでのみ動作します。Firefoxもサーバー上に画像ファイルを作成しますが、コンテンツはありません（Firefoxはbase64でエンコードされたデータをサポートしていないようです）

于 2015-03-26T08:23:24.327 に答える