html charts - Google Chart Images Replacement




javascript deutsch (6)

Die Google Chart Images-API ist derzeit veraltet und am 20. April 2015 in den Ruhestand versetzt.

Gibt es einen anderen kostenlosen Dienst, der diese ersetzen kann und die Erstellung von Diagrammbildern nur durch Angabe von Parametern in der URL ermöglicht?

Hier ist ein Beispiel für eine URL, mit der ein PNG-Bild erzeugt wird. Es kann als HTML-Bildquelle verwendet werden und ist besonders in E-Mails nützlich:

http://chart.apis.google.com/chart?chxl=1:|Apr+04|Apr+05|Apr+06|Apr+07|Apr+08|Apr+09&chxp=1,0,20,40 , 60,80,100 & chxr = 0,0,45 & chxs = 1,676767,11,5,0, lt, 676767 & chxt = y, x & chs = 550x198 & ch = ls & chco = 3366CC, FF9900 & chds = 0,45,0,45 & chd = t: 7,12, 11,9,13,7 | 11,26,45,24,22,27 & chdl = Besuche ++++ | Seite + Ansichten & chdlp = t && chdls = 333333,16 & chg = 100,20,0,0 & chls = 4 | 2

Dies erzeugt das folgende Bild, das einfach über ein <img> -Tag hinzugefügt werden kann und über alle Browser und E-Mail-Clients hinweg unterstützt wird.


Answers

Ich war auch mit einem solchen Problem konfrontiert, wo ich statische Bild basierte Diagramme auf Serverseite mit PHP brauchte. Ich habe einen Weg gefunden, dies mit PhantomJS und Google Chart's Javascript API zu erreichen. Im Folgenden finden Sie ein Beispiel dafür, wie Sie dies tun können ...

var webPage = require('webpage');
var page = webPage.create();


page.includeJs("https://www.gstatic.com/charts/loader.js", function() {
var expectedContent = '<html>' +
'<head>' + 
'<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript">' +
  'google.charts.load("current", {packages:["corechart"]});'+
  'google.charts.setOnLoadCallback(drawChart);'+
  'function drawChart() {'+
    'var data = google.visualization.arrayToDataTable(['+
      '[\'Task\', \'Hours per Day\'],'+
      '[\'Work\',     11],'+
      '[\'Eat\',      2],'+
      '[\'Commute\',  2],'+
      '[\'Watch TV\', 2],'+
      '[\'Sleep\',    7]'+
    ']);'+

    'var options = {'+
      'title: \'My Daily Activities\','+
      'is3D: true,'+
    '};'+

    'var chart = new google.visualization.PieChart(document.getElementById(\'piechart_3d\'));'+
    'chart.draw(data, options);'+
  '}'+
'</script>'+
'</head>'+
'<body>'+
'<div id="piechart_3d" style="width: 900px; height: 500px;"></div>'+
'</body>'+
'</html>';


var expectedLocation = 'http://www.phantomjs.org/';
page.setContent(expectedContent, expectedLocation);
window.setTimeout(function () {
        page.render("mypng.png");
        phantom.exit();
    }, 1000); // Change timeout as required to allow sufficient time 

});

Danach müssen Sie diese Javascript-Datei in Ihrem PHP ausführen: -

exec(ROOT_DIRECTORY . "\phantomjs.exe processImageData.js ", $output);

Nach dieser Ankündigung haben wir einen Ersatz für Google Image Charts erstellt und zusätzlich eine GIF-Animation hinzugefügt (Chart-Animationen in E-Mails sind großartig !!).

Es heißt Image-Charts. Kein serverseitiges Chart-Rendering mehr, keine Skalierungsprobleme, es ist blitzschnell, 1 URL = 1 Grafikkarte.


Im Moment habe ich keine Lösung gefunden, um direkt mit einem Diagramm zu "verlinken" (siehe später). Aber es ist möglich, die Diagramme in Bilder / PNG zu konvertieren, und das ist die Voraussetzung. Und indem Sie im laufenden Betrieb konvertieren, können Sie Benutzer das Diagramm als Bild in eine Datei speichern lassen.

Die modernen Google-Charts sind in einem <svg> -Tag aufgebaut. Der Inhalt dieses Tags kann mithilfe der ausgezeichneten canvg- Bibliothek auf einer <canvas> gezeichnet werden .

Wenn dies erledigt ist, können Sie den Inhalt der canvas.toDataURL von canvas.toDataURL in ein <img> canvas.toDataURL . Hier ist ein Beispiel :

