一。Higcharts 中文网
HighChart中文网， 非常好的中文网站 ， 并有精简的demo 强烈推荐
二。 highcharts 图片导出功能( 下载图片)：
2.1 从highcharts 远程官网服务器实现图片下载
参考代码 ： highcharst 中文网
2.2 从本地服务器实现图片下载 （php 实现 与 ruby on rails 实现）
highcharts 生成的chart 格式是svg, 我们要下载的图片是jpg的， 实现中间的转换需要插件 batik
下载官网： 该插件是是基于java的 图片格式转换工具
在2.1的下载页面下载svg 格式的图片（可以使用浏览器打开）
1. 命令行转换：
java -jar batik-rasterizer.jar -m image/png test.svg // 吧 test.svg 转化为 test.png格式
2. php 实现的 本地下载服务
highcharts 压缩包的 exporting-server/php/php-batik/index.php
$output"; echo "Error while converting SVG. "; if (strpos($output, 'SVGConverter.error.while.rasterizing.file') !== false) { echo " Debug steps
- Copy the SVG:
" . htmlentities(str_replace('>', ">\n", $svg)) . " - Go to
validator.w3.org/#validate_by_input - Paste the SVG
- Click More Options and select SVG 1.1 for Use Doctype
- Click the Check button
"; } } // stream it else { // 下载图片的服务 header("Content-Disposition: attachment; filename=\"$filename.$ext\""); header("Content-Type: $type"); echo file_get_contents($outfile); } // delete it unlink("temp/$tempName.svg"); unlink($outfile);// SVG can be streamed directly back} else if ($ext == 'svg') { header("Content-Disposition: attachment; filename=\"$filename.$ext\""); header("Content-Type: $type"); echo $svg; } else { echo "Invalid type";}?> 3. 使用ruby自己实现的本地下载
前端 haml 页面代码
%br %p{style: 'margin-left:20px'} %button#downloadChart 导出统计图片 // 页面按钮 %button#downloadWord 下载报告模板%script{:src => "/highcharts.js", :type => "text/javascript"}%script{:src => "/exporting.js", :type => "text/javascript"}:javascript $(document).ready(function () { var chart = new Highcharts.Chart({ // chart 对象 chart: { type: 'column', renderTo: 'target' }, title: { text: '目标值' }, subtitle: { text: '' }, exporting: { filename: "target", type: "image/png", //url:'http://127.0.0.1:4567/' width:1000 }, xAxis: { categories: [ "#{_processareas.map{|processarea| processarea.upcase}.join '","'}" ] }, yAxis: { min: 0, max: 10, tickInterval: 2, title: { text: '分 值' } }, tooltip: { headerFormat: ' {point.key} {series.name}: ' + ' {point.y:.1f} ', pointFormat: '
', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0, pointWidth: 20, groupPadding: 0.15 } }, series: [#{ _marks.map{|group, points| "{name: '#{group.upcase}', data: [#{points.join(', ')}]}" }.join(', ') }, { name: 'PA', data: [#{_processarea_marks.join(',')}] }] }); $('#downloadChart').click(function(){ // 导出图片button var data = chart.getSVG(); //alert(data); //window.open("/img?_data="+data); var tmp = document.createElement("Form"); // 图片内容大，使用post, 通过javascript使用post tmp.action = "/img"; tmp.method = "post"; var pagam = document.createElement("textarea"); // pagam.name = "_data"; pagam.value = data; tmp.appendChild(pagam); document.body.appendChild(tmp); tmp.submit(); // 即js 创建表单的过程 }); $("#downloadWord").click(function(){ // 导出文档按钮 //var word = "等级"+"#{_level}"+"模板.doc"; //alert(window.location.pathname); window.location.href ="/doc?level=#{_level}"; //js代开后台服务的连接 }); }); 服务器： ruby 服务代码
batik 需要java jdk , 所以要把jdk的相关文件拷贝的本地服务器的相关文件夹， 也可以通过bat文件中设置path 添加
bat:
set PATH=%PATH%;%CD%\bin
post '/img' do data = params[:_data] oFile = File.new("target.svg", "r+") oFile.syswrite("#{data}") # 使用反斜杠执行shell，exec 执行后，后面的代码不执行， 所以不用 our = ` java -jar batik-rasterizer.jar -m image/png -d ss.png target.svg ` // ss.png 是中间文件 # our 是shell执行的结果 iFile = File.new("ss.png", "rb") len = File.size?(iFile) content = iFile.sysread(len.to_i) // ruby 读入图片文件（rb）代码 headers({'Content-Type' => 'image/png', // header 下载图片 'Content-Disposition' => "attachment;filename=\"target.png\""}) return content // 写入图片内容end#export to doc _level:get '/doc' do # to-do headers({'Content-Type' => 'text/plain', 'Content-Description' => 'File Transfer', 'Content-Transfer-Encoding' => 'utf-8', 'Content-Disposition' => "attachment;filename=\"#{filename}.doc\"", 'Expires' => '0', 'Pragma' => 'public'}) //下载文档的 服务 return content end 三 。下载文档：
见上面代码