highcharts报表插件之expoting参数的使用

最新推荐文章于 2024-08-06 17:14:41 发布

天使小宝

最新推荐文章于 2024-08-06 17:14:41 发布

阅读量1.2w

点赞数

分类专栏： jQuery 文章标签： highchart expoting

本文链接：https://blog.csdn.net/myjlvzlp/article/details/8531275

版权

本文详细介绍了Highcharts报表插件的exporting参数配置，包括打印和导出按钮的样式设置，如按钮颜色、大小、位置等，以及enabled、filename、type、url和width等属性的用法，帮助理解如何自定义报表的导出和打印功能。

摘要由CSDN通过智能技术生成

exporting 参数配置

说明：导出及打印选项

打印导出功能的配置项。

1、buttons:打印和导出按钮设置。其中两个按钮中又有很多样式的设置，具体如下：

(1)exportButton:导出按钮样式

(11)hoverSymbolFill:鼠标移上去改变按钮箭头的颜色，String型，默认值为#768F3E.

(12)onclick:点击报表导出按钮事件一般和menuItems同时使用。

(13)menuItems:点击导出按钮的时候出现的下拉列表的设置选项，一般和onclick同时使用，Array类型。

实例1如下：

      exporting : {
              enabled : true,
              buttons : {
                     exportButton : {
                            menuItems: null,
                            onclick: function(){
                                   this.exportChart();
                            }
                     },
                     printButton: {
                            enabled : false
                     }
              }
       }

点击时就不会出现下拉框了，而是直接导出报表图片。

实例2如下：

       exporting : {
              enabled : true,
              buttons : {
                     exportButton : {
                            menuItems: [{
                                   text: '导出PNG图片(宽度为250px)',
                                   onclick:function() {
                                          this.exportChart({
                                                 width:200 //导出报表的宽度
                                          });
                                   }
                            }, {
                                   text: '导出PNG图片(宽度为800px)',
                                   onclick:function() {
                                          this.exportChart();// 800px by default
                                   }
                            },
                            null,
                            null
                            ]
                     },
                     printButton: {
                            enabled : false
                     }
              }
       }

点击时出现自己设置的下拉标题以及导出图片的大小。</