利用Highcharts创建SVG图片并转为PNG（前端页面）

这里的svg图片是在highcharts里面生成的，并且利用highcharts中的getSvg()函数获得svg图片的字符串。
将svg字符串转化成png的时候用到了batik里面的transcoder的jar包。
网上下载的jar包一定要解压看看里面是个啥东西……我最开始的错误就是因为jar包里面居然是个exe文件，肯定没有用的啊……报错是肯定的……

---

那首先是前端的页面

首先肯定事先要引入jquery和highcharts的js文件，一定要注意先后顺序！！！

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>

然后创建包含svg图片的表单

<form action="Svg2Png" method="post"> 
    <div id="container">
        <!--js代码将在这里实现highcharts的创建-->
    </div>
    <div>
        <button id="btn_svg" >转换为SVG字符串</button>
    </div>
    <!--
        这里最开始的思路是获取的的svg字符串传入textarea然后通过表单发送到后台
        最后还是用了AJAX
        <textarea name="svg" id="svg" ></textarea>
    -->
</form>

接下来是js代码，主要是两个部分
1. 利用highcharts创建Svg图片，这里直接用highcharts的例子了

        var chart = Highcharts.chart('container', {
             credits: {
                 enabled: false
             },
            xAxis: {
                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }]
        }); 

2.通过点击按钮将获取到的svg字符串通过ajax传入后台

    $('#btn_svg').click(function(){

            var Svg = chart.getSVG();//.replace(/</g, '\n<').replace(/>/g, '>');

            $.ajax({
                type: "post",
                ContentType: "application/json; charset=utf-8",
                url:"",
                dataType: "json",
                data:{
                    svg: Svg
                },
                success:function(){
                    //这里是想实现传入数据后页面跳转
                    document.location="";
                }
            }); 
            //document.getElementById('svg').innerHTML=svg;
            alert(Svg);
        }); 

---

前端的代码到这里就大概完成啦！内容主要是创建svg图片，获取svg字符串两个大部分。

那今天就先睡了…….
最近有点透支了……