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

来源：互联网发布：java集合框架容器编辑：程序博客网时间：2024/06/03 17:05

这里的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字符串两个大部分。

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

0 0