하이 차트. 오른쪽에 텍스트를 추가하고 모두 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(); 

    //... 

};