highcharts - 打印按钮正在复制内容

Question

我正在创建带有导出功能的底部附加图例的图表。现在我得到了一个奇怪的效果：当打开打印上下文菜单并选择一个下载选项 (PNG/JPG/PDF/SVG) 时，图表底部的菜单会被复制。

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container'
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},

navigation: {
    buttonOptions: {
        y: 50
    }
},

series: [
      { data: [45.9, 50.2, 45.5, 198.4, 50.2] },
      { data: [68.5, 176.0, 50.1, 123.2, 25.9] },
      { data: [176.4, 50.2, 186.9, 56.6, 58.3] }
    ]
},

function(chart){
    $(chart.series).each(function(i, serie){
        $('<li style="color: ' + serie.color + '">' + serie.name + '</li>').click(function(){
            serie.visible ? serie.hide() : serie.show();
        }).appendTo('#legend')
    })
});

有什么想法可以避免这种情况吗？

你可以在这里试试：http: //jsfiddle.net/pepesale/NTjsJ/4/

Answer 1

看起来很奇怪。但是，您可以在附加之前检查 UL 是否为空。

function(chart){
    //Check the list is Empty before appending...
    if($('#legend').is(":empty")) { 
      $(chart.series).each(function(i, serie){
        $('<li style="color: '+serie.color+'">'+serie.name+' ('+ serie.symbol + ')</li>').click(function(){
            serie.visible ? serie.hide() : serie.show();
        }).appendTo('#legend');
      });
    }
});