Создавать динамические HighCharts и изображения Highcharts с (в основном) одной кодовой базой?

Мы уже создаем динамические HighCharts для наших веб-страниц — они имеют несколько зависимостей javascript и скрипт для создания диаграмм. Мы хотели бы начать создавать PDF-файлы этих диаграмм, используя новый набор HighCharts/Node/PhantomJS, который HighCharts оснастил (см. пресс-релиз). Наш сервер узла генерации изображений будет работать на отдельном блоке /vm. Как мы можем сделать это, не поддерживая две отдельные кодовые базы для одной и той же диаграммы? Я еще не очень хорошо знаком с Node, поэтому не уверен, как будет работать запрос скриптов с помощью веб-запроса. Я предполагаю, что многие пользователи HighCharts, которые хотят начать генерировать некоторые из своих диаграмм в качестве изображений на стороне сервера, столкнутся с аналогичной проблемой при управлении двумя связанными наборами кодов...

По сути, у нас уже есть это:

Веб-сервер -> JSON (данные) + foo.js + bar.js + foo.html -> веб-страница с динамическими диаграммами.

Мы хотели бы построить:

Веб-сервер -> JSON (данные) + отдельный Node Server + foo.js + bar.js -> изображения, доступные через веб-запрос

Явно какая-то избыточность. Как мы можем управлять зависимостями?


person AlexMA    schedule 18.03.2013    source источник


Ответы (2)


Хотя Node.js великолепен, мне показалось, что этот подход излишне сложен из-за большого количества движущихся частей, которые могут сломаться. Поэтому я сделал очень простое решение для динамического создания файлов. Единственная проблема, с которой я столкнулся, это удаление временного файла после его добавления в pdf. Это нарушит PDF от рендеринга. И установка каталога в /tmp привела к сбою phantomjs. Лучшая идея, которую я придумал в настоящее время, - это поместить временные сгенерированные файлы во временный каталог, а затем удалять все в этом каталоге каждую ночь с помощью cronjob.

Я публикую это из простоты кода. Это должно быть в функции, чтобы поддерживать возможность повторного использования кода.

<?php    
    $TmpInFileName = 'tmp/graph_'.md5($CurrentDate.rand(666,9482845713)).'.js';
    $TmpGraphFileName = 'tmp/pnggraph_'.md5($CurrentDate.rand(2666,54713)).'.png';

    $Data = "
        {
            chart: {
                zoomType: 'xy',
                width: 700,
                height: 520
            },
            credits: {
                  enabled: false
            },
            colors: [
                     '#2f7ed8', 
                     '#910000', 
                     '#8bbc21', 
                     '#1aadce', 
                     '#492970',
                     '#f28f43', 
                     '#77a1e5', 
                     '#c42525', 
                     '#a6c96a'
                  ],
            title: {
                text: 'Sample Graph - created at ".date('m/d/Y g:i:s a')."',
                style: {
                    fontSize: '16px',
                }
            },
            xAxis: [{
                categories: ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30']
            }],
            yAxis: [{ 
                labels: {
                    format: '{value}',
                    style: {
                        fontSize: '14px',
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: 'Y axis',
                    style: {
                        fontSize: '16px',
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Sec Yaxis',
                    style: {
                        fontSize: '16px',
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                labels: {
                    format: '{value}',
                    style: {
                        fontSize: '14px',
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'horizontal',
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
            series: [{
                name: 'first',
                type: 'spline',
                yAxis: 1,
                data: [0, -119.9502311075212, -119.96203992145706, -119.98172620218355, -119.71898290168028, -119.97023935590325, -119.95230287195413]
            },
            {
                name: 'second',
                type: 'spline',
                yAxis: 1,
                data: [0, -119.24222667756482, -119.60905809195222, -119.63522965403729, -119.11011466187935, -119.63643171374981, -119.54969080301575]

            },{
                name: 'third',
                type: 'column',
                data: [10, 11, 9, 7, 5, 2, 7]
            },{
                name: 'fourth',
                type: 'column',
                data: [0, -0.7080044299563895, -0.35298182950484147, -0.34649654814626274, -0.6088682398009269, -0.33380764215343106, -0.40261206893838164]
            }]
        }";

    try {
        $myfile = fopen($TmpInFileName, "w") or die("Unable to open file!");
        fwrite($myfile, $Data);
        fclose($myfile);                                
    } catch (Exception $e) {
        echo 'Error: '.$e.' <br />';
    }  

    $URL_Command = "phantomjs  /highcharts/exporting-server/phantomjs/highcharts-convert.js -infile $TmpInFileName -outfile $TmpGraphFileName -width 600";
    exec($URL_Command);    

    echo '<img src="'.$TmpGraphFileName.'" alt="Could not load img: '.$TmpGraphFileName.'">';

?>

Надеюсь, это поможет. Я не смог найти хорошего решения, в котором для этого не использовались бы Node.JS или Java. Я хотел чистое PHP-решение.

person Christopher Gray    schedule 09.06.2015

Мы решили передать весь объект конфигурации highcharts (например, Highcharts.chart(configObj)) на сервер узла в виде строки в кодировке URL. Нам пришлось перенести несколько функций рендеринга на сервер узла, но это было не так уж плохо. Мы также поместили некоторые функции рендеринга в строковый объект конфигурации. Не самый красивый результат, но это сработало.

person AlexMA    schedule 01.05.2013