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


相关推荐

  • 【综合实训】图书管理系统——详细设计说明书

    【综合实训】图书管理系统——详细设计说明书文章目录1引言1.1编写目的1.2项目背景1.3定义1.4参考资料2总体设计2.1需求概述2.2软件结构3模块描述3.1模块基本信息3.2功能概述3.3算法3.4模块处理逻辑3.5接口3.6性能3.7测试计划1引言1.1编写目的  本报告的目的是对高校图书管理系统进行详细设计说明,以便用户及项目开发人员了解产品详细的设计与实现,为开发人员提供开发参考书。以下叙述将结合文字描述、伪代码,图表等来描述高校图书管理系统的详细设计和相关的模块描述。本报告的预期读者有客户、项

    2022年5月29日
    36
  • WiFi爆惊天漏洞!KRACK可攻陷所有WiFi网络

    WiFi爆惊天漏洞!KRACK可攻陷所有WiFi网络作者|MathyVanhoef编辑|江柳内容简介我们发现WPA2当中存在一项严重安全漏洞。WPA2为目前使用范围最广的Wi-Fi网络保护协议。身处攻击目标周边…

    2022年5月1日
    61
  • python3多行注释快捷键_geany注释快捷键

    python3多行注释快捷键_geany注释快捷键step1:选中需要注释/取消注释的所有代码step2:按快捷键系统快捷键Maccommand+/WindowsCtrl+/

    2022年8月15日
    3
  • Java四舍五入计算

    Java四舍五入计算java四舍五入计算。

    2022年5月11日
    28
  • 安卓_数据库泄露_安卓数据库app

    安卓_数据库泄露_安卓数据库app今天遇到系统提示数据库泄露了不过找了好久也m

    2022年9月19日
    4
  • 2021年安全生产模拟考试(全国特种作业操作证电工作业-电力电缆模拟考试题库二)安考星

    2021年安全生产模拟考试(全国特种作业操作证电工作业-电力电缆模拟考试题库二)安考星电工作业–电力电缆该模拟题库适用于全国特种作业操作证电工作业–电力电缆模拟考试题通用部分,了解更多工种完整题库信息,百度搜索【安考星】或关注“安考星”微信公众号,支持电脑及手机多端同步练习。判断题181、测温光纤全线贯通,单点损耗小于0.02dB。()√182、冷缩式终端一般用于35kV及以下交联聚乙烯绝缘电缆。()×183、电缆绝缘层的利用系数是指绝缘层中最小电场强度与最大电场强度之比。()×184、电缆终端绝缘套管进行水冲洗时,要求冲洗用水的电阻不小于1500Ωm。()√

    2022年5月7日
    103

发表回复

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

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