【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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Oracle 11g安装报错[通俗易懂]

    Oracle 11g安装报错[通俗易懂]1.报错:[root@server1database]#./runInstaller&amp;amp;amp;gt;&amp;amp;amp;gt;&amp;amp;amp;gt;Ignoringrequiredpre-requisitefailures.Continuing…PreparingtolaunchOracleUniversalInstallerfrom/tmp/OraInstall2018-07-02_08…

    2022年7月25日
    50
  • 经典网络DenseNet介绍

    经典网络DenseNet介绍经典网络DenseNet(DenseConvolutionalNetwork)由GaoHuang等人于2017年提出,论文名为:《DenselyConnectedConvolutionalNetworks》,论文见:https://arxiv.org/pdf/1608.06993.pdfDenseNet以前馈的方式(feed-forwardfashion)将每个层与其它层连接起来。在传统卷积神经网络中,对于L层的网络具有L个连接,而在DenseNet中,会有L(L+1)/2个连接。每一层的

    2022年9月29日
    3
  • 基于JavaSpringMvc+mybatis实现学生信息管理系统「建议收藏」

    基于JavaSpringMvc+mybatis实现学生信息管理系统「建议收藏」Java经典基础毕设项目–学生信息管理系统详细设计【附源码】主要模块设计如下:使用Shiro权限管理框架,实现登录验证和登录信息的储存,根据不同的登录账户,分发权限角色,对不同页面url进行角色设置。管理员可对教师信息、学生信息、课程信息进行增删改查操作,管理员账户,可以重置非管理员账户的密码。

    2022年10月17日
    2
  • 查看Python安装路径_Python安装路径

    查看Python安装路径_Python安装路径查看Python安装路径方法在使用python的时候,有时候会需要找到python包的安装位置,怎么办?法一、对于Windows平台,打开cmd输入命令wherePython,回车(即按下Enter键)可输出Python的安装路径。参见下图:【如何清除命令行窗口内容输入cls回车】法二、在IDLE(Python自带的简洁的集成开发环境)中先输入impor…

    2022年4月19日
    69
  • arraylist的基本方法_什么是arraylist

    arraylist的基本方法_什么是arraylist简介ArrayList是java集合框架中比较常用的数据结构了。继承自AbstractList,实现了List接口。底层基于数组实现容量大小动态变化。允许null的存在。同时还实现了RandomAccess、Cloneable、Serializable接口,所以ArrayList是支持快速访问、复制、序列化的。成员变量ArrayList底层是基于数组来实现容量大小动态变化的。

    2022年10月2日
    6
  • perl文件句柄_perl文件句柄信号引用

    perl文件句柄_perl文件句柄信号引用perl哈希操作# 文件句柄,标准文件句柄有STDINSTDOUTSTDERRDATAARGVARGVOUT# 建立名字为TEXTFILE的文件句柄,<表示读文件openTEXTFILE,”<“,”a.txt”;while(<TEXTFILE>){print$_;}closeTEXTFILE;#openTEXTFILE1,”>”,”b.txt”;#>表示写文件,如果文件不存在,则会创建文件,输入文字覆盖原

    2022年10月18日
    4

发表回复

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

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