highcharts教程：调用Excel.Application实现图表数据导出至EXCEL

最新推荐文章于 2023-03-17 11:51:10 发布

weixin_34107739

最新推荐文章于 2023-03-17 11:51:10 发布

阅读量265

点赞数 1

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/1428868/blog/265591

版权

2019独角兽企业重金招聘Python工程师标准>>>

highcharts教程之highcharts线性图结合浏览器调用Excel.Application完美实现图表数据导出至Excel。

highcharts图表数据的保存我们知道的有很多种，最常见的是以下3种：

1、导出成为图片文件：jpg、png等；

2、导出成为pdf文件；

3、将其数据保存成文文本信息；

今天我们将重点介绍另外一种比较简单和直接的图表数据导出方法，那就是结合浏览器调用其内部固有的Excel的ActiveX插件，实现highcharts图表数据导出至Excel。

我其实也只是结合了以上两者实现了将其highcharts图表数据导出至Excel的，具体示例请见下列完整代码：

<!DOCTYPE HTML5>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>将Highcharts线性图表数据导出至Excel内</title>
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        var chart = null;
        $(function () {
            $('#divChart').highcharts({
                chart: {
                    plotBorderWidth: 1
                },
                title: {
                    text:"highcharts 导出至 Excel示例"
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                credits: {
                    enabled: false   //右下角不显示LOGO
                },
                series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }, {
                    data: [23, 45.5, 78.4, 89.2, 100.0, 135.0, 76.6, 32.5, 22.4, 67.1, 60.6, 123]
                }]
            });
        });

        ///将highcharts线性图表数据导出至Excel内
        function ExportToExcel() {
            //获取chart对象
            chart = $('#divChart').highcharts();
            //获取chart的横坐标x轴上的刻度集合
            var categoriesObj = chart.xAxis[0].categories;
            //获取chart的series对象集合
            var seriesObj = chart.series;
            //创建AX对象excel
            var oXL = new ActiveXObject("Excel.Application");
            //获取workbook对象 
            var oWB = oXL.Workbooks.Add();
            //激活当前sheet
            var oSheet = oWB.ActiveSheet; 
            //设置工作薄名称
            oSheet.name = chart.options.title.text;
            //设置表头
            //设置series一栏
            oSheet.Cells(1, 1).value = "Series名称";
            //设置x横坐标标签作为表头
            for (var i = 0; i < categoriesObj.length; i++) {
                oSheet.Cells(1, i + 2).value = categoriesObj[i];
            }
            //设置内容部分
            for (var i = 0; i < seriesObj.length; i++) {
                //动态设置第一列的series名称
                oSheet.Cells(i + 2, 1).value = seriesObj[i].name;
                //动态获取每一sereis 每一个点y轴上的数据值                
                for (var j = 0; j < categoriesObj.length; j++) {
                    oSheet.Cells(i + 2, j + 2).value = seriesObj[i].yData[j];
                }
            }
            oXL.Visible = true; //设置excel可见属性
        }        
		</script>
</head>
<body>
    <script type="text/javascript" language="javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" language="javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
    <div id="divChart" style="width: 500px; height: 400px; margin: 0 auto">
    </div>
    <div style="margin-top: 15px; text-align: center; width: 100%;">
        <input type="button" id="btnReport" value="导出Excel" onclick="ExportToExcel()" />
    </div>
</body>
</html>

效果图如下所示：

chart图表展示效果图