1

我们已经为我们的网页创建了动态的 HighCharts——它们有一些 javascript 依赖项和一个图表生成脚本。我们想开始使用 HighCharts 配备的新 HighCharts/Node/PhantomJS 套件创建这些图表的 PDF（请参阅新闻稿）。我们的 image-gen 节点服务器将在单独的 box/vm 上运行。我们如何在不必为同一个图表维护两个单独的代码库的情况下做到这一点？我对 Node 还不太熟悉，所以我不确定使用 Web 请求来请求脚本是如何工作的。我猜想很多 HighCharts 用户想要开始生成他们的一些图表，因为图像服务器端将在管理两个相关代码集时遇到类似的问题......

本质上，我们已经有了这个：

Webserver -> JSON（数据）+ foo.js+ bar.js+ foo.html-> 带有动态图表的网页。

我们想建立：

Web 服务器 -> JSON（数据）+ 单独的节点服务器 + foo.js+ bar.js-> 可通过 Web 请求获得的图像

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

4

2 回答 2

2

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

于 2015-06-09T16:49:53.377 回答
0

我们决定将整个 highcharts 配置对象（例如Highcharts.chart(configObj)）作为 URL 编码字符串传递给节点服务器。我们不得不在节点服务器上放置一些渲染功能，但还不错。我们还在字符串配置对象中加入了一些渲染函数。不是最美丽的结果，但它奏效了。

于 2013-05-01T21:04:24.893 回答