zoukankan      html  css  js  c++  java
  • 【HighCharts系列教程】七、导出属性——exporting

    一、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

    五、在线演示

    六、资源下载

  • 相关阅读:
    Solution -「CF 1303G」Sum of Prefix Sums
    Solution -「SCOI 2016」萌萌哒
    赵栋 201771010137 《面向对象程序设计(java)》第一周学习总结
    PIC单片机的XC8
    10种软件滤波方法
    PIC单片机的定时器
    ASP.NET 缓存
    SqlServer索引的原理与应用
    SQL Server 游标
    SQL Server 开发指南
  • 原文地址:https://www.cnblogs.com/henuyuxiang/p/4253343.html
Copyright © 2011-2022 走看看