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

基于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

你可能感兴趣的:(Web综合)