我正在尝试导出包含径向填充的饼图(通过export.highcharts.com)。我可以使图表正确显示在屏幕上,但是在导出时,图表不保留径向填充,导出的图表包含纯色。 Highcharts导出服务器是否具有此功能,或者我是否缺少明显的功能?
var exportUrl = 'http://export.highcharts.com/';
var colors = Highcharts.getOptions().colors;
$.each(colors, function(i, color) {
colors[i] = {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
var optionsStr = JSON.stringify({
chart: {
type: 'pie'
},
title: {
style: {
fontFamily: 'Varela Round',
fontSize: '24px'
},
text: 'Dashboard Logon Activity by User'
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
plotOptions: {
pie: {
//center: [960, 450],
size: 200,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
fontFamily: 'Varela Round',
fontSize: '10px'
},
connectorColor: 'silver'
}
}
},
series: [{
name: 'logons',
data: [{
"name": "User 1",
"y": 19
}, {
"name": "User 2",
"y": 16
}, {
"name": "User 3",
"y": 22
}, {
"name": "User 4",
"y": 8
}, {
"name": "User 5",
"y": 31
}, {
"name": "User 6",
"y": 17
}],
color: colors
}]
}),
globalOptions = JSON.stringify({
lang: {
thousandsSep: ','
}
}),
dataString = encodeURI('async=true&type=jpeg&width=1200&options=' + optionsStr + '&globalOptions=' + globalOptions);
$.ajax({
type: 'POST',
data: dataString,
url: exportUrl,
success: function(data) {
//console.log('get the file from http://export.highcharts.com/: ', data);
//$('#container').html('<img src="' + exportUrl + data + '"/>');
var imageurl = exportUrl + data;
console.log(imageurl);
},
error: function(err) {
debugger;
console.log('error', err.statusText)
}
});
应用程序的辐射输出:
导出的图像具有扁平填充: