Speichern Sie google-chart als Bild
Warum kann das nicht mein code speichern Diagramm als Bild? Habe ich irgendwo einen Fehler?
Obwohl ich folgte der Quelle (online gefunden), ich kann immer noch nicht mein problem lösen.
Ich zeigen kann, das Diagramm aber nur das problem ist kann nicht speichern Sie es als Bild.
<script type="text/javascript" src="js/jsapi.js"></script>
<script type="text/javascript">
function saveAsImg(chartContainer, pngfilename) {
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 data = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
data = data.substr(data.indexOf(',') + 1).toString();
var dataInput = document.createElement("input") ;
dataInput.setAttribute("name", 'imgdata') ;
dataInput.setAttribute("value", data);
var nameInput = document.createElement("input") ;
nameInput.setAttribute("name", 'name') ;
nameInput.setAttribute("value", pngfilename + '.png');
var myForm = document.createElement("form");
myForm.method = 'post';
myForm.action = 'saveme.php';
myForm.appendChild(dataInput);
myForm.appendChild(nameInput);
document.body.appendChild(myForm) ;
myForm.submit() ;
document.body.removeChild(myForm) ;
}
</script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualizationDaily() {
//Create and populate the data table.
Price1=document.getElementById('Price1').value;
Price2=document.getElementById('Price2').value;
Price3=document.getElementById('Price3').value;
Price4=document.getElementById('Price4').value;
Price5=document.getElementById('Price5').value;
Price6=document.getElementById('Price6').value;
Price7=document.getElementById('Price7').value;
var data = google.visualization.arrayToDataTable([
['Daily', 'Sales'],
['Mon', parseInt(Price1) ],
['Tue', parseInt(Price2) ],
['Wed', parseInt(Price3) ],
['Thu', parseInt(Price4) ],
['Fri', parseInt(Price5) ],
['Sat', parseInt(Price6) ],
['Sun', parseInt(Price7) ]
]);
//Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"Daily Sales",
width:500, height:400,
hAxis: {title: "Daily"}}
);
}
google.setOnLoadCallback(drawVisualizationDaily);
</script>
<div id="visualization" style="width: 600px; height: 400px;"></div>
<script>
<a href='#' onClick="saveAsImg(document.getElementById('visualization'), 'test');">Test</a>
</script>
InformationsquelleAutor user3438249 | 2014-03-19
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dass die Methode nicht mehr notwendig ist, erhalten Sie ein Bild des Diagramms. Sie können das Diagramm ist
getImageURI
Methode statt um einen URL-string für die Generierung der Bild:Wenn Sie öffnen Sie die URI des Bildes, können Sie mit der rechten-klicken Sie auf das Bild, um es zu speichern.
Hier ist ein Beispiel, legt der chart-Bild in ein
<img>
tag auf der Seite. Sie können der rechten Maustaste auf das Bild und speichern Sie es. jsfiddle.net/asgallant/R8A8PDanke, hilft mir dieses problem zu lösen..wirklich zu schätzen...danke viel..
habe noch 1 Frage an dich..wenn ich will, implementieren Sie einen link,damit Benutzer klicken Sie zum download der chart-Bild, dann was soll ich mit der <img id="chartImg">
Benötigen Sie zum ändern der mime-Typ der URI an, "application/octet-stream", und rufen Sie
window.open
, übergeben Sie den URI, der auslösen sollte, ein download (Beispiel). Sie können nicht geben Sie den Namen der Datei, wenn Sie dies tun. Wenn Sie brauchen, um die Datei umzubenennen, müssen Sie zum senden der URI zu Ihrem server und der server der die Datei erstellt (ähnlich, wie der code in deiner Frage funktioniert).InformationsquelleAutor asgallant