关于hightcharts图表导入到特定文件夹功能的实现；

最新推荐文章于 2024-05-16 10:23:10 发布
最新推荐文章于 2024-05-16 10:23:10 发布
阅读量115 收藏
点赞数
文章标签： java servlet apache
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63485605/article/details/126695604
版权

1.其实网上的很多代码都是可以使用的,如下主要原理是将highchart转变为svg可缩放矢量图形(xml格式),再由后端通过apache的batik工具包转变为图片类型;但是由于不常使用有很多坑;

@RestController
@RequestMapping("/chart")
public class ChartController {
    @PostMapping
    public void handChart(HttpServletRequest request, HttpServletResponse response) throws Exception {
        request.setCharacterEncoding("utf-8");//设置编码，解决乱码问题
        String type = request.getParameter("type");
        String svg = request.getParameter("svg");
        String filename = request.getParameter("filename");
        filename = filename == null ? "chart" : filename;
        ServletOutputStream out = response.getOutputStream();
        if (null != type && null != svg) {
            svg = svg.replaceAll(":rect", "rect");
            String ext = "";
            Transcoder t = null;
            if (type.equals("image/png")) {
                ext = "png";
                t = new PNGTranscoder();
            } else if (type.equals("image/jpeg")) {
                ext = "jpg";
                t = new JPEGTranscoder();
                t.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, 0.99f);
            } else if (type.equals("image/svg+xml"))
                ext = "svg";
            response.addHeader("Content-Disposition", "attachment; filename=" + filename + UUID.randomUUID().toString() + "." + ext);
            response.addHeader("Content-Type", type);

            if (null != t) {
                TranscoderInput input = new TranscoderInput(new StringReader(svg));
                //  FileOutputStream fileOutputStream = new FileOutputStream("d:\\a.jpg");
                TranscoderOutput output = new TranscoderOutput(out);

                try {
                    t.transcode(input, output);
                   
                } catch (TranscoderException e) {
                    out.print("Problem transcoding stream. See the web logs for more details.");
                    e.printStackTrace();
                }
            } else if (ext.equals("svg")) {
                OutputStreamWriter writer = new OutputStreamWriter(out, "UTF-8");
                writer.append(svg);
                writer.close();
            } else
                out.print("Invalid type: " + type);
        } else {
            response.addHeader("Content-Type", "text/html");
            out.println("Usage:\n\tParameter [svg]: The DOM Element to be converted." +
                    "\n\tParameter [type]: The destination MIME type for the elment to be transcoded.");
        }
        out.flush();
        out.close();
    }

 2.导入依赖:

dependency>
        <groupId>org.apache.xmlgraphics</groupId>
        <artifactId>batik-transcoder</artifactId>
        <version>1.7</version>
    </dependency>

3.前端代码(随便改的)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/highcharts-3d.js"></script>
    <script src="js/highcharts-more.js"></script>
    <script src="js/highcharts.js"></script>
    <script src="js/jquery-3.6.1.js"></script>

    <script src="js/Highcharts-10.0.0/code/modules/exporting.js"></script>

