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

ajax+定时器setTimeout/setInterval将mychart.getDataURL("jpeg")得到的数据发到动态页保存起来就行了

虽然过去了这么久,我还是想问楼主解决这个问题了吗?
楼上的回答完全不对,需要的纯后台不通过浏览器获取base64码
用htmlunit去解析获取的base64码与主流浏览器获取的不一样,并不准确
应该是留住的问题的2导致的