海图。在右侧添加文本并将所有内容导出为PDF

我试图在图表的右侧添加一个文本。那很好。但我想将这些文本导入到导出库生成的pdf和/或图像文件中，但现在这不起作用。这是我的密码：

有什么想法吗？我做错什么了吗？提前谢谢

---

哦，顺便说一下，我也包括了一个表，这个表很好地导出为pdf和图像文件。我只需要包含我的绿色文本。

这是由渲染器添加文本引起的，但在导出过程中，图表再次生成，没有添加“动态”内容。所以解决方案是使用渲染器在图表中加载事件。在您的情况下，它是功能drawTable

请看一个例子：

---

文本需要在加载事件中呈现，如表所示。

$(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();
});

    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();

    //...

};