Question

我在使用pdf导出图表时遇到问题。请看下面的例子：

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

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

谢谢！

Answer 1

导出没有动态内容的工具使用图表，例如在回调中使用渲染器。因此，您应该在加载图表事件中使用渲染器，该事件在图表初始化期间添加图像。（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();

                    }
                }

Answer 2

这是我如何解决它：

使用google canvg 它需要一个SVG文件的URL或SVG文件的文本，用JavaScript解析它，并在Canvas元素上呈现结果。

使用

将图表svg渲染到画布

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

将画布中的内容转换为图像

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

将图像渲染到隐藏字段
```
  $("hidden field").val(img) ;
```

将此字符串转换为字节数组

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

<强>更新

获取highcharts SVG

使用chart.getSVG()方法

Highcharts API

jsFiddle Example

或只是使用$(your svg).html()

将图表导出为带图像的PDF

2 个答案: