【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

五、在线演示

六、资源下载

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Android 画廊 重叠(gallery是什么)

    mainActiviypackagecom.example.mygallary;importandroid.app.Activity;importandroid.content.Context;importandroid.content.res.TypedArray;importandroid.os.Bundle;importandroid.view.Menu;imp

  • 我的手机软件

    我的手机软件总结一下现在我装的软件,这些我都有安装版,兄弟们可以复用:)我的手机:Nokia6680操作系统:Symbian60Ⅲ目前手机上装的:6630EditableQuickOffice2.sisoffice套件,实际用的很少。6681字典字库.SIS字典,有用。ACM超级来电管家来电管家,当然有用啦,防火墙,自动短信回复…

  • oracle级plsql安装教程,PLSQL 数据下载库安装使用教程,步骤解析

    oracle级plsql安装教程,PLSQL 数据下载库安装使用教程,步骤解析安装Oracle数据库一、首先安装Oracle数据库*64。二、下载并安装安装PLSQLDeveloper根据计算机的系统位数,从下载的安装包中选择合适的程序,双击“运行”以打开下一个PLSQL软件安装向导。四、根据协议,选中“我接受…”选项,然后单击以下内容。五、选择默认情况下安装在C盘目录中的安装位置,单击“更改”按钮自定义软件安装路径,确认后单击“下一步”。选择安装方式,标准(程序设置…

  • 解析ASP.NET WebForm和Mvc开发的区别

    解析ASP.NET WebForm和Mvc开发的区别

  • 数字电路实验 01 – | TTL门电路的逻辑功能测试「建议收藏」

    数字电路实验 01 – | TTL门电路的逻辑功能测试「建议收藏」一、实验目的和任务测试TTL集成芯片中的与门、或门、非门、与非门、或非门与异或门的逻辑功能。 了解测试的方法与测试的原理。二、实验原理介绍实验中用到的基本门电路的符号为:在测试芯片逻辑功能时输入端用逻辑电平输出单元输入高低电平,然后使用逻辑电平显示单元显示输出的逻辑功能。三、实验数据、计算及分析…

  • TensorFlow|基于深度学习的人脸表情识别系统

    更新(2019-4-12)上传了模型权重和模型结构,因GItHub不支持25MB以上的文件,因此上传在此处,如果急用可以在此下载,也是作为对我工作的一些支持地址:https://download.csdn.net/download/shillyshally/11110754如果不急用可以在下方留下邮箱,我在看博客的时候会回复,但会有一段时间的延迟更新(2019-1-1)增加了r…

发表回复

您的电子邮箱地址不会被公开。

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