【HighCharts系列教程】七、导出属性——exporting

【HighCharts系列教程】七、导出属性——exporting一、exporting属性说明默认情况下,HighCharts支持将图表导出为图片或打印功能的。也就是在图表的右上角有两个按钮。打击即可进行相应的操作。实现导出和打印功能需要引入相应的js文件,也就是

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

一、exporting属性说明

默认情况下,HighCharts支持将图表导出为图片或打印功能的。也就是在图表的右上角有两个按钮。打击即可进行相应的操作。

实现导出和打印功能需要引入相应的js文件,也就是exporting.js(该文件存在于highCharts压缩包的/js/modules目录下)。

一般情况下,我们基本用不上该功能(不引入exporting.js即可去掉该功能),即使是使用该功能,也不用配置,默认的配置就可以。

二、exporting属性详解

 

参数 说明 默认值

buttons:{

    exportButton:{…},

    printButton:{…}

}

按钮属性,包括导出按钮(exportButton)及打印按钮(printButton)。

可配置相应按钮中具体的属性来改变按钮的大小、样式等

 
enabled 是否使用该功能,当我false时,则图表没有导出及打印功能 true
filename 导出图片文件的文件名,不包含后缀 chart
type 导出图的类型,有image/png, image/jpeg, application/pdf可选 image/png.
url 导出功能的服务器地址,导出功能需要相应的服务提供支持。你可以自己搭建服务器,在/exporting-server目录下有相应的源文件 http://export.highcharts.com
width 导出图片文件的宽度,相应的,高度这按照比例 800.0

 

三、实例说明

 

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(function () { var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', }, credits : { enabled:false//不显示highCharts版权信息 }, exporting: { //enabled:true,默认为可用,当设置为false时,图表的打印及导出功能失效 buttons:{ //配置按钮选项 printButton:{ //配置打印按钮 width:50, symbolSize:20, borderWidth:2, borderRadius:0, hoverBorderColor:'red', height:30, symbolX:25, symbolY:15, x:-200, y:20 }, exportButton:{ //配置导出按钮 width:50, symbolSize:20, borderWidth:2, borderRadius:0, hoverBorderColor:'red', height:30, symbolX:25, symbolY:15, x:-150, y:20 }, }, filename:'52wulian.org',//导出的文件名 type:'image/png',//导出的文件类型 width:800 //导出的文件宽度 }, xAxis: { categories: ['2011-11','2011-12','2012-01','2012-02','2012-03'] }, series: [{ name: 'series1', data: [2,4,5,9,2] },{ name:'series2', data:[3,5,7,2,1] }] }); }); }); </script> </head> <body> <script src="js/highcharts.js"></script> <script src="js/exporting.js"></script> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html>

四、效果截图

highcharts_2_5_exporting

五、在线演示

六、资源下载

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/167038.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 原创:Qt在Windows下的三种编程环境搭建

    原创:Qt在Windows下的三种编程环境搭建尊重作者,支持原创,如需转载,请附上原地址:http://blog.csdn.net/libaineu2004/article/details/17363165从QT官网可以得知其支持的平台、编译器和调试器的信息如图所示:http://qt-project.org/doc/qtcreator-3.0/creator-debugger-engines.html(Home|D…

    2022年5月2日
  • linux 压缩成bz2,linux 将文件压缩成bz2格式 命令:bzip2

    linux 压缩成bz2,linux 将文件压缩成bz2格式 命令:bzip2bzip2命令用于创建和管理(包括解压缩)“.bz2”格式的压缩包。我们遇见Linux压缩打包方法有很多种,以下讲解了Linux压缩打包方法中的Linuxbzip2命令的多种范例供大家查看,相信大家看完后会有很多收获。语法bzip2(选项)(参数)选项-c或——stdout:将压缩与解压缩的结果送到标准输出;-d或——decompress:执行解压缩;-f或-force:bzip2在…

    2022年5月4日
  • activity中onResume方法详解[通俗易懂]

    activity中onResume方法详解[通俗易懂]onResume比如做一个音乐播放程序,在播放过程中,突然有电话打进来了,这时系统自动调出电话,而你的音乐播放程序置于后台,触发了onPause方法。当你电话结束后,关闭电话,又自动回到音乐播放程序,此时,触发onResume方法,这时,如果你之前在onPause的时候记录了播放点,就可以在onResume方法里来继续播放。onResume方法是Activity第一次创建时重新加载实例时调用…

    2022年5月6日
  • 移动机械硬盘测试软件,硬盘检测工具HDTune使用教程

    移动机械硬盘测试软件,硬盘检测工具HDTune使用教程硬盘是我们计算机的重要部件之一,硬盘故障直接导致我们无法正常使用,读取数据等,而硬盘检测工具也有不少。HDTune是一款专业的硬盘检测工具,能够全面的检测硬盘的传输速度、温度以及健康状况等。很多用户可能并不知道HDTune怎么用,对此,小编特意去整理了一篇使用教程,分享出来给大家介绍HDTune怎么用。硬盘检测工具HDTune怎么用?1、HDTune使用方法很简单,打开HDTune硬盘检测工具后我…

    2022年7月13日
  • ssm框架过时了吗_spring实战

    ssm框架过时了吗_spring实战SpringSpring是一个开源的免费的框架Spring是一个轻量级的,非入侵式的框架控制反转(IOC),面向切面编程(AOP)支持事务的处理,对框架整合的支持IOC理论UserDaoUserDaoImpUserSeviceUserServiceImp在之前,用户的需求可能会影响原来的代码。使用一个set。public void setUserDao(UserDao userDao){ this.userDao = userDao;}之前是主动创建对象,控制

    2022年8月9日
  • python移动应用开发_python做手机app

    python移动应用开发_python做手机app广告关闭腾讯云11.11云上盛惠,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元!解压后依次执行以下命令安装sdk。$cdtencentcloud-sdk-python$pythonsetup.pyinstall示例代码说明:所有示例代码仅作参考,无法直接编译和运行…13711112222为手机号,最多不要超过200个手机号req.pho…

    2022年8月12日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号