Кнопка печати дублирует контент

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'); 
     }); 
    } 
});