hightchart导出图片

2022-05-09 14:58:03 浏览数 (1)

通常在使用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进行了设置:

代码语言:javascript复制
//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文件过大,造成内存溢出的问题。

0 人点赞