[html] Google Chart Images Replacement



2 Answers

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.

Question

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.




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 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);





Related