Enregistrer google graphique en tant qu'image
Pourquoi ne peux pas enregistrer mon code de ma carte comme une image? Dois-je avoir une erreur quelque part?
Bien que j'ai suivi à la source (disponibles en ligne), je n'arrive toujours pas à résoudre mon problème.
Je peux montrer le graphique, mais le problème n'est pas de l'enregistrer comme une image.
<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>
OriginalL'auteur user3438249 | 2014-03-19
Vous devez vous connecter pour publier un commentaire.
Cette méthode n'est plus nécessaire d'obtenir une image de la carte. Vous pouvez appeler le graphique de
getImageURI
plutôt la méthode pour obtenir une chaîne d'URL pour la génération de l'image:Si vous ouvrez l'image URI, vous pouvez droit-cliquez sur l'image pour l'enregistrer.
Voici un exemple qui met le graphique de l'image d'un
<img>
tag sur la page. Vous pouvez droit-cliquez sur l'image et l'enregistrer. jsfiddle.net/asgallant/R8A8PMerci de m'aider à résoudre ce problème..vraiment l'apprécier...merci beaucoup..
encore 1 question à te poser..si je veux mettre en œuvre un lien,permettre à l'utilisateur de cliquer pour télécharger l'image du graphique, alors que dois-je faire avec le <img id="chartImg">
Vous avez besoin de changer le type mime de l'URI "application/octet-stream", et d'appeler
window.open
, en passant dans l'URI, qui doit déclencher un téléchargement (exemple). Vous ne pouvez pas spécifier le nom de fichier lorsque vous faites cela. Si vous avez besoin de renommer le fichier, vous devrez envoyer l'URI de votre serveur et d'avoir le serveur de création du fichier (similaire à la façon dont le code dans votre question œuvres).OriginalL'auteur asgallant