Замена изображений в Google Chart

Ответ 1

Следуя этому объявлению, мы сделали замену для графических карт Google и добавили gif анимация поверх нее 🚀 (анимация диаграмм в письмах является удивительной!!).

Он называется Image-chart. Отсутствие сбоя диаграммы на стороне сервера, отсутствие проблем с масштабированием, быстрое сверкание, 1 графическая карта URL = 1.

Ответ 2

http://www.jfree.org/eastwood/ - это реализация графика google диаграммы с открытым исходным кодом. Он не на 100% верен, но был достаточно близко для меня.

Ответ 3

Моя команда в Рамене недавно построила именно это. Он называется ChartURL. Это не навсегда - как API Google Charts API, но есть довольно щедрый свободный уровень.

Он позволяет вам создавать URL-адреса двумя способами. Во-первых, вы можете зашифровать данные в URL. Мы используем шифрование для целей бухгалтерского учета (поскольку оно не навсегда - бесплатно). В обоих случаях вы кодируете template_slug и ваши данные в URL. template_slug представляет собой строковое представление конфигурации диаграммы, которую вы можете изменить, просмотреть и сохранить в своей учетной записи на ChartURL.com. Таким образом, вы можете иметь email-bar-chart-1 и email-bar-chart-2 и timeseries-signups каждый со своим собственным стилем/конфигом, а затем просто отправлять данные, которые хотите скопировать внутри этого шаблона.

Здесь приведен пример создания URL-адреса в ruby:

# This is a working example. View fully commented version here:
# https://gist.github.com/ryana/055414a4804806263b82
require 'json'
require 'openssl'
require 'base64'
require 'cgi'

ENCRYPT_KEY = "dek-d7a46236eda961a6c3c18ffcc6b077ba87d27e9ae85f7842c6d427c265dd5f69d5131308d93332353d4a55a4b1160fcf516515a4a9f0aa50fbf2d7a2e7d0f1c5"
ENCRYPT_KEY_DIGEST = KEY_DIGEST = OpenSSL::Digest::SHA256.new(ENCRYPT_KEY).digest
PROJECT_TOKEN = "dt-RwYN"

def charturl_url(template_slug, data)
  json = {options: data}.to_json
  cipher = OpenSSL::Cipher.new 'AES-256-CBC'
  cipher.encrypt
  iv = cipher.random_iv
  cipher.key = ENCRYPT_KEY_DIGEST
  encrypted_json = cipher.update(json) + cipher.final

  iv_for_url = CGI.escape(Base64.encode64(iv))
  data_for_url = CGI.escape(Base64.encode64(encrypted_json))

  "https://charturl.com/i/#{PROJECT_TOKEN}/#{template_slug}/#{iv_for_url}/#{data_for_url}"  
end

# Call our helper
url = charturl_url("weekly-activity",
    data: {columns: [["This Week", 10,12,41,9,14,15,15], ["Last Week", 9,14,21,21,20,3,5]]})

#=> https://charturl.com/i/dt-RwYN/weekly-activity/nEPfObOZ3zTivXZqri8ZLA%3D%3D%0A/7X6WrBHEdRcnutV0fU0sN8s9mHFGkkRr%2FZYJwb43p8PDzAJvGWd37zi6ro70%0AVJd9f%2FkSIq2dmJzGe%2BW6CSlpUIrhXHXogvXd%2B%2Fk4VOS%2BTSlnMBwKOSJJNpGZ%0AVrLZd%2Fgq1mSbiXQnc%2FydiTVcGL2DaA%3D%3D%0A

Поскольку URL-адреса имеют ограничение на символы, мы также предоставляем API, который позволяет вам получать данные POST, и мы вернем короткий URL-адрес:

# This is a working example. View fully commented version here:
# https://gist.github.com/ryana/d37fccd7af3c6c409164/
require 'json'
require 'typhoeus'

API_KEY = "dak-55045dac-bb35-40ac-80c8-874ab71c6f83"

def charturl_url(template_slug, options)
  url = "https://charturl.com/short-urls.json?api_key=#{API_KEY}"
  headers = {'Content-Type' => 'application/json'}
  body = {template: template_slug, options: options}.to_json
  surl_response = Typhoeus::Request.post(url, body: body, headers: headers)
  raise("Error creating ShortURL: #{surl_response.inspect}") if !surl_response.success?
  JSON.parse(surl_response.body)['short_url']
end

# Call our helper
url = charturl_url("weekly-activity", data: {columns: [["This week", 4,1,5,6,1,7,8], ["Last week", 1,5,3,1,6,2,6]]})
url #=> "https://charturl.com/r/J9lA"

Ответ 4

В настоящий момент я не нашел решение фактически "напрямую связать" с графиком (см. ниже). Но можно преобразовать графики в изображения /PNG, и это является обязательным условием. И путем преобразования "на лету" вы можете позволить пользователям сохранять диаграмму как изображение в файл.

Современные диаграммы google создаются в теге <svg>. Содержимое этого тега можно нарисовать на <canvas>, используя отличную библиотеку canvg.

Когда это будет сделано, вы можете перенести содержимое холста на <img> на canvas.toDataURL. Вот пример:

Сначала включите библиотеку canvg

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

Некоторые метки разметки - 3, a <div> для диаграммы, a <canvas> и a <img>

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

Обратите внимание на "width=200" для изображения, просто чтобы продемонстрировать, что это действительно работает:)

Нарисуйте диаграмму как "нормальную" (как и все ее используют), здесь минималистично только для теста

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

Нарисуйте диаграмму на window.load. Я использую эффект setTimeout для эффекта, но в сценарии реальной жизни я думаю, что было бы лучше использовать 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);
}

Изображение src будет выглядеть примерно так:

данные: изображения /PNG; base64, iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAYAAADtt + XCAAAdCklEQVR4Xu2dfcyWZfnHDyFwtZVz68WcJWO9UCRuD4T9KjdrJC0HI8wWbmiTGMJPiXBg8bL + IIhioxio4aaiZIPZCxi9qCtro/ZsCatZGzSiLdZcNtwSwugX8Ou8Nhji88B5f0 + vPdf5fD....

Конечно, продолжайте и продолжайте... Как обычно. Я еще не пытался манипулировать/удаленной ссылкой/отправил это - использовал его только как изображение - , но я уверен, что это довольно легко!

Результат/вывод для кода выше:

Ответ 5

Я также искал другие аналогичные службы, которые могли генерировать статические графические диаграммы, но пока не увенчались успехом.

Однако вариант заключается в создании собственной "службы" с использованием php-скриптов на вашем собственном сервере, с помощью которых вы можете передавать параметры.

Вы можете использовать библиотеку диаграмм php, например, pChart, чтобы сгенерировать графики с php и вернуть изображение .png из script.

Некоторые проблемы с графическими решениями на основе javascript заключаются в том, что вы обычно не можете их использовать, если вы также хотите генерировать PDF-диаграммы "на лету", или если вы хотите генерировать диаграммы внутри редакторов Rich-Text или просто использовать их в письмах (как вы уже упоминали).

Ответ 6

Я также столкнулся с такой проблемой, когда мне нужны статические графические диаграммы на стороне сервера с использованием PHP. Я нашел способ достичь этого, используя API-интерфейс PhantomJS и Google Chart java. Ниже приведен пример того, как это сделать...

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 

});

После этого вам нужно запустить этот файл javascript в вашем PHP: -

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