</head>
<body>
<div id="container" style="max-width:800px;height:400px"></div>
<button id="button">导出图表</button>
</body>
<script>
    $(function () {
        var chart = Highcharts.chart('container', {
            title: {
                text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
            },
            subtitle: {
                text: '数据来源：thesolarfoundation.com'
            },
            exporting: {
                enabled: false,   // 关闭导出按钮
                url: 'http://localhost:8081/chart'
            },
            yAxis: {
                plotLines: [{
                    color: 'red',           //线的颜色，定义为红色
                    dashStyle: 'solid',     //默认值，这里定义为实线
                    value: 1,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
                    width: 2                //标示线的宽度，2px
                }],
                minorGridLineColor: '#C5EEFA',
                // minorTickWidth: 1,
                minorTickLength: 0,
                minorTickInterval: 50,
                gridLineColor: '#019000',
                gridLineWidth: 1,
                gridLineDashStyle: "Dash",
                // endOnTick: false,
                // maxPadding: 0.25,
                lineColor: '#FF0000',
                lineWidth: 1,
                title: {
                    text: '就业人数'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                // line: {
                //     dataLabels: {
                //         enabled: true
                //     }
                // },
                series: {

                    marker: {
                        radius: 3,  //曲线点半径，默认是4
                        symbol: 'circle' //曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
                    },
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 2010
                }
            },
            series: [{
                name: '安装，实施人员',
                data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
            }, {
                name: '工人',
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
            }, {
                name: '销售',
                data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
            }, {
                name: '项目开发',
                data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
            }, {
                name: '其他',
                data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });
        $('#button').click(function () {
            chart.exportChart({
                type: 'image/jpeg',
                filename: 'my-pdf'
            });
        });
    });
</script>
</html>

4.前端的依赖

 5.注意前端的导出代码断改为自己项目地址,后端采用的response获取输出流进行下载的,可以修改成任意路径的输出流进行输出,这样功能基本就能实现了

6,致命bug

org.apache.batik.transcoder.TranscoderException: null
Enclosed Exception:
null
	at org.apache.batik.transcoder.image.ImageTranscoder.transcode(ImageTranscoder.java:132)
	at org.apache.batik.transcoder.XMLAbstractTranscoder.transcode(XMLAbstractTranscoder.java:142)
	at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(SVGAbstractTranscoder.java:156)
	at com.heima.createchart.ChartController.handChart(ChartController.java:62)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:498)
	at org.springframework.web.method.support.InvocableHandlerMethod.doInvoke(InvocableHandlerMethod.java:205)
	at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:150)
	at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:117)
	at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:895)
	at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:808)
	at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:87)
	at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1070)
	at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:963)
	at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1006)
	at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:909)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:681)
	at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:883)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:764)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:227)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:162)
	at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:189)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:162)
	at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:100)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:117)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:189)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:162)
	at org.springframework.web.filter.FormContentFilter.doFilterInternal(FormContentFilter.java:93)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:117)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:189)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:162)
	at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:201)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:117)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:189)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:162)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:197)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:97)
	at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:541)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:135)
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92)
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:78)
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:360)
	at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:399)
	at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65)
	at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:890)
	at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1789)
	at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
	at org.apache.tomcat.util.threads.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1191)
	at org.apache.tomcat.util.threads.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:659)
	at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
	at java.lang.Thread.run(Thread.java:748)

断点排查发现是源码中获取write时发生了空指针;醉了这咋解决;于是百度几个小时得知缺一个依赖包;

<dependency>-->
          <groupId>org.apache.xmlgraphics</groupId>
            <artifactId>batik-codec</artifactId>
           <version>1.9</version>
       </dependency>

于是顺利运行;记录一下真牛逼

糖三藏不含糖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端 Highcharts图表,如何动态传入数据
曾佳俊的博客
10-24 3981
自己写的demo,一定能显示,并且能动态传值!!!
Android图表年度最强总结，一篇文章从入门到精通！
Android_小黑
03-13 2万+
说到Android图表，不得不说一说MPAndroidChart这个强大的开源图表库，什么折线图、柱状图、饼图、气泡图、蜡烛图、混合图那是应有尽有！
刚学习vue引入highcharts，和highcharts-3d
feishataojin的博客
05-11 2094
安装 highcharts-vue npm install highcharts-vue 但是我安装时候继续安装了 npm install highcharts --save highcharts里有我需要的3d.js和其他js文件。 第一步：main里 引入全局的3d和highcharts； 第2步* 创建highcharts标签（我这是练习时随便建的vue组件） 第3步 这个我直接实现了，运行可以出图（代码是平面的图，没用3d的，不过可以替换了也能出图） 之后我觉得在vue里直接用内容太长，就创建
highcharts插件使用总结和开发中遇到的问题及解决办法
Elina_1992的专栏
11-11 1302
highcharts插件使用总结和开发中遇到的问题及解决办法： 关键词：highcharts 插件 使用 总结 开发 中 遇到 问题 解决办法 在js p中使用highchart的步骤： 第一步：引入highchart必需的js 文件<! -- jquery 的js 要在引入highchart插件的js 之前引入 --> <script src="<%=basepath%>js /high
HighCharts从数据库中读取数据
weixin_30387339的博客
12-23 720
1.index.js router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); }); router.get('/value', function(req, res, next) { var sql="select * from [dbo].[h...
word中实现图表的自动编号功能
热门推荐
哦，原来你也在这里。
01-22 3万+
工作中，经常需要对图表进行编辑和编号，有的时候会涉及图表的顺序调整、增加或删除，刚刚调整好的图表的编号就会被打乱，有的时候还会漏调，从而导致即使耗费了大量的时间，图表的序号依然会出现问题，有些得不尝失。实际上word已经为我们提供了图表统一编号的功能——题注。 一、插入题注 把光标定位在目标图片的下方（或目标表格的上方），在工具栏找到引用，点击【插入题注】按钮， ...
JS实现Echarts的图表保存为图片功能
wml00000的博客
06-09 1万+
文章目录需求分析开发准备实现思路效果图参考链接 需求分析 实际项目开发过程中经常会有图表展示功能，同时为了满足用户需要，会附带着图表导出功能，主要形式就是保存为图片。在Echarts中本身就提供这种配置项，使用起来简单方便。但是，需求分析师要求必须有一个图表导出功能按钮，以便与整体样式风格相搭，对于这种要求。。。 开发准备 通过查看Echarts网站，可以很快找到其自带的toolbox配置项，在f...
Origin：科研绘图与学术图表绘制从入门到精通
程序边界
11-14 9106
通过本文的介绍，您已经了解了如何使用Origin进行科研绘图和学术图表绘制从入门到精通的步骤和方法。持续学习和实践：Origin是一个不断更新和发展的软件，持续学习和实践是掌握它的关键。关注官方网站、社区和教程，了解新的功能和技巧，并尝试应用到实际项目中。参与社区和讨论：加入Origin的社区和讨论群体，与其他用户交流和分享经验。通过参与社区和讨论，您可以获得很多有用的建议和技巧，以及解决遇到的问题。
Echarts 实现图表自动轮播功能
Web前端工程师
11-09 5193
html部分： <div id="lunbo" style="width:480px;height:280px;"></div> js部分： var myChart = echarts.init(document.getElementById('lunbo')); var option = { // color: ['#1e33ff', '#008fff', '#552de1', '#4f1577', '#50befe', '#c95be9', '#1221b4.
Javascript 实现 Excel 导入生成图表功能
10-17
主要介绍了Javascript 实现 Excel 导入生成图表功能，本文通过实例代码讲解给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Javascript 实现 Excel 导入生成图表功能源码
11-27
愤斗的程序猿 《Javascript 实现 Excel 导入生成图表功能》 博客源码，欢迎下载，讲解详见博客。
highcharts 图表插件 纯JS实现 功能强大
12-20
highcharts 图表插件 纯JS实现 功能强大 效果挺好的
Qt实现图表功能之testChart.rar
03-05
1.QQ:513187410 2.保证无毒 3.简单,方便,实用 4.实例可以自行改用 5.如有非法,本人无法律责任,由改动代码人负责！ 6.需要更多本人作品,查找标签“朱建强” 7.请下载,杀毒后再使用！
若依项目整合eCharts实现图表统计功能
51yunOA
03-21 1万+
eCharts是一款强大的图表统计工具，具体介绍可查看其官网 http://echarts.baidu.com/echarts2/index.html 下面记录一下如何在若依项目中使用eCharts。 1、下载eCharts，地址为：http://echarts.baidu.com/download.html 此处需要选择【完整】版的，另外如果需要调试的话，可以选择【源代码】版。 ...
jdk8新特性----Lambda表达式
w_t_y_y的博客
05-11 443
Java的Lambda表达式是Java 8引入的一个特性，它支持函数式编程，允许将函数作为方法的参数或返回值，从而简化了匿名内部类的使用，并提供了对并行编程的更好支持。
jar包增量更新分析
最新发布
junlaiyan的专栏
05-16 139
借助jdeps分析出jar包的增量文件
CMS垃圾回收器为什么被移除
m0_54187478的博客
05-10 521
由于上述缺点，加上需要将资源投入到更现代垃圾回收器的开发和优化上，Oracle决定从Java 9开始标记CMS为废弃，并在后续版本中完全移除CMS。这些新的收集器旨在提供更低的停顿时间和更高的性能，同时减少配置和维护的复杂性。当它在垃圾收集周期内无法足够快地回收内存时，会退回到一种需要完全暂停所有应用线程的老年代收集模式，这与它设计的初衷相违背。：CMS使用的标记-清除算法会导致较多的内存碎片。：CMS需要更多的CPU资源来执行垃圾回收的并发阶段，而且它在运行时对系统资源的利用也较为激进。
java导出excel动态加载多sheet多复杂表头
weixin_43931108的博客
05-14 204
java导出excel动态加载多sheet多复杂表头
低代码平台通过线图表功能实现视频流大屏展示的详细过程
05-19
低代码平台通常会提供可视化建模工具，您可以在其中选择线图表组件和视频流组件，并将二者进行组合以实现视频流大屏展示的效果。 具体步骤如下： 1. 在低代码平台的可视化建模工具中添加线图表组件和视频流组件。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值