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

    五、在线演示

    六、资源下载

  • 相关阅读:
    iaas,paas,saas理解
    July 06th. 2018, Week 27th. Friday
    July 05th. 2018, Week 27th. Thursday
    July 04th. 2018, Week 27th. Wednesday
    July 03rd. 2018, Week 27th. Tuesday
    July 02nd. 2018, Week 27th. Monday
    July 01st. 2018, Week 27th. Sunday
    June 30th. 2018, Week 26th. Saturday
    June 29th. 2018, Week 26th. Friday
    June 28th. 2018, Week 26th. Thursday
  • 原文地址:https://www.cnblogs.com/henuyuxiang/p/4253343.html
Copyright © 2011-2022 走看看