繁体   English   中英

如何在网页中嵌入图形(jpgraph)

[英]How to embed a graph (jpgraph) in a web-page

我正在使用脚本,它是jpgraph本身提供的示例之一。 当我将其单独放在网页(空白)上时,它正在绘制图形。 但是,当我将代码嵌入到已有的网页(带有某些内容)中时,它并没有绘制图形。

GD已根据phpinfo()启用。 Iam使用jpgraph 3.5.0b1。

问题是您将HTML /文本输出与图像输出混合在一起。

每当使用PHP脚本生成图形内容时,您都必须以不同于普通HTML或文本的方式处理输出。

有几条路线,我将在这里简单介绍。

将输出保存到文件,然后在HTML中使用该文件名

//replace this line:
// Display the graph
//$graph->Stroke();

// with these lines:

    // Default is PNG so use ".png" as suffix
    $fileName = "/tmp/imagefile.png";
    $graph->img->Stream($fileName);

..然后在图像标签中使用$filename ,例如(例如):

print '<img src="'.$filename.'" />';

创建一个独立的PHP脚本,将输出图形

您可以单独在名为graph_render_script.php的文件中直接使用示例脚本。 然后,在您的HTML中,将该脚本用作源:

<img src="graph_render_script.php" />

输出base-64编码的数据

另一种方法是使用base-64编码的图像数据。 这是相对简单的:

print '<img src="data:image/png;base64,'.base64_encode($graph->Stroke()).'" />';

与往常一样,文档应作为您的指南!

文献资料

这为我工作:

将生成图像的php代码放在文件中...然后在我的html页面上执行以下操作:

<img src="graph.php" > 

内嵌图的嵌入确实是可能的 您必须使用输出缓冲来捕获图像数据,然后对base64对该数据进行编码,然后使用该base64编码的字符串作为<img>的源。

尝试这样的事情:

$img = $graph->Stroke(_IMG_HANDLER);

ob_start();
imagepng($img);
$imageData = ob_get_contents();
ob_end_clean();

?><html>
<head>
    <title>JpGraph Inline Image Example</title>
</head>
<body>
    <h1>JpGraph Inline Image Example</h1>
    <img src="data:image/png;base64,<?php echo(base64_encode($imageData)); ?>" />
</body>
</html>

ceejayoz提出了一个极好的观点,即这种方法几乎绝不是您想要的。 我不建议像这样嵌入图像数据,除非您有充分的理由这样做并了解不利之处,即较旧的浏览器缺乏对此的支持,并且页面大小急剧增加(不仅来自图像数据,而且事实上图像数据是base64编码的,这会增加长度)。 去年,我在一个项目中亲自在此领域中使用了这种方法,但这仅仅是因为客户拒绝再次请求该图像。

但是,当我将代码嵌入到已有的网页(带有某些内容)中时,它并没有绘制图形。

您无法做到这一点-您无法在页面内将图像作为原始二进制数据输出。

您需要将生成图形的代码放在单独的文件中,并使用图像标签。

<img src="path/to/jpgraph/chart.php" />

该图必须位于其自己的页面上,您不能嵌入它。 它会输出原始JPG,您无需发送其他任何内容,也不需要使用适当的标头来告诉浏览器它是JPG。 要嵌入该图,您需要创建一个不同的页面,例如stats.php,然后在该页面上创建一个图像标记,以指向独立的图。

<img src=graph.php>

我已经多次遇到这个问题,我注意到当您的Chart脚本中具有require()include()并且这些脚本具有数据库连接或特殊配置时,就会发生此问题。

我已经解决了分离数据检索和图表绘图,将参数传递到脚本或使用SESSIONS来获取值的问题。

在您的PHP或HTML文件中嵌入图像图表的示例:

<img src="linear_graph_customer.php?values=1,2,3,4|1,2,3,4|1,2,3,4&title=CHART&width=500&height=300" width="500" height="300" class="img" />

问候。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM