node.js - 使用(moSTLy)一个代码库构建动态 HighCharts 和图像 Highcharts？

Question

我们已经在为我们的网页创建动态 HighChart - 这些有一些 JavaScript 依赖项和图表生成脚本。我们希望开始使用 HighCharts 已安装的新 HighCharts/Node/PhantomJS 套件创建这些图表的 PDF(请参阅 press release )。我们的图像生成 Node 服务器将在单独的盒子/虚拟机上运行。我们如何才能做到这一点，而不必为同一个图表维护两个单独的代码库？我对 Node 还不太熟悉，所以我不确定如何通过 Web 请求请求脚本。我猜想很多想要开始生成一些图表作为服务器端图像的 HighCharts 用户在管理两个相关代码集时会遇到类似的问题...

本质上，我们已经有了:

Web服务器 -> JSON(数据)+ foo.js + bar.js + foo.html -> 带有动态图表的网页。

我们想要构建:

Web 服务器 -> JSON(数据)+ 单独的 Node 服务器 + foo.js + bar.js -> 通过 Web 请求提供图像

显然有些冗余。我们如何管理依赖关系？

Answer 1

虽然 Node 很棒，但我觉得这种方法不必要地复杂，有许多可能损坏的移动部件。所以我做了动态创建文件的 super 简单的解决方案。我遇到的唯一问题是将临时文件添加到 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 解决方案。