如何使用 Perl 将图表添加到网页？答案

【问题标题】：How Do I Add A Graph to a Webpage Using Perl?如何使用 Perl 将图表添加到网页？
【发布时间】：2017-11-22 04:33:56
【问题描述】：

我需要使用从 MySQL 数据库中提取的 Perl 中的数据创建一个图表。

我看过GD::Graph推荐和其他方法，但我不知道如何使用它们，在网上找不到太多。

我已经为网页输入了GD::Graph 脚本，但没有任何反应。我假设我必须以某种方式合并 HTML 来显示图表，但我也不知道该怎么做。

我只需要一个基本的折线图，所以任何简单的例子都会有很大帮助。

这是我正在玩的一个示例程序，但我无法开始工作：

use GD::Graph::bars;
use GD::Graph::Data;

my $data = GD::Graph::Data->new([
    ["1st","2nd","3rd","4th","5th","6th","7th", "8th", "9th"],
    [    1,    2,    5,    6,    3,  1.5,    1,     3,     4],
]) or die GD::Graph::Data->error;

my $graph = GD::Graph::bars->new;

$graph->set( 
     x_label         => 'X Label',
     y_label         => 'Y label',
     title           => 'A Simple Bar Chart',

     #y_max_value     => 7,
     #y_tick_number   => 8,
     #y_label_skip    => 3,

     #x_labels_vertical => 1,

     #bar_spacing     => 10,
     #shadow_depth    => 4,
     #shadowclr       => 'dred',

     #transparent     => 0,
) or die $graph->error;

$graph->plot($data) or die $graph->error;

my $file = 'bars.png';
open(my $out, '>', $file) or die "Cannot open '$file' for write: $!";
binmode $out;
print $out $graph->gd->png;
close $out;

【问题讨论】：

SO 不是代码编写服务。请向我们展示您尝试过并需要帮助的代码。
我不是要别人帮我写，只是帮助我指出正确的方向。
您展示的这段代码创建了一个图像，并将其打印到一个文件中。如果您想将其包含在 HTML 页面中，则必须包含该图像。或者，您可以将此代码用作 CGI 脚本，而不是打开文件，只需打印到 STDOUT。首先发送正确的image/png 标头。在 <img src="foo.pl"> 标记中使用 HTML 中脚本的 URL。
即使我保持原样，但我仍然没有得到图像。我究竟如何合并您提到的添加内容？
您首先需要了解“Web”是如何工作的：服务器、客户端、请求和响应；内容类型、HTML、图像如何嵌入页面等。没有基础知识，您将迷失方向。你在这里学到的东西还不够。

标签： html mysql perl graph charts

【解决方案1】：

您的示例程序对我有用。我得到一个名为bars.png 的文件，其中包含预期的图像。如果您需要帮助以使该程序正常工作，那么您需要向我们提供更多信息，而不是“这是我正在玩的一个示例程序，但我无法开始工作”。您究竟得到了什么意外行为？文件写了吗？它是否包含正确的图像？你的电脑起火了吗？

让该程序运行后，将其转换为将图像写入 STDOUT 的 CGI 程序是一个简单的过程。它看起来像这样：

#!/usr/bin/perl

use strict;
use warnings;

# Added: Use the CGI library
# (not essential, but makes your life easier)
use CGI 'header';
use GD::Graph::bars;
use GD::Graph::Data;

my $data = GD::Graph::Data->new([
    ["1st","2nd","3rd","4th","5th","6th","7th", "8th", "9th"],
    [    1,    2,    5,    6,    3,  1.5,    1,     3,     4],
]) or die GD::Graph::Data->error;

my $graph = GD::Graph::bars->new;

$graph->set(
     x_label         => 'X Label',
     y_label         => 'Y label',
     title           => 'A Simple Bar Chart',

     #y_max_value     => 7,
     #y_tick_number   => 8,
     #y_label_skip    => 3,

     #x_labels_vertical => 1,

     #bar_spacing     => 10,
     #shadow_depth    => 4,
     #shadowclr       => 'dred',

     #transparent     => 0,
) or die $graph->error;

$graph->plot($data) or die $graph->error;

# Added: print the content-type header
print header('image/png');

# Removed: opening an image file
# Changed: Run binmode against STDOUT, not your image file
binmode STDOUT;
# Changed: Print image to STDOUT, not your image file
print $graph->gd->png;
# Removed: Don't close the filehandle, that you didn't open :-)

如果您将该代码放在 Web 服务器上某个文件中的某个文件中，该文件被识别为 CGI 程序（这样做超出了本答案的范围 - 但本网站上有很多关于它的好答案），那么您将能够在浏览器中输入文件的 URL 以查看图像。一旦成功，您还可以使用<img src="..."> 标记将图像嵌入到 HTML 页面中。

如果您在这方面需要更多帮助，请提出更具体的问题。

【讨论】：

这非常有用，我得到了我想要的结果。谢谢
@Nicolas: What to do when someone answers my question

【解决方案2】：

如果您对GD::Graph 有足够的了解以生成图像文件（例如，PNG 文件），那么在网络浏览器中显示它的常用习惯用法是

...
use GD::Graph;
my $graph = ...;
my $file = "bars-$$.png";     # a unique file name
# replace  /var/www/htdocs  here with the root document directory for your server
open my $out, '>', '/var/www/htdocs/bars/$file';
print $out $graph->gd->png;
close $out;

# now write the web page
print "Content-type: text/html\n\n";
print "<html><head><title>Bar Graph</title><head>\n";
print "<body>";
print ...
print "<h2>Here is a bar graph</h2>\n";
print "<img src='/bars/$file'>\n";
print ...
print "</body></html>\n";

【讨论】：

为什么这比用image/png 内容类型和图像数据响应更惯用？
你需要binmode $out或open my $out, '>:unix', ...来保证correct behavior on Windows
鼓励在 CGI 程序中使用原始 HTML 绝不是一个好主意。