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


相关推荐

  • python计算最大公约数和最小公倍数_python求最大公约数和最小公倍数的方法介绍…

    python计算最大公约数和最小公倍数_python求最大公约数和最小公倍数的方法介绍…python求最大公约数和最小公倍数的方法介绍发布时间:2020-04-2810:42:38来源:亿速云阅读:114作者:小新今天小编给大家分享的是python求最大公约数和最小公倍数的方法介绍,相信很多人都不太了解,为了让大家更加了解python求最大公约数和最小公倍数的方法,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。python怎么求最大公约数和最小公倍数一、求最大公约数用…

    2022年5月16日
    38
  • AOSP>设计>测试>(第三节)兼容性测试套件CTS[通俗易懂]

    AOSP>设计>测试>(第三节)兼容性测试套件CTS[通俗易懂]AOSP>设计>测试>兼容性测试套件CTS第三节兼容性测试套件(CTS)概览新变化测试开发工作流设置CTS运行CTS命令控制台免安装应用运行CTS验证程序相机测试安全元件解读结果CTS开发下载版本说明第三节兼容性测试套件(CTS)概览本内容面向Android平台开发者。在了解如何在Android平台上进行测试之前,请参阅Android平台架构,大致了解相关的信息。另请注意,您可以使用特定于安全性的测试机制检测设备上的漏洞以及加强设备抵御漏洞的能力。新变化

    2022年8月30日
    0
  • PMOS开关电路_大功率mos管开关电路

    PMOS开关电路_大功率mos管开关电路本次项目上需要实现的功能是利用AO3401PMOS设计一个开关电路,实现一款设备的开关控制。被控设备12V供电,供电电流小于3A即可。且为了提高响应速度,使流过该设备的电流尽可能的大。该设备内阻大约为6ohm。AO3401产品参数其他参数芯片内部等效电路引脚顺序设计电路设计并调试好的电路如下图所示,由于供电电压和驱动电压均可以使用12V,所以采用了如下较为简单的方案。如图所示,Q9AO3401的栅极(G)通过100k电阻上拉到12V,源级(S)直…

    2022年9月20日
    0
  • Canny边缘检测及C++实现「建议收藏」

    Canny边缘检测及C++实现「建议收藏」Canny边缘检测算法是澳大利亚科学家JohnF.Canny在1986年提出来的,不得不提一下的是当年JohnCanny本人才28岁!到今天已经30年过去了,Canny算法仍然是图像边缘检测算法中最经典有效的算法之一。一起睹一下大家芳容:JohnCanny研究了最优边缘检测方法所需的特性,给出了评价边缘检测性能优劣的3个指标:1 好的信噪比,即将非边缘点判定为

    2022年5月30日
    34
  • ExtJs自学教程(1):一切从API開始

    ExtJs自学教程(1):一切从API開始

    2021年12月3日
    31
  • 喜欢井宝的七大理由

    喜欢井宝的七大理由

    2021年7月25日
    51

发表回复

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

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