pdf - Highcharts 。在右侧添加文本并全部导出为 PDF

Question

我正在尝试向图表右侧添加文本。效果很好。但我想将该文本导入到由导出库生成的 pdf 和/或图像文件中，但现在这不起作用。这是我的代码:http://jsfiddle.net/mrocha/TQ54c/

$(function () {

    /**
     * Create the data table
     */

    Highcharts.drawTable = function() {

        // user options
        var tableTop = 420,
            colWidth = 60,
            tableLeft = 20,
            rowHeight = 20,
            cellPadding = 2.5,
            valueDecimals = 1,
            valueSuffix = ' C';

        // internal variables
        var chart = this,
            series = chart.series,
            renderer = chart.renderer,
            cellLeft = tableLeft;

        // draw category labels
        $.each(series, function(serie_index, serie) {
            renderer.text(
                serie.name, 
                cellLeft + cellPadding, 
                tableTop + (serie_index + 2) * rowHeight - cellPadding
            )
            .css({
                fontWeight: 'bold'
            })       
            .add();
        });

        $.each(chart.xAxis[0].categories, function(category_index, category) {
            cellLeft += colWidth;

            // Apply the cell text
            renderer.text(
                    category,
                    cellLeft - cellPadding + colWidth, 
                    tableTop + rowHeight - cellPadding
                )
                .attr({
                    align: 'right'
                })
                .css({
                    fontWeight: 'bold'
                })
                .add();

            $.each(series, function(i) {


                renderer.text(
                        Highcharts.numberFormat(series[i].data[category_index].y, valueDecimals) + valueSuffix, 
                        cellLeft + colWidth - cellPadding, 
                        tableTop + (i + 2) * rowHeight - cellPadding
                    )
                    .attr({
                        align: 'right'
                    })
                    .add();

            });



        });


    }

    /**
     * Draw a single line in the table
     */
    Highcharts.tableLine = function (renderer, x1, y1, x2, y2) {
        renderer.path(['M', x1, y1, 'L', x2, y2])
            .attr({
                'stroke': 'silver',
                'stroke-width': 1
            })
            .add();
    };

    /**
     * Create the chart
     */
     window.chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            events: {
                load: Highcharts.drawTable
            },
            height: 600,
            width: 800,
            marginBottom: 250
        },

        title: {
            text: 'Average monthly temperatures'
        },


        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        yAxis: {
            title: {
                text: 'Temperature (C)'
            }
        },

        legend: {
            y: -170
        },

        series: [{
             name: 'Tokyo',
             data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
          }, {
             name: 'New York',
             data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
          }, {
             name: 'Berlin',
             data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
          }, {
             name: 'London',
             data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
          }]
    });


    chart.renderer.text('This text should be at the right side of the chart.  And should be exported into pdf or image file',
            680, 80 ).
        css({
          width: 100,
          color: 'green',
          textAlign: 'left'
        }).attr({
        zIndex: 999
    }).add();
});

有什么想法吗？难道我做错了什么？提前致谢!

哦，顺便说一下，我还包含了一个表格，并且该表格可以很好地导出为 pdf 和图像文件。我只需要包含我的绿色文本。

Answer 1

这是因为您通过渲染器添加文本，但在导出过程中再次生成图表而没有您添加的“动态”内容。因此，解决方案是使用渲染器在图表中加载事件。在你的例子中，它是函数drawTable。

看一下例子:

http://jsfiddle.net/mrocha/TQ54c/

    Highcharts.drawTable = function() {

        //custom text
        this.renderer.text('This text should be at the right side of the chart.  And should be exported into pdf or image file',
            680, 80 ).
        css({
          width: 100,
          color: 'green',
          textAlign: 'left'
        }).attr({
        zIndex: 999
    }).add();

    //...

};