通常在使用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文件过大,造成内存溢出的问题。