Генерация HighStock карт на стороне сервера с помощью NodeJS - PullRequest
Новая
       25

Генерация HighStock карт на стороне сервера с помощью NodeJS

7 голосов
/ 20 февраля 2012

Я использую HighStock для генерации некоторых диаграмм в браузере.Но теперь я хочу хранить некоторые из них на сервере.Так что я знаю, что HighCharts можно экспортировать на сервер, но я бы предпочел использовать другой способ, если это возможно.Дело в том, чтобы запустить HighStock на сервере и преобразовать svg в какой-нибудь формат изображения, а затем сохранить его там.

Быстрое поиск в Google дает мне эту страницу .Комбинация HighCharts и NodeJS кажется правильным, но это решение не работает для более новых версий HighCharts.Точнее, используя jsdom модуль (v0.2.10 - последний) в NodeJS с HighStock v1.0.2 (посмотрите на следующий код): 

var jsdom = require('jsdom');
var fs = require('fs');
var jQuery = fs.readFileSync('./js/jquery-1.7.min.js').toString();
var Highstock = fs.readFileSync('./js/highstock.js').toString();
jsdom.env({
    html: '<div id="container"></div>',
    src: [ jQuery, Highstock ],
    done: function(errors, window) {
        if (errors) return console.log(errors);
        var Highcharts = window.Highcharts;
        var chart = new Highcharts.Chart(options);
    }
});

выдает исключение: 

Error: Invalid character: Invalid character in tag name: <

Каким-то образом эти две библиотеки не работают вместе.Так что это может работать со старыми версиями HighStock, но на самом деле мне нужен HighStock v1.0.2.

Есть ли какое-либо решение для этой проблемы?Какая-то лучшая библиотека, которая jsdom?Или какие-то странные, но работающие трюки?Любая идея приветствуется.:)

// РЕДАКТИРОВАТЬ

Благодаря ReCoder мне удалось заставить его работать.Главное было добавить флаг forExport в опции (исключая исключения).К сожалению, это сгенерировало диаграмму, но не обновило владельца.Мне удалось заставить его работать после добавления модуля exporting (часть пакета HighStock).Полный рабочий код выглядит следующим образом: 

var jsdom = require('jsdom');
var fs = require('fs');
var jQuery = fs.readFileSync('./js/jquery-1.7.min.js').toString();
var Highstock = fs.readFileSync('./js/highstock.src.js').toString();
var Exporting = fs.readFileSync('./js/exporting.src.js').toString();

jsdom.env({
    html: '<div id="container"></div>',
    src: [ jQuery, Highstock, Exporting ],
    done: function(errors, window) {
        if (errors) return console.log(errors);
        var Highcharts = window.Highcharts;
        var chart = new Highcharts.Chart({
              chart: {
                 renderTo: 'container',
                 animation: false,
                 forExport: true       
              },
              exporting: { enabled: false },
              xAxis: {
                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
              },
              series: [{
                 animation: false,
                 name: 'Tokyo',
                 data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
              }, {
                 animation: false,      
                 name: 'New York',
                 data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
              }, {
                 animation: false,      
                 name: 'Berlin',
                 data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
              }, {
                 animation: false,      
                 name: 'London',
                 data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
              }]
        });

        var svg = chart.getSVG();

        fs.writeFile("./test.svg", svg, function(err) {
            if(err) {
                console.log(err);
            } else {
                console.log("The file was saved!");
            }            
        }); 
    }
});

Диаграмма не так хороша, как должна быть (например, неправильно размещены метки), но, возможно, дело в настройках.По крайней мере, это работает!

Ответы [ 3 ]

1 голос
/ 13 марта 2012

Это можно исправить, подняв флаг "forExport" в объекте параметров: 

options.chart.forExport = true;
0 голосов
/ 10 февраля 2013

Я заменил node.js на phantomJs, который хорошо поработал, как описано в Генерация данных изображения Canvas HTML на стороне сервера? (пример из jQplot, но работает и для старшей диаграммы.)

0 голосов
/ 20 февраля 2012

Я попытался воссоздать ваш пример, и я загрузил jQuery и Highcharts с помощью jsdom. Похоже, Highcharts пытается вызвать createElement с HTML-фрагментом: 

createElement('<div filled="f" stroked="f" style="position: absolute;left:0;top:0;width:10px;height:10px;"/>')

Это выглядит подозрительно. Я не уверен, как это работает в браузере - я не могу вызвать createElement с этим в моем браузере (Chromium).

...