2016-07-19 4 views
2

Ich habe eine c# Code läuft auf dem Server, und ich muss einige Diagramme mit generieren und speichern Sie diese Bilder auf dem Server.Get Bild von Google API-Diagramm

Ich erinnere mich Google API Chart einen Assistenten hatte, wo Sie das Diagramm erstellen können, aber jetzt ist es 100% javascript so weiß nicht, ob es eine Möglichkeit, es zu tun ist.

Ist das möglich?

Schätzen Sie jede Hilfe.

+1

das Diagramm wird erstellt Sie können 'chart.getImageURI()' verwenden, um ein PNG zu erhalten - siehe [Verweis] (https://developers.google.com/chart/interactive/docs/printing) - gibt im Grunde eine Basis zurück 64 Zeichenkette, die Sie als .png oder in 'src' Tag usw. speichern können. – WhiteHat

+0

So y Sie empfehlen mir, zuerst das Bild mit den HTML- und Javascript-Tools zu erstellen. Dann hol dir die Bild-URL und nutze das richtig? Ist das getImageURI() statisch? oder es kann sich später ändern? – VAAA

+0

Hilft Ihnen [dieser Link] (https://developers.google.com/chart/interactive/docs/quick_start)? – gravity

Antwort

0

einmal die 'ready' hat dich auf den chart gefeuert,
Sie getImageURI verwenden können, ein Basis 64 String zu erhalten,
die als PNG- gespeichert werden kann,
oder in einem img Tag enthielt,
wie in dem folgendes Beispiel ...

eine frozen version zu verwenden, können Sie 'current' mit der neuesten speichern ersetzen - '45'

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Date'); 
 
    data.addColumn('number', '2005'); 
 
    data.addColumn('number', '2006'); 
 
    data.addRows([ 
 
     [new Date('01/01/2016'), 200, 210], 
 
     [new Date('01/02/2016'), 190, 220], 
 
     [new Date('01/03/2016'), 205, 200], 
 
     [new Date('01/04/2016'), 220, 230], 
 
     [new Date('01/05/2016'), 212, 210], 
 
     [new Date('01/06/2016'), 185, 193], 
 
     [new Date('01/07/2016'), 196, 207] 
 
    ]); 
 
    var options = { 
 
     height: 400 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 

 
    google.visualization.events.addListener(chart, 'ready', function() { 
 
     document.getElementById('image_div').innerHTML = '<img alt="Chart" src="' + chart.getImageURI() + '">'; 
 
    }); 
 

 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div>Chart</div> 
 
<div id="chart_div"></div> 
 
<div>Image</div> 
 
<div id="image_div"></div>

+0

Was denkst du darüber, mit der HTML, die das Diagramm generiert, dann ein C# eine Web-Anfrage an diese Seite und holen Sie sich das Bild aus der Antwort? Auf diese Weise ist es egal, ob sich die chartImageURI später ändert, da ich immer die gerenderte bekomme. – VAAA

+0

richtig, das funktioniert. Aber früher war ich mir nicht sicher, was Sie damit meinten, dass sich der URI ändert. es ist keine Adresse irgendwo - es ist eine Zeichenkette (Basis 64) Darstellung des Diagramms - wie eine PNG-Datei und speichern Sie es als eine Zeichenfolge – WhiteHat

+0

Ohhh ist eine Basis 64 erstaunlich ... das wird sich dann nie ändern. Appreciat so viel – VAAA