2013-04-30 88 views
0

我有这样的图表:打印highchart显示数据全部点

http://jsfiddle.net/ECAM9/1/

,它工作正常。

然而,当我打印或导出它,我想要的结果图像或PDF文件,看起来像这样:

http://jsfiddle.net/rFzTG/

这意味着,我希望每一个点都在它的信息。

我一直在寻找这样的回答:

Highcharts add legend on export

我尝试添加此:

exporting:{ 
      chartOptions:{ 
       scatter: { 
        dataLabels: { 
         enabled: true, 
         formatter: function() { 
          return this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C'; 
         } 
        }, 
       } 
      } 
     }, 

但同样,JPG文件我打印是没有的信息。

+0

@SebastianBochan你可以检查一下吗? – 2013-04-30 13:51:24

回答

1

一种方式:

1)使用 'useHTML' 在图表加载事件的datalabels

2),隐藏datalabel元件

图表将显示不datalabels,因为你把它们藏,但datalabels打印,因为图表是与他们

http://jsfiddle.net/jlbriggs/Z7csw/

dataLabels: { 
    enabled: true, 
    useHTML:true, 
    formatter: function() { 
    return '<div class="datalabel">' +this.series.name +'</b><br/>'+ 
      this.x +': '+ this.y +'°C</div>'; 
    } 
}, 
创建

events:{ 
    load:function() { 
    $('.datalabel').hide(); 
    } 
} 

编辑: - > 好吧,我有一个简单的例子,与印刷在这里工作的基础上,下面的评论:

http://jsfiddle.net/jlbriggs/Z7csw/6/

它并不完美,但它确实工作...

+0

这工作,TNX!但它只适用于出口。如何使它在印刷品上工作呢? – 2013-05-02 11:44:13

+0

嗯...不知道,我认为这对两者都有效:/可能需要使用外部控制...您可以捕获按钮单击,启用数据标签,打印图表和隐藏数据标签...? – jlbriggs 2013-05-03 17:04:51

+0

寻找这里:http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/exporting/buttons-contextbutton-menuitems/和在这里:http ://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/chart-print/它看起来像是一个可行的选择 – jlbriggs 2013-05-03 17:14:44