hightchart导出图片

Jerremy

发布于 2022-05-09 14:58:03

6020

发布于 2022-05-09 14:58:03

文章被收录于专栏：Puppeteer学习Puppeteer学习

通常在使用highchart导出图片pdf等文件时，我们一般直接引入exporting.js即可

执行导出操作则会直接请求highchart服务器，执行生成图片等操作，然后下载到客户端；

但这一切的操作可执行的前提，必须用户使用的pc客户端连接到外网上，否则无法执行下载操作。

我们必须通过自定义的模式，来实现转换、生成图片pdf等操作。

查询hightchart官网，highchart官网提供了三三种服务端模式，java,php 以及phantomjs（+node），针对我们asp.net程序，如果使用上述三种，还必须依赖其他的http服务器或者即使使用IIS配置也相对麻烦，幸好有一种第三方的.net平台的一种实现：

github地址为：https://github.com/imclem/Highcharts-export-module-asp.net

这里主要记录下使用过程中遇到的一个小问题：

我对hightchart theme进行了设置：

//Highcharts.theme = {
        //    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        //    chart: {
        //        backgroundColor: {
        //            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
        //            stops: [
        //                [0, 'rgb(255, 255, 255)'],
        //                [1, 'rgb(240, 240, 255)']
        //            ]
        //        },
        //        borderWidth: 2,
        //        plotBackgroundColor: 'rgba(255, 255, 255, .9)',
        //        plotShadow: true,
        //        plotBorderWidth: 1
        //    },
        //    title: {
        //        style: {
        //            color: '#000',
        //            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
        //        }
        //    },
        //    subtitle: {
        //        style: {
        //            color: '#666666',
        //            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
        //        }
        //    },
        //    xAxis: {
        //        gridLineWidth: 1,
        //        lineColor: '#000',
        //        tickColor: '#000',
        //        labels: {
        //            style: {
        //                color: '#000',
        //                font: '11px Trebuchet MS, Verdana, sans-serif'
        //            }
        //        },
        //        title: {
        //            style: {
        //                color: '#333',
        //                fontWeight: 'bold',
        //                fontSize: '12px',
        //                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
        //            }
        //        }
        //    },
        //    yAxis: {
        //        minorTickInterval: 'auto',
        //        lineColor: '#000',
        //        lineWidth: 1,
        //        tickWidth: 1,
        //        tickColor: '#000',
        //        labels: {
        //            style: {
        //                color: '#000',
        //                font: '11px Trebuchet MS, Verdana, sans-serif'
        //            },
        //            formatter: function () {
        //                if (/^\d+$/.test(this.value)) {
        //                    return this.value;
        //                } else {
        //                    return "";
        //                }
        //            }
        //        },
        //        min: 0,
        //        title: {
        //            style: {
        //                color: '#333',
        //                fontWeight: 'bold',
        //                fontSize: '12px',
        //                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
        //            }
        //        }
        //    },
        //    legend: {
        //        itemStyle: {
        //            font: '9pt Trebuchet MS, Verdana, sans-serif',
        //            color: 'black'

        //        },
        //        itemHoverStyle: {
        //            color: '#039'
        //        },
        //        itemHiddenStyle: {
        //            color: 'gray'
        //        }
        //    },
        //    labels: {
        //        style: {
        //            color: '#99b'
        //        }
        //    },

        //    navigation: {
        //        buttonOptions: {
        //            theme: {
        //                stroke: '#CCCCCC'
        //            }
        //        }
        //    }
        //};

        //// Apply the theme
        //var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

如果对highchart theme设置比较多，那么会导致提交的xml文件过大，造成内存溢出的问题。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2015-05-12，如有侵权请联系 cloudcommunity@tencent.com 删除

github