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

Schreibe einen Kommentar