【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)
上一篇 2022年8月5日 下午9:36
下一篇 2022年8月5日 下午9:36


相关推荐

  • UIWebView OC与JS交互那些事

    UIWebView OC与JS交互那些事UIWebView 基础 1 UIWebView 与 WKWebView 基本使用 https blog csdn net article details UIWebView 与 JS 交互本人使用的是原生的 JavaScriptCo 库或者第三方 WebViewJavas 第三方 WebViewJavas

    2025年7月21日
    7
  • es6之数组的flat(),flatMap()「建议收藏」

    es6之数组的flat(),flatMap()「建议收藏」数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维数组。该方法返回一个新数组,对原数据没有影响。[1,2,[3,4]].flat()//[1,2,3,4]上面代码中,原数组的成员里面有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置。flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将f…

    2022年5月30日
    80
  • 基于stm32的智能小车(远程控制、避障、循迹)

    基于stm32的智能小车(远程控制、避障、循迹)学完stm32,总是想做点东西“大显身手”一下,智能小车就成了首选项目,其核心只是就是PWM输出,I/O口引脚电平判断。制作智能小车的硬件名单:制作智能小车的硬件列表: (1)STM32C8T6核心板 一块 (2)L298N电机驱动 两个 (3)2.4G无线通讯模块 一个 (4)红外壁障模块 两个 (5)红外循迹模块 两个 (6)电源转换模块 一个 (7)18650供电电池

    2022年10月17日
    4
  • ELK 收集 Tomcat 日志「建议收藏」

    ELK 收集 Tomcat 日志「建议收藏」01Tomcat安装与测试1.1安装Tomcat安装Tomcat的本体和相关官方测试demo,参考链接apt-getinstalltomcat8-y#安装Tomcat本体apt-getinstalltomcat8-docstomcat8-examplestomcat8-admin-y#安装测试demo1.2Tomcat启动检查systemctlstarttomcat8#启动Tomcatsystemctlstatustomcat8netstat

    2022年6月20日
    28
  • python实现 最短路径算法

    python实现 最短路径算法一、Floyd-Warshall算法1.算法简介Floyd-Warshall算法是解决任意两点间的最短路径的一种算法。通常可以在任何图中使用,包括有向图、带负权边的图。存储方式采用邻接矩阵2.示例0 1 2 6 3 1 0 3 5 2 2 3 0 8 5 6 5 8 0 …

    2022年6月3日
    39
  • 数据挖掘——关联规则挖掘

    数据挖掘——关联规则挖掘《数据挖掘》国防科技大学《数据挖掘》青岛大学数据挖掘之关联规则挖掘关联规则挖掘(AssociationRuleMining)最早是由Agrawal等人提出。最初的动机是解决购物篮分析(BasketAnalysis)问题,目的是发现交易数据库(TransactionDatabase)中不同商品之间的联系规则。定义关联规则是描述在一个交易中物品之间同时出现的规律的知识模式,更确切的说,关联规则是通过量化的数字描述物品X的出现对物品Y的出现有多大的影响。关联分析associationana

    2022年7月17日
    19

发表回复

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

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