这是我的HighCharts图表代码:
chart = new Highcharts.Chart({
chart: {
type: 'bubble',
renderTo: 'graph',
backgroundColor: 'transparent',
events: {
load: function() {
this.renderer.image(backgroundImageURL, 230, 55, 720, 720).add(); // add image(url, x, y, w, h)
}
},
height: 788
},
plotOptions: {
bubble: {
color: 'white',
marker: {
fillColor: 'transparent'
},
// minSize: 100,
// maxSize: 700,
// zMin: 0,
// zMax: 100
},
series: {
cursor: 'pointer',
point: {
events: {
mouseOver: function(event) {
$('.rankings-column').find('span').removeClass('selected');
if (!this.selected) {
$('span#' + this.id).addClass('selected');
}
var donorrank = $('span#' + this.id).attr('id');
$report.html(donorrank + '. ' + this.name + ' <span>' + this.score + '%</span>');
$report.addClass('active');
},
mouseOut: function(event) {
$('.rankings-column span').each(function() {
$(this).removeClass('selected');
});
$report.removeClass('active');
$report.html('Donor Scoring');
},
click: function(event) {
if (!this.selected) {
window.open(this.url, '_self');
}
},
}
}
}
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
yAxis: {
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
title: {
text: ''
},
min: 0
,max: 100
},
xAxis: {
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
offset: 0,
margin: 0
},
legend: {
enabled: false
},
series: [{
data: dataForChart
}]
});
backgroundImageURL是从显示图表的PHP页面传递的JS var。
这是在Worpress。以下是PHP:
$styleSheetURI = get_stylesheet_directory_uri();
$backgroundImageURL = $styleSheetURI.'/img/ATI-graphs-main.png';
以下是我将其转换为JS var:
的方法<script type="text/javascript">
jQuery(document).ready(function($){
backgroundImageURL = <?php print(json_encode($backgroundImageURL)); ?>;
});
</script>
这是php echo:
http://www.thewebsite.org/wp-content/themes/ati/img/ATI-graphs-main.png
它从JS </ p>提醒完全相同
导出有效,但不包含图像。
有什么想法吗?
由于
雅克