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