【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)
blank

相关推荐

  • 什么是多层感知机(什么是多层感知机)

    1.感知机与多层感知机1.1门与门:实现逻辑“乘”运算y=AB与门真值表ABy000010100111非门:实现逻辑非,一对一输出非门真值表Ay0110或门:实现逻辑“和”运算y=A+B或门真值表ABy00010101111…

  • CentOS安装图形界面

    CentOS安装图形界面VmwareCentOS图形界面

  • 互联网金融风控模型大全

    互联网金融风控模型大全一、市场调研目前市面主流的风控模型1、互联网金融前10名排行榜(数据截止日期2017-09-12)互联网金融公司排名分别是蚂蚁金服、陆金所、京东金融、苏宁金融、百度金融、腾讯理财通、宜信、钱大掌柜、万达金融和网易理财。1.1蚂蚁金服1.1.1大数据技术对接第三方征信公司芝麻信用分,通过用户信用历史、行为偏好、履约能力、身份特质、人脉关系五个维度对海量数据行综合的处理评估,同时也给予阿里电商交易…

  • Jquery选中的radio行变色

    Jquery选中的radio行变色

  • html中w3c标准,W3C是什么意思 W3C标准简介

    html中w3c标准,W3C是什么意思 W3C标准简介W3C是什么意思W3C标准简介发布时间:2012-10-2614:58:03作者:佚名我要评论W3C是英文WorldWideWebConsortium的缩写,中文意思是W3C理事会或万维网联盟。W3C组织是对网络标准制定的一个非赢利组织,像HTML、XHTML、CSS、XML的标准就是由W3C来定制什么是W3CW3C是英文WorldWideWebCo…

  • pycharm的配置_pycharm添加编译器

    pycharm的配置_pycharm添加编译器一、Pycharm简介与安装简介Pycharm与VScode一样,都可以作为python的可视化IDE,功能很强大,可以帮助我们提高编程的效率。包括调试、语法高亮、Project管理、代码跳转、智能提示、自动完成、单元测试、版本控制等。安装作为一个穷孩子,建议还是安装社区免费版,因为社区免费版与专业版无差别,功能是齐全的。安装地址在这里!二、Pycharm配置作为python编程的ID…

发表回复

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

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