基于JS渲染的图表如何自动在后台保存

RiboseYim 发布于 2015/04/09 13:18
阅读 756
收藏 0

基于javascript库的HTML统计图表,优点:丰富的第三方开源库,图形美观、种类齐全、灵活、编程简洁。

一般应用方式:前端HTML显示,需要打开浏览器加载、渲染。

画图和保存分离了,原来可能画图都是java做的,现在图是HTML画的,网页展示还保留。

但是增加一个后台(比如JAVA、Perl等)定时保存功能

example.html

        <html>

            <head>

                <script>......jquery./第三方js库......</script>

               <css>.............</css>

               <script>

                    //渲染方式通常是

                      var mychart=chartObj.init("divid",'themestyle');

               //保存图片方式也很简单, 初始化后的变量getDataURL("jpeg")可以获得BASE64编码的字符串

               //将该字符串输出为图片即可,此处不赘述。

               var myChartData=mychart.getDataURL("jpeg");

               </script>

            </head>

        </html>

尝试的方案:

1.有人点击的图表,渲染完成后在js加一段代码,异步生成一张图。

     不适合规模应用,耦合,影响网页正常的访问速度,而且更多的情况是该图表不会有人点,或点的时间不是需要保存的时刻。

2.java HtmlUnit 模拟浏览器终端行为

HtmlPage page = (HtmlPage) webClient.getPage(url); 

HtmlAnchor obj=(HtmlAnchor) page.getElementById("btnSaveImage");

obj.click();

问题1:性能差。它每次会分析html所有引入js,失败率高

 TypeError: Cannot find function click in object [object]. (http://127.0.0.1:8082/echarts/huanan/nos/adsl/asset/jquery.min.js#4)

问题2:似乎不能模拟网页完全渲染以后再调用某个js function

org.mozilla.javascript.EcmaError: TypeError: Cannot call method "getDataURL" of undefined






加载中
0
RiboseYim
RiboseYim

js+ajax方案:

function saveTrackBarImage(){

var myTrackBarChartData=myTrackBarChart.getDataURL("jpeg");

var url = "AdslServ-charts-service.jsp";

$.ajax({

         type:"POST",

         url:url,

         data:{

         methodName:"saveAdslServBar",

         imageName:"AdslServ-bar.jpeg",

         imageData:myTrackBarChartData,

         rand:Math.random()

        },

         datatype: "text",             

         success:function(data){    

        // alert("success data:"+data);

          } 

      });

}

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部