jquery - 将图表导出为带有图像的 PDF

Question

我在以 pdf 格式导出图表时遇到问题。看下面的例子：

http://jsfiddle.net/adrianCC/MLasL/28/

    var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    width: 600,
                    height: 90,
                    borderColor: '#000000',
                    borderWidth: 0,
                    type: 'line',
                    spacingLeft: 175 
                },
...

图表应导出嵌入图像，但图像不会导出为 pdf。我正在使用 ASP。有什么问题？

谢谢！

Answer 1

here is how i solve it :

• use google canvg It takes a URL to a SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element.

• render your chart svg to the canvas using

   canvg(document.getElementById('canvas'),getSVG());
  

• convert what you have in the canvas to image

    var canvas = document.getElementById("canvas") ; 
    var img = canvas.toDataURL("image/png"); //img is data:image/png;base64
     img = img.replace('data:image/png;base64,', '');
  

• render your image to a hidden field

    $("hidden field").val(img) ;
  

• to convert this string to byte array do

   Dim imageFile() As Byte = Convert.FromBase64String(YOUR HIDDEN FIELD .Value)
  

UPDATE

get the highcharts SVG

• use the chart.getSVG() method

Highcharts API

jsFiddle Example

• or simply use $(your svg).html()

Answer 2

导出工具使用不带动态内容的图表，例如在回调中使用渲染器。所以你应该在加载图表事件中使用渲染器，在图表初始化期间添加你的图像。（http://api.highcharts.com/highcharts#chart.events.load）

看看例子：http: //jsfiddle.net/MLasL/38/

events:{
                    load:function(){
                     this.renderer.image('http://87.106.176.87/Carel/Content/images/logo.jpg', 1, 1, 150, 50).add();

                    }
                }