Highcharts导出背景图像与图表?

时间:2014-09-28 11:17:23

标签: javascript php jquery highcharts

这是我的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>提醒完全相同

导出有效,但不包含图像。

有什么想法吗?

由于

雅克

0 个答案:

没有答案