Fügen Sie zuerst die canvg-Bibliothek hinzu

<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 

Einige Markups - 3 Tags, ein <div> für das Diagramm, ein <canvas> und ein <img>

<div id="chart_div" style="width: 400px; height: 300px"></div>  
<canvas id="canvas"></canvas> 
<img id="img" width="200">

Beachten Sie "width=200" für das Bild, nur um zu demonstrieren, dass das tatsächlich funktioniert :)

Zeichnen Sie ein Diagramm als "normal" (wie jeder es gewohnt ist), hier nur für den Test minimalistisch

function drawLineGraph() {
   var data = new google.visualization.DataTable(someJSON);
   chart = new google.visualization.BarChart(document.getElementById("chart_div"));
   var options = {};
   chart.draw(data, options);
}

Zeichnen Sie das Diagramm auf window.load . Ich verwende einen setTimeout für den Effekt, aber in einem realen google.visualization.events.addListener(xxx, 'ready', function wäre es am besten, einen google.visualization.events.addListener(xxx, 'ready', function .

window.onload = function() {
   drawLineGraph();

   setTimeout(function() {
     //get SVG content
     var chart = document.getElementById('chart_div').getElementsByTagName('svg')[0].parentNode;
     var svg = chart.innerHTML;

     //get the canvas, adjust width / height
     var canvas = document.getElementById('canvas');
     canvas.setAttribute('width', chart.offsetWidth);
     canvas.setAttribute('height', chart.offsetHeight);

     //transfer SVG to canvas by canvg
     canvg(canvas, svg);

     //get an image source by canvas.toDataURL and add to the image
     var imgsrc = canvas.toDataURL("image/png");
     document.getElementById('img').setAttribute('src', imgsrc);
    }, 1000);
}

Die Quelle des Bildes sieht ungefähr so ​​aus:

Daten: image / jpeg; base64, iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt + XCAAAdCklEQVR4Xu2dfcyWZfnHDyFwtZVz68WcJWO9UCRuD4T9KjdrJC0HI8wWbmiTGMJPiXBg8bL + IIhioxio4aaiZIPZCxi9qCtro / ZsCatZGzSiLdZcNtwSwugX8Ou8Nhji88B5f0 + vPdf5fD .. ..

Natürlich weiter und weiter .... Wie immer. Ich habe noch nicht versucht, das zu manipulieren / remote zu verlinken / zu senden - nur als Bild verwendet - aber ich bin mir sicher, dass das ganz einfach ist !

Ergebnis / Ausgabe für den obigen Code:


Ich habe auch nach anderen ähnlichen Diensten gesucht, die statische Bilddiagramme erzeugen konnten, aber bis jetzt erfolglos waren.

Es besteht jedoch die Möglichkeit, einen eigenen "Dienst" zu erstellen, indem Sie PHP-Skripte auf Ihrem eigenen Server verwenden, denen Sie Parameter übergeben können.

Sie können eine PHP-Charting-Bibliothek verwenden, zum Beispiel pChart , um die Graphen mit PHP zu erzeugen, und das .png-Bild aus dem Skript zurückgeben.

Einige Probleme mit den JavaScript-basierten Diagrammlösungen sind, dass Sie sie normalerweise nicht verwenden können, wenn Sie PDFs mit Diagrammen im laufenden Betrieb erstellen oder die Diagramme in Rich-Text-Editoren erstellen oder einfach in E-Mails verwenden möchten ( wie du bereits erwähnt hast).


http://www.jfree.org/eastwood/ ist eine Open-Source-Implementierung des Google-Diagramms api. Es ist nicht 100% treu, aber war nahe genug für mich.


Alle bereitgestellten Antworten, einschließlich der akzeptierten, funktionieren nur unter der Annahme, dass der div Wrapper eine feste Größe hat. So wird es gemacht, egal wie groß der div wrapper ist und das ist sehr nützlich, wenn Sie eine responsive Seite entwickeln:

Schreibe diese Deklarationen in deinen DIV Selektor:

width : 8.33% /* or whatever percentage you want your div to take*/
max-height : anyValueYouWant /*(in px or %)*/ 

Fügen Sie diese Deklarationen dann in Ihren IMG Selektor ein:

width : "100%" /* obligatory */
max-height :  anyValueYouWant /*(in px or %)*/ 

SEHR WICHTIG:

Der Wert von maxHeight muss für die DIV und IMG Selektoren identisch sein .





html image charts google-api google-visualization