PHP Lang
  1. PHP Lang
  3. Как загрузить диаграммы Google в node.js?
Intereting Posts
MVC. Разве хорошо, что модель состоит из нескольких других моделей? Получение ошибки Parse: синтаксическая ошибка, неожиданные '}', ожидающие ',' или '; PHP-защита от mysql-инъекций Ошибка подключения к PHP: SQLSTATE Соединение отклонено Как я могу заставить PHP mail () работать? Нужна помощь в настройке MTA OAuth: сохранение токена доступа и секретности Сортировать по наивысшей средней оценке Разбор RSS-ленты с использованием PHP для вставки в мой SQL-запрос как сделать php-выражения и выполнить из базы данных? Отображение всплывающей подсказки, когда пользователь наводится на ярлык переключателя в JQuery Как вставить данные формы из нескольких полей в один столбец таблицы sql Как вызвать событие mysql после периода времени? Нужна помощь в понимании доктрины многих ко многим саморекламным кодам Как мне вызвать функцию из dll из php на windows? Передача значений с JavaScript на PHP с использованием AJAX

Как загрузить диаграммы Google в node.js?

Когда я пытаюсь загрузить диаграмму Google в node.js, ничего не происходит.

Я попробовал загрузить первый пример из документов диаграммы строк в zombie.js и jsdom, но диаграмма никогда не загружается ни в одном случае.

Конечной целью является получение SVG-данных сгенерированной диаграммы для экспорта в изображение или PDF. Поэтому, если альтернативный метод (серверная сторона, использующий node.js или PHP) для достижения этого, возможно, я открыт для предложений.

ПРИМЕЧАНИЕ . Я успешно создал изображения нескольких диаграмм с помощью gChartPhp, но в требованиях этого проекта указано, что встроенная версия будет интерактивной версией, предоставляемой текущим API, а экспортированная версия будет визуально ИДЕНТИЧНО во встроенную (без интерактивности , очевидно).

Редактировать : я пометил PhantomJS , так как это решение, с которым я в конечном итоге пошел.

Извините за отсутствие ссылок, но механизм предотвращения спама позволит мне только опубликовать 2.

Это было не идеальное решение, но я нашел альтернативу node.js для достижения той же конечной цели в PhantomJS . Просто создайте HTML-файл, содержащий диаграмму (test.html) и, подобно node.js, создайте файл JS, содержащий ваш код (test.js). Затем запустите свой JS-файл с помощью PhantomJS.

В своем JS-файле откройте свой HTML-файл в качестве веб-страницы, а затем визуализируйте его, либо сохраните буфер изображения в файл: 

var page = require('webpage').create(); page.open('test.html', function () { page.render('test.png'); phantom.exit(); });

Затем запустите его: 

 phantomjs test.js

Чтобы динамически создать диаграмму, создайте следующий JS-файл (test2.js): 

 var system = require('system'); var page = require('webpage').create(); page.onCallback = function(data) { page.clipRect = data.clipRect; page.render('test.png'); phantom.exit(); }; page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js', function() { page.includeJs('https://www.google.com/jsapi', function() { page.evaluate(function(chartType, data_json, options_json) { var div = $('<div />').attr('id', 'chart').width(900).height(500).appendTo($('body')); google.load("visualization", "1", { packages:[chartType == 'GeoChart' ? 'geochart' : 'corechart'], callback: function() { data_arr = $.parseJSON(data_json); data = google.visualization.arrayToDataTable(data_arr); options = $.parseJSON(options_json); chart = new google.visualization[chartType]($(div).get(0)); google.visualization.events.addListener(chart, 'ready', function() { window.callPhantom( { clipRect: $(div).get(0).getBoundingClientRect() }); }); chart.draw(data, options); } }); }, system.args[1], system.args[2], system.args[3]); }); });

Затем запустите его: 

 phantomjs test2.js LineChart '[["Date","Steve","David","Other"],["Dec 31",8,5,3],["Jan 1",7,10,4],["Jan 2",9,4,3],["Jan 3",7,5,3]]' '{"hAxis.slantedText":true}' phantomjs test2.js PieChart '[["Employee","Calls"],["Steve",31],["David",24],["Other",13]]' '{"is3D":true}' phantomjs test2.js GeoChart '[["State","Calls"],["US-CA",7],["US-TX",5],["US-FL",4],["US-NY",8]]' '{"region":"US","resolution":"provinces"}'

Чтобы получить данные изображения из внешнего скрипта, сделайте копию test2.js (test3.js) и измените 

 page.render('test.png');

в 

 console.log(page.renderBase64('png'));

Затем назовите его (например, из PHP): 

 <?php $data = array( array("Employee", "Calls"), array("Steve", 31), array("David", 24), array("Other", 13) ); $options = array( "is3D" => true ); $command = "phantomjs test3.js PieChart '" . json_encode($data) . "' '" . json_encode($options) . "'"; unset($output); $result = exec($command, $output); $base64_image = implode("\n", $output); $image = base64_decode($base64_image); ?> с <?php $data = array( array("Employee", "Calls"), array("Steve", 31), array("David", 24), array("Other", 13) ); $options = array( "is3D" => true ); $command = "phantomjs test3.js PieChart '" . json_encode($data) . "' '" . json_encode($options) . "'"; unset($output); $result = exec($command, $output); $base64_image = implode("\n", $output); $image = base64_decode($base64_image); ?>

ПРИМЕЧАНИЕ . Оглядываясь назад на весь этот процесс, проблема, с которой я столкнулась с node.js, была, возможно, в том, что я не настраивал обратные вызовы или таймауты, чтобы ждать, пока графики не будут «готовы».