[英]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()).'" />';
与往常一样,文档应作为您的指南!
文献资料
base64_encode
- http: base64_encode
这为我工作:
将生成图像的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.