Highcharts 中文社区

 找回密码
 立即注册
查看: 18981|回复: 24

[导出服务器配置] Highcharts导出服务器配置——PHP版

[复制链接]
  • TA的每日心情
    擦汗
    2016-10-24 15:39
  • 签到天数: 50 天

    [LV.5]常住居民I

    8

    主题

    24

    帖子

    4119

    积分

    HC 大师

    Rank: 6Rank: 6

    积分
    4119
    发表于 2013-10-28 11:19:01 | 显示全部楼层 |阅读模式
    Highcharts导出服务器配置——PHP版
    一、运行环境及准备工作

    1、运行环境
    • Php
          Apache+php环境,相信大家都会搭建,这里就不多说了,如果不会的请安装集成环境软件WampServer
    • java运行环境
         安装java运行环境,不会的请参考本人博客中的“Java安装及环境变量配置”http://www.52wulian.org/java_classpath/
    2、文件下载
    • Highcharts
          下载地址:http://code.highcharts.com/zips/Highcharts-3.0.7.zip
    • Batik
          下载地址:http://apache.fayea.com/apache-mirror/xmlgraphics/batik
    将上述压缩包解压,得到highcharts3.0.7batik-1.7目录

    二、搭建服务器
    1、在web服务(apache)根目录新建export目录
    2、拷贝index.phpexport
         index.phphighcharts3.0.7\exporting-server\php\php-batik\目录下
    3、在export目录里新建temp目录,并给定可读可写权限,linux下给定目录777权限
    • Window下设置可读可写的方法如下
    highcharts-export-server-php1.jpg

    • Linux设置可读可写命令如下:[mw_shl_codehtml,true]Chmod 777 temp[/mw_shl_code]
    4、拷贝batik-rasterizer.jarexport目录
         batik-rasterizer.jarbatik-1.7目录下,batik-rasterizer.jar的引用在index.php17
    5、拷贝lib目录到export目录
         lib目录存在batik-1.7目录下,注意是拷贝lib目录所有内容
         这时候的export目录为:
    highcharts-export-server-php2.jpg
         测试batik可用的方式是cmd中运行java –jar batik-rasterizer.jar,如图
           highcharts-export-server-php3.jpg
    6、修改Highchartsexporting属性,指定本地的导出服务地址
    1. exporting :{
    2.       url:'http://localhost/export/index.php',
    3. }
    复制代码

    如果是想所有的图表都使用该地址,可以直接修改exporting.js

    三、测试
    编写Highcharts_exporting.html文件,内容如下
    1. <!DOCTYPE HTML>
    2. <html lang="en">
    3. <head>
    4.         <meta charset="UTF-8">
    5.         <title>Highcharts Exporting Server</title>
    6.         <meta name="description" content="Highcharts Exporting Server" />
    7.         <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    8.         <script type="text/javascript" src="demo/js/highcharts.js"></script>
    9.         <script type="text/javascript" src="demo/js/exporting.js"></script>
    10.         <script>
    11.                 $(function () {
    12.             $('#container').highcharts({
    13.                 title: {
    14.                     text: 'Monthly Average Temperature',
    15.                     x: -20 //center
    16.                 },
    17.                 exporting :{
    18.                         url:'http://localhost/export/index.php',
    19.                         width:800
    20.                 },
    21.                 subtitle: {
    22.                     text: 'Source: WorldClimate.com',
    23.                     x: -20
    24.                 },
    25.                 xAxis: {
    26.                     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    27.                 },
    28.                 yAxis: {
    29.                     title: {
    30.                         text: 'Temperature (°C)'
    31.                     },
    32.                     plotLines: [{
    33.                         value: 0,
    34.                         width: 1,
    35.                         color: '#808080'
    36.                     }]
    37.                 },
    38.                 tooltip: {
    39.                     valueSuffix: '°C'
    40.                 },
    41.                 legend: {
    42.                     layout: 'vertical',
    43.                     align: 'right',
    44.                     verticalAlign: 'middle',
    45.                     borderWidth: 0
    46.                 },
    47.                 series: [{
    48.                     name: 'Tokyo',
    49.                     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    50.                 }, {
    51.                     name: 'New York',
    52.                     data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    53.                 }, {
    54.                     name: 'Berlin',
    55.                     data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    56.                 }, {
    57.                     name: 'London',
    58.                     data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    59.                 }]
    60.             });
    61.                 });        
    62.         </script>
    63. </head>

    64. <body>
    65.         
    66.         <div id="container" style="min-width:800px;height:400px"></div>
    67. </body>

    68. </html>
    复制代码

    测试截图如下
    highcharts-export-server-php4.jpg
    生成的图片
    highcharts-export-server-php5.jpg
    注意事项:
    Highcharts_exporting.html的文档格式,编码一定是
    1. <!DOCTYPE HTML>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    复制代码

    否则将出错

    四、资源下载
    上述已经实现的php版导出服务器相关文件打包提供下载,下载解压到web服务即可使用
    下载地址:http://pan.baidu.com/s/13QJRg










    本帖被以下淘专辑推荐:

    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    擦汗
    2017-11-29 14:57
  • 签到天数: 747 天

    [LV.9]以坛为家II

    86

    主题

    1107

    帖子

    2万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    21523

    最佳新人活跃会员热心会员突出贡献优秀版主荣誉管理论坛元老

    发表于 2015-3-17 22:01:48 | 显示全部楼层
    ai51770880 发表于 2015-3-17 18:06
    楼主你好。
    1、php环境一定要Java环境吗?
    2、你给的链接都是404,下不到。

    新的网盘地址:http://pan.baidu.com/s/1o6NodRk (Highcharts中文网资源盘,包含所有分享的内容)。

    另外,Java 环境是必备的,因为调用的 Batik 是 Java 包,你可以只安装 JRE 即可。
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    擦汗
    2015-3-19 09:21
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    1

    主题

    10

    帖子

    62

    积分

    HC 新手

    Rank: 1

    积分
    62
    发表于 2015-3-18 14:09:31 | 显示全部楼层
    找出问题了,之前是Highcharts-4.0.1版本,换成Highcharts-4.0.3版本就可以了。
    与君共勉。:'(:'(:'(:'(:'(:'(:'(
  • TA的每日心情
    擦汗
    2016-10-24 15:39
  • 签到天数: 50 天

    [LV.5]常住居民I

    8

    主题

    24

    帖子

    4119

    积分

    HC 大师

    Rank: 6Rank: 6

    积分
    4119
     楼主| 发表于 2013-10-28 13:58:38 | 显示全部楼层
    中文不会乱码,如图
    2013-10-28_135833.jpg

    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts

    该用户从未签到

    0

    主题

    4

    帖子

    28

    积分

    HC 新手

    Rank: 1

    积分
    28
    发表于 2013-12-18 16:47:18 | 显示全部楼层
    楼主,我用你的资源解压到web服务上运行时白板是怎么回事呢?
  • TA的每日心情
    擦汗
    2016-10-24 15:39
  • 签到天数: 50 天

    [LV.5]常住居民I

    8

    主题

    24

    帖子

    4119

    积分

    HC 大师

    Rank: 6Rank: 6

    积分
    4119
     楼主| 发表于 2013-12-18 21:57:53 | 显示全部楼层
    青女est 发表于 2013-12-18 08:47
    楼主,我用你的资源解压到web服务上运行时白板是怎么回事呢?

    1、文件结构是:
    59.jpg

    2、将上述文件拷贝到apache服务器的根目录下,确保服务器正常运行且可以执行php程序,访问http://localhost/temp/Highcharts_exporting.html,这是会有图表显示
    3、点击导出按钮即可导出对于的文件了
    04.jpg

    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts

    该用户从未签到

    0

    主题

    4

    帖子

    28

    积分

    HC 新手

    Rank: 1

    积分
    28
    发表于 2013-12-19 17:06:49 | 显示全部楼层
    本帖最后由 青女est 于 2013-12-19 17:37 编辑

    谢谢楼主,我再试试!

    该用户从未签到

    0

    主题

    4

    帖子

    28

    积分

    HC 新手

    Rank: 1

    积分
    28
    发表于 2014-1-9 09:55:38 | 显示全部楼层
    About to transcode 1 SVG file(s)

    Converting 0d2bc6fd77be0fa8ef1216f473ef9437.svg to temp\0d2bc6fd77be0fa8ef1216f473ef9437.png ... ... error (SVGConverter.error.while.rasterizing.file)

    Error while converting SVG.

    楼主导出图片的时候会出现如上问题是为什么?
  • TA的每日心情

    2014-2-24 17:14
  • 签到天数: 7 天

    [LV.3]偶尔看看II

    2

    主题

    7

    帖子

    200

    积分

    HC 熟手

    Rank: 2

    积分
    200

    最佳新人

    发表于 2014-2-20 13:33:00 | 显示全部楼层
    楼主 不知道.net 是否可以实现这样的功能呢

    该用户从未签到

    0

    主题

    2

    帖子

    42

    积分

    HC 新手

    Rank: 1

    积分
    42
    发表于 2014-4-5 21:09:16 | 显示全部楼层
    谢谢,照着教程配置成功了。
    不过如果不能修改文件夹权限怎么办?有没有什么办法不用修改文件夹权限的?
  • TA的每日心情
    擦汗
    2016-10-24 15:39
  • 签到天数: 50 天

    [LV.5]常住居民I

    8

    主题

    24

    帖子

    4119

    积分

    HC 大师

    Rank: 6Rank: 6

    积分
    4119
     楼主| 发表于 2014-4-6 10:03:12 | 显示全部楼层
    ht2005112 发表于 2014-4-5 21:09
    谢谢,照着教程配置成功了。
    不过如果不能修改文件夹权限怎么办?有没有什么办法不用修改文件夹权限的? ...

    为什么不能修改文件夹权限?
    如果文件夹没权限当时是不行的,因为无法生成文件
    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    擦汗
    2016-10-24 15:39
  • 签到天数: 50 天

    [LV.5]常住居民I

    8

    主题

    24

    帖子

    4119

    积分

    HC 大师

    Rank: 6Rank: 6

    积分
    4119
     楼主| 发表于 2014-4-6 10:09:17 | 显示全部楼层
    本帖最后由 zhy 于 2014-4-6 10:10 编辑
    lfy2217 发表于 2014-3-7 16:13
    楼主你好,是不是导出的图片大小是固定600*400?

    不是,有配置的参数,你可以放在 highcharts 导出参数中,也可以直接在导出服务器上配置,方法分别如下:

    1、Highcharts导出参数
    [mw_shl_code=javascript,true]exporting : {
         width:800
    }[/mw_shl_code]
    更多导出参数详见API文档 : exporting

    2、在导出服务器中配置

    在导出服务器调用命令的时候,我们可以带上高度和宽度的参数,例如:
    [mw_shl_code=html,true]$output = shell_exec("java -jar ". BATIK_PATH ." $typeString -w 800 -h 400 -d $outfile $width temp/$tempName.svg");[/mw_shl_code]
    该代码见index.php
    更多参数详见我的另外一个帖子 《导出服务器原理解析

    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    快速回复 返回顶部 返回列表